Value List (Advanced Panel) - Avoid improper nesting of form elements and links - (2036570518)

[dqateam]

Module:

42 Calcite Panel

Violation:

Avoid improper nesting of form elements and links

WCAG Reference:

• 4.1.1 Parsing

Instance ID:

2036570518

Severity:

7

Description:

[Issue]
There are show/hide setting image controls without appropriate state information.

[User Impact]
Screen reader users will be unable to determine that these controls expand and collapse content. They will also have difficulty determining whether a control is currently expanded or collapsed.

[Code Reference]

<button aria-busy="false" aria-disabled="false" aria-label="Settings for events" class="button">
 (...)
</button>

Note:

[Suggestion]
Ensure custom controls provide proper textual name, role, and state information.

For show/hide controls, the following information is expected:

• The element that shows and hides a content area must be a <button>.
• When the content area is visible, the button must have aria-expanded="true". Otherwise, the button must have aria-expanded="false".
• The button must have an accessible name set with internal text, aria-label, or aria-labelledby.

[Compliant Code Example]

<button aria-expanded="true" aria-busy="false" aria-disabled="false" aria-label="Settings for events" class="button">
 (...)
</button>

Media Type:

Forms

Additional Resources:

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

[geospatialem]

While the error surfaces in panel, is related to the calcite-value-list component per the sample, and could be a result of the configuration (see: html code).

[driskull]

I think this would be a user configuration solution

[geospatialem]

Agreed - closing this issue.