Test Environment:
Version: Version 24H2 (OS Build 26231.5000)
Browser Version: 127.0.2638.2 (Official build) dev (64-bit)
URL: https://tsdoc.org/
Tool: Accessibility Insights for Web
Repro Steps:
Open the above URL in edge dev browser and login with v-.
Press the tab key and navigate to the 'Search' field and press enter key to activate it.
Type any search character and press enter key to search.
Run the fast pass of accessibility insights for web.
Observe the issue.
Actual Result:
For the search result input fields does not have an accessible name.
Also, Aria label is not defined for the search result.
Expected Result:
Ensures every ARIA input field has an accessible name for the search result.
Also, ARIA label should be defined for the search result so that when the screen reader focus lands on it then screen reader should announce as Tags @alpha 1 of 5 selected.
Element path:
.DocSearch-Hits:nth-child(1) > ul[role="listbox"][aria-labelledby="docsearch-label"]
Snippet:
**How to fix:**
Fix any of the following:
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
**User Impact:**
It will impact the screen reader user as they will not be able to know the name of the list item or search result if the accessible name is not defined for the control.
**WCAG Reference:**
https://www.w3.org/WAI/WCAG21/Understanding/name-role-value
Have feedback to share on Bugs ? please tag bug as “A11yRCA” and add your feedback in the comment section
https://github.com/microsoft/rushstack-websites/assets/95913748/6aa56ea4-b011-449b-81b0-f74f596da563
Test Environment: Version: Version 24H2 (OS Build 26231.5000) Browser Version: 127.0.2638.2 (Official build) dev (64-bit) URL: https://tsdoc.org/ Tool: Accessibility Insights for Web
Repro Steps:
Actual Result: For the search result input fields does not have an accessible name. Also, Aria label is not defined for the search result.
Expected Result: Ensures every ARIA input field has an accessible name for the search result. Also, ARIA label should be defined for the search result so that when the screen reader focus lands on it then screen reader should announce as Tags @alpha 1 of 5 selected.
Element path: .DocSearch-Hits:nth-child(1) > ul[role="listbox"][aria-labelledby="docsearch-label"]
Snippet:
**How to fix:** Fix any of the following: aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute **User Impact:** It will impact the screen reader user as they will not be able to know the name of the list item or search result if the accessible name is not defined for the control. **WCAG Reference:** https://www.w3.org/WAI/WCAG21/Understanding/name-role-value Have feedback to share on Bugs ? please tag bug as “A11yRCA” and add your feedback in the comment section   https://github.com/microsoft/rushstack-websites/assets/95913748/6aa56ea4-b011-449b-81b0-f74f596da563