[a11y][Violation][4.1.2 Name, Role, Value] Some Notebook UI elements missing roles and labels
Opened this issue · 1 comments
Description
I am running an accessibility test suite with Notebook UI using the IBM Equal Access Accessibility Checker tool on Chrome browser. The results look good overall, only a few things are missing to reach a first formal level of compliance. So kindly help look into these.
Issues reported were violating WCAG 2.2 requirements.
Ref: https://www.ibm.com/able/requirements/checker-rule-sets
Full report (includes information on element locations where issue were found):
Accessibility_Report-7a73e10e-f8a4-4a06-a78d-5174a1309c5b.xlsx
Category: 4.1.2 Name, Role, Value
Ref: https://www.ibm.com/able/requirements/requirements/?version=v7_3#4_1_2
Violation of Rule: element_tabbable_role_valid
List of issues with elements that violate this rule with a screenshots
Issue 1
The tabbable element's role 'generic' is not a widget role
Element location:
<div data-windowed-list-index="0" tabindex="0" aria-label="Code Cell Content with Output" class="lm-Widget jp-Cell jp-CodeCell jp-Notebook-cell jp-mod-selected jp-mod-active">
Issue 2
The tabbable element's role 'none' is not a widget role
Element location:
<jp-button minimal="" appearance="stealth" current-value="" tabindex="0" title="Create a duplicate of this cell below" data-command="notebook:duplicate-below" aria-label="Create a duplicate of this cell below" aria-disabled="false" class="jp-ToolbarButtonComponent">
Screenshot:
**Violation of Rule: input_label_exists
List of issues with elements that violate this rule with a screenshots
Issue 1
Form control with "textbox" role has no associated label
Element location:
<div data-language="python" style="tab-size: 4;" tabindex="-1" aria-multiline="true" role="textbox" class="cm-content" contenteditable="true" translate="no" autocapitalize="off" autocorrect="off" spellcheck="false">
Screenshot:
Reproduce
- Install Chrome extension for IBM accessibility checker tool. Ref: https://www.ibm.com/able/toolkit/verify/automated
- Open Notebook UI on Chrome browser. Add some cells with code.
- Run the tool and we can see the above
Violations reported.
Here is the screenshot of the UI scanned for the attached report:
Expected behavior
Missing roles/labels are in place.
Reference on how to fix this issue can be found in these links:
Add accessible names for inputs lacking visible labels
If repurposing a standard component, use ARIA to set the correct name and role
On custom components, use ARIA to expose name, role, and value
Linking jupyterlab/jupyterlab#16890 here.