Epic: Component a11y consistency with `disabled` and `aria-disabled` attributes (2036570545)

dqateam commented 1 year ago

Violation:

Ensure ARIA roles, states, and properties are valid. In each case both the disabled and aria-disabled attributes are added causing error reports across the design system.

<button
          ...
          aria-disabled={toAriaBoolean(disabled)}
          ...
          disabled={disabled}

Fix

Calcite should get rid of the aria-disabled where disabled is present.

We could consider an eslint rule to prevent both aria-disabled and disabled from being set in the JSX per Matt's recommendation in the list-item issue https://github.com/Esri/calcite-design-system/issues/7796#issuecomment-1799429020.

Components affected

action
block
dropdown
split-button
color-picker
combobox
fab
input
input-message
input-date-picker
list-item
rating
panel
radio-button
select
slider
switch
stepper-item
tabs
tile
tile-select

WCAG Reference:

4.1.2 Name, Role, Value

Severity:

5

Media Type:

ARIA

Areas for Remediation:

Title: Action - Ensure ARIA roles, states, and properties are valid - (2036570545)
Module: Action Pattern: ARIA – Redundant aria-disabled Attribute]

Issue There are elements with invalid ARIA attribute aria-disabled="true" as it already has native HTML disabled attribute.

Occurrences 04 Action

element present below the heading "Test 5. Disabled Block" 09b Split Button
element present below "Test 3. Disabled Split Button" 10 Color Picker
element present below "Test 2. Color Picker Disabled" 11 Combobox, Combobox Item Group and Combobox Item
present below the heading "Test 4. Disabled combobox".
"Disabled first response item" available after activating combobox present below the heading "Test 7. Combobox groups and disabled items". 14a Floating Action Button (FAB)
Test 3. Disabled 16 Input & Input Message
Test 6. Disabled Input 17a Input Date Picker
Test 2. Disabled Input Date Picker 17b Input Time Picker
Test 2. Disabled Input Time Picker 19 List, List Item Group and List Item
Test 2. Disabled List 20b Rating
Disabled with average and chip 23a Panel
Test 2. Disabled Panel 24 Pick List, Pick List Group and Pick List Item
Disabled item, A disabled pick list item. Test 3. Disabled Pick List 26 Radio Button and Radio Button Group
Test 2. Disabled Radio Button Group, Test 3. "Data" Disabled Radio Button 27 Radio Group and Radio Group Item
Test 4. Radio group disabled 28a Select
Test 2. Disabled Select 28b Slider
Test 2. Disabled Slider, Histogram disabled 28c Switch
Test 4. Switch Checked and Disabled 31 Stepper and Stepper Item
"Test 1. Horizontal layout". Step 4 contains a "disabled" property present below heading "Test 2. Grid layout". Step 4 contains a "disabled" property present below heading "Test 3. Vertical layout and Small scale". 32 Tabs, Tab Nav, Tab Title and Tab
Ships (disabled) 33 Tile
River section after "Disabled Tile:" heading 34 Tile Select Group and Tile Select
element after "Tile Select Group Disabled", "utility" section after "Tile Select Disabled", Manufacturing section after "Radio with disabled tile select" and Checkbox with disabled tile select

User Impact Assistive technologies may be unable to parse this content.

[Code R eference]

(..)

Suggestion Ensure ARIA roles, states, and properties are valid. Many ARIA attributes can only be used on certain elements. Some can only be used in combination with other attributes. Additionally, if an attribute references an ID, that ID must be present in the page.

To detect many of these errors automatically, use the Nu Html Checker: https://validator.w3.org/nu/

Compliant Code Example

<div calcite-hydrated="" tabindex="-1" summary="Materials or substances such as minerals, forests, water, and fertile land that occur in nature and can be used for economic gain." heading="Natural Resources" disabled="">
(..)
</div>

Additional Resources:

Report Source: Product accessibility evaluation conducted on the Calcite Design System in August, 2022.

geospatialem commented 10 months ago

This issue includes multiple components, but will need some additional insights and direction from the testers to determine next steps.

Components affected:

action
block
dropdown
split-button
color-picker
combobox
fab
input
input-message
input-date-picker
list-item
rating
panel
radio-button
select
slider
switch
stepper-item
tabs
tile
tile-select

geospatialem commented 8 months ago

Sought expertise from our vendor, which concurred with our initial thoughts:

Set up a test that prevents both aria-disabled and disabled from being set
Remove aria-disabled in favor of disabled

Updating the estimate to a 5 since this impacts 21 components, but we could implement a test that reaches all components in the design system.

github-actions[bot] commented 8 months ago

cc @geospatialem, @brittneytewks

driskull commented 1 month ago

@geospatialem the only valid instance of this is found on action.

https://github.com/Esri/calcite-design-system/blob/06c96e99580f810cba73c37465734f338006c825/packages/calcite-components/src/components/action/action.tsx#L318-L322

All the other instances are a result of the interactive helper.

https://github.com/Esri/calcite-design-system/blob/06c96e99580f810cba73c37465734f338006c825/packages/calcite-components/src/utils/interactive.tsx#L73-L74

These components have a disabled property on them still need the aria-disabled as well because they are not native HTML elements that have a disabled attribute/property. I think the tool reporting these instances is wrong.

driskull commented 1 month ago

@jcfranco if we did want to try and adjust this, we would need to move the aria-disabled to a container within the component and not on the host.

driskull commented 1 month ago

@geospatialem can we spike this one to determine if we need to remove setting aria-disabled on disabled components?

geospatialem commented 1 month ago

@geospatialem can we spike this one to determine if we need to remove setting aria-disabled on disabled components?

@driskull Believe when we checked in with our consultant earlier this year it was recommended to remove aria-disabled when setting disabled.

driskull commented 1 month ago

@geospatialem I wonder if they understand these are web components and not HTML elements like an input or button that have a disabled attribute/property. They may be missing some context.

geospatialem commented 1 month ago

Once https://github.com/Esri/calcite-design-system/pull/10374 is merged the remaining components, with the helper, as-is.

When we conduct the audit with our third party vendor in early 2025 we should communicate that its best to interpret the contents as-is to determine if assistive technologies are unable to parse content, or if this surfaces since the custom disabled and aria-disabled are present in the HTML markup. cc @driskull

geospatialem commented 1 week ago

Once #10374 is merged the remaining components, with the helper, as-is.

When we conduct the audit with our third party vendor in early 2025 we should communicate that its best to interpret the contents as-is to determine if assistive technologies are unable to parse content, or if this surfaces since the custom disabled and aria-disabled are present in the HTML markup. cc @driskull

Changed assignment to address/communicate with Level for the 2025 audit.

Esri / calcite-design-system