Title: Input Time Picker - Ensure ARIA roles, states, and properties are valid - (2036570553)
Module: Input Time Picker
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.
<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.
Violation:
Ensure ARIA roles, states, and properties are valid
WCAG Reference:
Severity:
5
Media Type:
ARIA
Areas for Remediation:
Issue There are elements with invalid ARIA attribute aria-disabled="true" as it already has native HTML disabled attribute.
Occurrences 04 Action
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
Additional Resources:
This one does not seem valid.
disabledis not a native attribute on a custom web component.Closing per https://github.com/Esri/calcite-design-system/issues/7795#issuecomment-1799404009