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

[dqateam]

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 #7796 (comment).

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 6 Disabled"
  08 Block & Block Section
• 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]

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

[github-actions]

cc @geospatialem, @brittneytewks

[driskull]

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

calcite-design-system/packages/calcite-components/src/components/action/action.tsx

Lines 318 to 322 in 06c96e9

	aria-disabled={toAriaBoolean(disabled)}
	aria-label={ariaLabel}
	aria-pressed={toAriaBoolean(active)}
	class={buttonClasses}
	disabled={disabled}

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

calcite-design-system/packages/calcite-components/src/utils/interactive.tsx

Lines 73 to 74 in 06c96e9

	if (component.disabled) {
	component.el.setAttribute("aria-disabled", "true");

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]

@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]

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

[geospatialem]

@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]

@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]

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

[geospatialem]

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.