Details
-
Bug
-
Resolution: Fixed
-
Low
-
4.22.3
-
Severity 2 - Major
-
Description
Issue Summary
The element is not accessible by keyboard alone and there is no conforming accessible version of the same functionality reachable from the non-conforming page.
Steps to Reproduce
- Launch the URL
- Navigate to the "Name" section, which is present below the "Filter Search" Combobox field.
- Observe that while using tab functionality in the "Name" section, the elements such as "Sort by name", "Billing Service", "Email Services" etc. do not receive keyboard support.
Actual Results
In the main content area, there are elements such as "Sort by name", "Billing Service", "Email Service", "ERP Service", "Payroll Service", and "Public Service" does not have keyboard support. When the keyboard-only users or screen reader users navigates the webpage with the help of the keyboard, the elements get skipped after "Advanced" and it directly goes to the "Refresh" link. This will make it the keyboard-only users difficult to use this feature.
Expected Results
- Modify the scripts of the tabs to ensure that the tabs are accessible for all users.
- Set the role="tablist" for the <div> element containing tabs.
- Set the aria-labelledby="tablist-1" for the <div> element containing tabs.
- Set the role for the <div> element used for displaying "Sort by name", "Billing Service", etc as “tab”. In addition, specify the ARIA attributes for tabs, i.e “aria-selected”. (The value of the aria-selected attribute needs to change on the basis of the currently active tab.) Set aria-selected=”true” for the active tab.
- Specify an “id” attribute for the <div> element used to display the content of each tab. In addition, ensure that the value of the “id” attribute is referenced correctly via the aria-controls attribute of each tab.
- Set the role=“tabpanel” for the <div> elements displaying the contents associated with "Sort by name", "Billing Service", etc tabs. A working example of accessible tab functionality can be found at https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html
Screenshot
Screen Recording
Screen Recording 2022-05-31 at 5.54.20 PM.mov
Workaround
Currently, there is no known workaround for this behaviour. A workaround will be added here when available.
Bug Ref: 748634
Bulldog Ref: JSMDC-12819
Attachments
Issue Links
- is blocked by
-
JSMDC-12819 Loading...