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