Add aria-activedescendent as replacement for focusable suggestion

SpareBank1 · Feb 23, 2017 · 9e5a6e3 · 9e5a6e3
1 parent 6c769e7
commit 9e5a6e3
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 3 deletions.
diff --git a/src/selectors/base-selector.js b/src/selectors/base-selector.js
@@ -19,6 +19,7 @@ class BaseSelector extends Component {
     this.state = {
       showSuggestions: false,
       highlightedSuggestionIndex: -1,
+      suggestionListId: "account-selector-suggestion-list"
     };
 
     /*
@@ -172,14 +173,23 @@ class BaseSelector extends Component {
     }
   }
 
+  getFocusedOptionId() {
+    const filteredResults = this.filterSuggestions();
+    const {highlightedSuggestionIndex} = this.state;
+    if (filteredResults.length > 0 && highlightedSuggestionIndex > -1 && filteredResults.length > highlightedSuggestionIndex) {
+      return `option-${filteredResults[highlightedSuggestionIndex].id}`;
+    }
+    return null;
+  }
+
   render() {
     const {
       value,
       placeholder,
       suggestionsHeightMax,
       id,
     } = this.props;
-    const {showSuggestions, highlightedSuggestionIndex} = this.state;
+    const {showSuggestions, highlightedSuggestionIndex, suggestionListId} = this.state;
     return (
       <div
         className='base-selector'
@@ -198,6 +208,8 @@ class BaseSelector extends Component {
           placeholder={placeholder}
           onBlur={this.onBlur}
           onFocus={this.onFocus}
+          highlightedId={highlightedSuggestionIndex}
+          suggestionListId={suggestionListId}
         />
         {showSuggestions &&
         <SuggestionsList
@@ -209,6 +221,7 @@ class BaseSelector extends Component {
           suggestions={this.filterSuggestions()}
           heightMax={suggestionsHeightMax}
           onSelect={this.onSuggestionClick}
+          id={this.state.suggestionListId}
         />}
       </div>
     );

diff --git a/src/selectors/input-field.js b/src/selectors/input-field.js
@@ -17,14 +17,18 @@ class Input extends Component {
       resetLabel,
       onBlur,
       onReset,
-      inputFieldRef
+      inputFieldRef,
+      highlightedId,
+      suggestionListId
     } = this.props;
     return (
       <div
         role='combobox'
         aria-expanded={ isSuggestionsShowing }
         onFocus={ onFocus }
         onBlur={ onBlur }
+        aria-activedescendant={highlightedId > -1 ? `suggestion-option-${highlightedId}` : null}
+        aria-owns={suggestionListId}
       >
         <input
           onChange={ (e) => {onChange(e.target.value);}}
@@ -70,6 +74,8 @@ Input.propTypes = {
   onFocus: PropTypes.func,
   ariaInvalid: PropTypes.bool,
   inputFieldRef: PropTypes.func,
+  highlightedId: PropTypes.number,
+  suggestionListId: PropTypes.string,
 };
 
 Input.defaultProps = {

diff --git a/src/suggestion/suggestion-item.js b/src/suggestion/suggestion-item.js
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 
 class SuggestionItem extends Component {
   render() {
-    const {item, isHighlighted, render, onSelect, refHighlightedSuggestion} = this.props;
+    const {item, id, isHighlighted, render, onSelect, refHighlightedSuggestion} = this.props;
     return (
       <li
         ref={(itemRef) => {
@@ -12,6 +12,7 @@ class SuggestionItem extends Component {
           }
         }}
         role='option'
+        id={id}
         onMouseDown={() => {onSelect(item);}}
         className={classNames('account-suggestion', {'account-suggestion__highlighted' : isHighlighted})}
         tabIndex={-1}
@@ -23,6 +24,7 @@ class SuggestionItem extends Component {
 
 SuggestionItem.propTypes = {
   item: PropTypes.object.isRequired,
+  id: PropTypes.string.isRequired,
   isHighlighted: PropTypes.bool.isRequired,
   render: PropTypes.func.isRequired,
   onSelect: PropTypes.func.isRequired,

diff --git a/src/suggestion/suggestion-list.js b/src/suggestion/suggestion-list.js
@@ -7,11 +7,13 @@ export default function SuggestionList(props) {
     highlightedIndex,
     renderSuggestion,
     renderNoMatches,
+    id,
   } = props;
   return (
     <ul
       className='container-suggestion-list'
       role='listbox'
+      id={id}
     >
       { suggestions.length > 0 ?
         suggestions.map((item, index) => {
@@ -20,6 +22,7 @@ export default function SuggestionList(props) {
               {...props}
               key={index}
               item={item}
+              id={`suggestion-option-${index}`}
               isHighlighted={index === highlightedIndex}
               render={renderSuggestion}
             />);
@@ -35,6 +38,7 @@ SuggestionList.propTypes = {
   highlightedIndex: PropTypes.number.isRequired,
   renderSuggestion: PropTypes.func.isRequired,
   renderNoMatches: PropTypes.func,
+  id: PropTypes.string.isRequired
 };
 
 SuggestionList.defaultProps = {