facets: convert number to locale, a11y improvements

inveniosoftware · Sep 12, 2023 · a5dd421 · a5dd421
1 parent 295b7f5
commit a5dd421
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 11 deletions.
diff --git a/...o_search_ui/assets/semantic-ui/js/invenio_search_ui/components/InvenioSearchPagination.js b/...o_search_ui/assets/semantic-ui/js/invenio_search_ui/components/InvenioSearchPagination.js
@@ -18,7 +18,7 @@ export const InvenioSearchPagination = ({ paginationOptions, total }) => {
         {total && <Count
           label={() => (
             <Trans>
-              <b>{{ total }}</b> results found
+              <b>{total.toLocaleString("en-US")}</b> results found
             </Trans>
           )}
         />}
@@ -66,7 +66,7 @@ export const InvenioSearchPagination = ({ paginationOptions, total }) => {
           label={() => (
             <span className="rel-mr-2">
               <Trans>
-                <b>{{ total }}</b> results found
+                <b>{total.toLocaleString("en-US")}</b> results found
               </Trans>
             </span>
           )}

diff --git a/invenio_search_ui/assets/semantic-ui/js/invenio_search_ui/components/SearchApp.js b/invenio_search_ui/assets/semantic-ui/js/invenio_search_ui/components/SearchApp.js
@@ -133,6 +133,7 @@ export const SearchApp = ({ config, appName }) => {
                 <Grid.Row columns={columnsAmount}>
                   {facetsAvailable && (
                     <GridResponsiveSidebarColumn
+                      ariaLabel={i18next.t("Search filters")}
                       mobile={4}
                       tablet={4}
                       computer={4}
@@ -145,7 +146,11 @@ export const SearchApp = ({ config, appName }) => {
                     </GridResponsiveSidebarColumn>
                   )}
 
-                  <Grid.Column {...resultsPaneLayout}>
+                  <Grid.Column
+                    as="section"
+                    aria-label={i18next.t("Search results")}
+                    {...resultsPaneLayout}
+                  >
                     <SearchAppResultsPane
                       layoutOptions={config.layoutOptions} appName={appName} buildUID={buildUID}
                     />

diff --git a/invenio_search_ui/assets/semantic-ui/js/invenio_search_ui/components/common/facets.js b/invenio_search_ui/assets/semantic-ui/js/invenio_search_ui/components/common/facets.js
@@ -20,7 +20,7 @@ import { BucketAggregation, Toggle, buildUID } from "react-searchkit";
 
 export const ContribSearchAppFacets = ({ aggs, toggle, help, appName }) => {
   return (
-    <aside aria-label={i18next.t("filters")} id="search-filters">
+    <>
       {toggle && (
         <Toggle
           title={i18next.t("Versions")}
@@ -44,7 +44,7 @@ export const ContribSearchAppFacets = ({ aggs, toggle, help, appName }) => {
           </Card.Content>
         </Card>
       )}
-    </aside>
+    </>
   );
 };
 
@@ -104,20 +104,25 @@ export const ContribParentFacetValue = ({
             icon="angle right"
             className="transparent"
             onClick={() => setIsActive(!isActive)}
+            aria-expanded={isActive}
             aria-label={
               i18next.t("Show all sub facets of ") + bucket.label || keyField
             }
           />
           <Checkbox
             label={bucket.label || keyField}
             id={`${keyField}-facet-checkbox`}
-            aria-describedby={`${keyField}-count`}
             value={keyField}
             checked={isSelected}
             onClick={() => onFilterClicked(keyField)}
           />
-          <Label circular id={`${keyField}-count`} className="facet-count">
-            {bucket.doc_count}
+          <Label
+            circular
+            role="note"
+            aria-label={`${bucket.doc_count} results for ${bucket.label || keyField}`}
+            className="facet-count"
+          >
+            {bucket.doc_count.toLocaleString("en-US")}
           </Label>
         </List.Content>
       </Accordion.Title>
@@ -146,12 +151,16 @@ export const ContribFacetValue = ({
         onClick={() => onFilterClicked(keyField)}
         label={bucket.label || keyField}
         id={`${keyField}-facet-checkbox`}
-        aria-describedby={`${keyField}-count`}
         value={keyField}
         checked={isSelected}
       />
-      <Label circular id={`${keyField}-count`} className="facet-count">
-        {bucket.doc_count}
+      <Label
+        circular
+        role="note"
+        aria-label={`${bucket.doc_count} results for ${bucket.label || keyField}`}
+        className="facet-count"
+      >
+        {bucket.doc_count.toLocaleString("en-US")}
       </Label>
     </List.Content>
   );