Add accessibility controls to 'No results' list item

Adds `role="option"` and `aria-disabled="true"` to the rendered li when no results have been found. This ensures for screen readers who navigate to the 'no results' li that they know it's still semantically part of the autocomplete interface but not a valid option. This solution was recommended by DAC following a recent audit of the GOV.UK Design System website.
alphagov · Aug 12, 2024 · bd31634 · bd31634
1 parent bfe3240
commit bd31634
Show file tree

Hide file tree

Showing 7 changed files with 7 additions and 7 deletions.
diff --git a/dist/accessible-autocomplete.min.js b/dist/accessible-autocomplete.min.js
diff --git a/dist/accessible-autocomplete.min.js.map b/dist/accessible-autocomplete.min.js.map
diff --git a/dist/lib/accessible-autocomplete.preact.min.js b/dist/lib/accessible-autocomplete.preact.min.js
diff --git a/dist/lib/accessible-autocomplete.preact.min.js.map b/dist/lib/accessible-autocomplete.preact.min.js.map
diff --git a/dist/lib/accessible-autocomplete.react.min.js b/dist/lib/accessible-autocomplete.react.min.js
diff --git a/dist/lib/accessible-autocomplete.react.min.js.map b/dist/lib/accessible-autocomplete.react.min.js.map
diff --git a/src/autocomplete.js b/src/autocomplete.js
@@ -596,7 +596,7 @@ export default class Autocomplete extends Component {
           })}
 
           {showNoOptionsFound && (
-            <li className={`${optionClassName} ${optionClassName}--no-results`}>{tNoResults()}</li>
+            <li className={`${optionClassName} ${optionClassName}--no-results`} role='option' aria-disabled='true'>{tNoResults()}</li>
           )}
         </ul>
-Original file line number
+Diff line change
@@ Expand Up / @@ -596,7 +596,7 @@ export default class Autocomplete extends Component { @@
               })}
               {showNoOptionsFound && (
-                <li className={`${optionClassName} ${optionClassName}--no-results`}>{tNoResults()}</li>
+                <li className={`${optionClassName} ${optionClassName}--no-results`} role='option' aria-disabled='true'>{tNoResults()}</li>
               )}
             </ul>
@@ Expand Down @@