fix a11y search

plone · Jul 20, 2022 · e8fc129 · e8fc129
1 parent 3f2a183
commit e8fc129
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,8 @@
 
 ### Bugfix
 
+- fix a11y search. @giuliaghisini
+
 ### Internal
 
 ### Documentation
@@ -165,6 +167,7 @@
 - Fix RenderBlocks: path @ksuess
 - Fix field id creation in dexterity control panel to have slugified id @erral
 - Changed to get intl.locale always from state @ionlizarazu
+
 ### Feature
 
 - Updated Brazilian Portuguese translation @ericof

diff --git a/src/components/theme/Search/Search.jsx b/src/components/theme/Search/Search.jsx
@@ -75,6 +75,7 @@ class Search extends Component {
   componentDidMount() {
     this.doSearch();
     this.setState({ isClient: true });
+    this.focusResults();
   }
 
   /**
@@ -87,6 +88,22 @@ class Search extends Component {
     if (this.props.location.search !== nextProps.location.search) {
       this.doSearch();
     }
+
+    if (
+      JSON.stringify(this.props.search) !== JSON.stringify(nextProps.search)
+    ) {
+      //all'apertura della pagina dei risultati di ricerca, sposto il focus sui risultati
+      this.focusResults();
+    }
+  };
+
+  focusResults = () => {
+    //all'apertura della pagina dei risultati di ricerca, sposto il focus sui risultati
+    setTimeout(function () {
+      if (document.querySelector('#page-search #search-results')) {
+        document.querySelector('#page-search #search-results').focus();
+      }
+    }, 100);
   };
 
   /**
@@ -146,7 +163,13 @@ class Search extends Component {
     return (
       <Container id="page-search">
         <Helmet title="Search" />
-        <div className="container">
+        <div
+          className="container"
+          role="region"
+          aria-live="polite"
+          id="search-results"
+          tabIndex={-1}
+        >
           <article id="content">
             <header>
               <h1 className="documentFirstHeading">

diff --git a/src/components/theme/Search/__snapshots__/Search.test.jsx.snap b/src/components/theme/Search/__snapshots__/Search.test.jsx.snap
@@ -6,7 +6,11 @@ exports[`Search renders a search component 1`] = `
   id="page-search"
 >
   <div
+    aria-live="polite"
     className="container"
+    id="search-results"
+    role="region"
+    tabIndex={-1}
   >
     <article
       id="content"
@@ -87,7 +91,11 @@ exports[`Search renders an empty search component 1`] = `
   id="page-search"
 >
   <div
+    aria-live="polite"
     className="container"
+    id="search-results"
+    role="region"
+    tabIndex={-1}
   >
     <article
       id="content"

diff --git a/src/components/theme/SearchWidget/SearchWidget.jsx b/src/components/theme/SearchWidget/SearchWidget.jsx
@@ -91,7 +91,11 @@ class SearchWidget extends Component {
    */
   render() {
     return (
-      <Form action="/search" onSubmit={this.onSubmit}>
+      <Form
+        action="/search"
+        onSubmit={this.onSubmit}
+        aria-controls="search-results"
+      >
         <Form.Field className="searchbox">
           <Input
             aria-label={this.props.intl.formatMessage(messages.search)}
@@ -103,7 +107,10 @@ class SearchWidget extends Component {
             placeholder={this.props.intl.formatMessage(messages.searchSite)}
             title={this.props.intl.formatMessage(messages.search)}
           />
-          <button aria-label={this.props.intl.formatMessage(messages.search)}>
+          <button
+            aria-label={this.props.intl.formatMessage(messages.search)}
+            aria-controls="search-results"
+          >
             <Icon name={zoomSVG} size="18px" />
           </button>
         </Form.Field>

diff --git a/src/components/theme/SearchWidget/__snapshots__/SearchWidget.test.jsx.snap b/src/components/theme/SearchWidget/__snapshots__/SearchWidget.test.jsx.snap
@@ -3,6 +3,7 @@
 exports[`SearchWidget renders a search widget component 1`] = `
 <form
   action="/search"
+  aria-controls="search-results"
   className="ui form"
   onSubmit={[Function]}
 >
@@ -24,6 +25,7 @@ exports[`SearchWidget renders a search widget component 1`] = `
       />
     </div>
     <button
+      aria-controls="search-results"
       aria-label="Search"
     >
       <svg