List, List Item Group and List Item - Ensure ARIA roles, states, and properties are valid - (2036570554)

[dqateam]

Violation:

Ensure ARIA roles, states, and properties are valid

WCAG Reference:

• 4.1.2 Name, Role, Value

Severity:

5

Media Type:

ARIA

---

Areas for Remediation:

• Title: List, List Item Group and List Item - Ensure ARIA roles, states, and properties are valid - (2036570554)
• Module: List, List Item Group and List Item
  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.

[driskull]

Looks like we can tackle multiple components that set both disabled and aria-disabled on a button to fix this. Seems like an easy fix.

[driskull]

Looking at this issue, it seems like maybe calcite-action sets both disabled and aria-disabled on a button. This is causing error reports for multiple components. This should be an easy fix to just get rid of the aria-disabled where disabled is present on the native button inside it.

@jcfranco maybe we can setup an eslint rule to prevent both aria-disabled and disabled from being set in JSX?

Should be a simple low effort high priority fix.

[driskull]

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

[geospatialem]

Repurposed #7775 to include all related components, and the above context @driskull provided on direction, and estimate. Closing this issue in favor of #7775.

Will up the estimate since it applies to multiple components across the design system.