jupyter / notebook

Jupyter Interactive Notebook
https://jupyter-notebook.readthedocs.io/
BSD 3-Clause "New" or "Revised" License
11.73k stars 4.96k forks source link

[a11y][Violation][ARIA specification] ARIA attributes "aria-pressed" and "aria-label" not applied consistent with WCAG guidelines #7489

Open nkn2022 opened 2 weeks ago

nkn2022 commented 2 weeks ago

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

List of violations categorized based on the checkpoints.

Category: ARIA specification

Ref: https://www.ibm.com/able/requirements/checker-rule-sets

**Violation of Rule: aria_attribute_valid**

List of issues with elements that violate this rule with a screenshots

Issue 1 The ARIA attributes "aria-pressed" are not valid for the element with ARIA role "none" Element location: <jp-button minimal="" appearance="stealth" current-value="" tabindex="-1" title="Enable Debugger" aria-pressed="false" aria-label="Enable Debugger" aria-disabled="false" class="jp-DebuggerBugButton jp-ToolbarButtonComponent"> Screenshot: Image

Issue 2 The ARIA attributes "aria-label" are not valid for the element

with implicit ARIA role "generic" Element location: <div data-windowed-list-index="0" tabindex="0" aria-label="Code Cell Content" class="lm-Widget jp-Cell jp-CodeCell jp-Notebook-cell jp-mod-selected jp-mod-noOutputs jp-mod-active"> Screenshot: Image 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"> Screenshot: Image

Reproduce

Here is the screenshot of the UI scanned for the attached report: Image

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

RRosio commented 1 week ago

Linking https://github.com/jupyterlab/jupyterlab/issues/16891