Value List Item (advanced Panel) - Provide a valid label for form fields - (2036570517)

[dqateam]

Module:

42 Calcite Panel

Violation:

Provide a valid label for form fields

WCAG Reference:

• 1.3.1 Info and Relationships
• 3.3.2 Labels or Instructions
• 4.1.2 Name, Role, Value

Instance ID:

2036570517

Severity:

10

Description:

[Issue]
There are buttons without accessible names. Examples include:

• Events
• Data
• Documents
• Apps & Maps
• Custom Catalog 1
• Initiatives

[User Impact]
Screen reader users will be unable to determine the purpose of these buttons. Speech input users will have difficulty activating them.

[Code Reference]

<span class="handle" data-js-handle="" role="button" tabindex="0">
 <div aria-hidden="true" icon="drag" scale="s" calcite-hydrated="">
   (...)
 </div>
</span>

Note:

[Suggestion]
Provide a valid label for form fields. This includes providing accessible names for buttons. The accessible name of a button can be set with an aria-label attribute. Good accessible names are both concise and descriptive.

[Compliant Code Example]

<span aria-label="Events, press space and use arrow keys to reorder content. Current position 1 of 5." class="handle" data-js-handle="" role="button" tabindex="0">
 <div aria-hidden="true" icon="drag" scale="s" calcite-hydrated="">
   (...)
 </div>
</span>

Media Type:

Forms

Additional Resources:

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

[geospatialem]

Pertains to the value-list-item component's drag-enabled.

[driskull]

I think we can defer this one for now.

[geospatialem]

The handle button still does not provide context in 1.4.2. But considered a low priority with the deprecation. Leaving without a milestone for now.

[geospatialem]

Adding to the freezer milestone due to the deprecated component.

[geospatialem]

Closing in favor of #7426