Block, Block Section - Ensure custom controls provide proper textual name, role, and state information - (2036569799)

[dqateam]

Module:

08 Block & Block Section

Violation:

Ensure custom controls provide proper textual name, role, and state information

WCAG Reference:

• 1.1.1 Non-text Content
• 4.1.2 Name, Role, Value

Instance ID:

2036569799

Severity:

7

Description:

[Issue]
There are accordions without appropriate state information. Examples include:

• River

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

[Code Reference]

<button aria-controls="8baa2714-5762-3308-30b8-ee324ecd6671-region" class="section-header toggle" id="8baa2714-5762-3308-30b8-ee324ecd6671-button" name="Expand" aria-label="Expand">
<calcite-icon aria-hidden="true" icon="chevron-right" scale="s" calcite-hydrated=""></calcite-icon><span class="section-header__text">River</span>
</button>

Note:

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

For accordions, the following information is expected:

• Each accordion header must be enclosed in a <button> element.
• Each of these buttons must be enclosed in a heading element of an appropriate level. The <button> element must be the only child of this heading element.
• When the panel is visible, the header button must have aria-expanded="true". When it is hidden, the header button must have aria-expanded="false".
• The button must have aria-controls set to the ID of the panel container.
• If a panel is visible and locked in the expanded state, its header button must have aria-disabled="true".

Media Type:

Custom Controls

Additional Resources:

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

[geospatialem]

Could be related to a similar solution needed for #5553.

[geospatialem]

Also came up in Map Viewer's accessibility audit.

[justinprather]

Hub team would like to +1 this issue 👍

[geospatialem]

After initial R&D a few small modifications are needed, which include:

1. block:

   • The aria-label should be assigned to the heading (required prop, so should be present), rather than the toggleLabel which doesn't provide context to AT. The aria-expanded boolean provides the expansion/collapsing of the component for context.
   • The title value should either also include the heading prop for context, or be removed as the context its providing (such as "collapsed" is confusing for AT when its read twice - from the aria-expanded attribute)
   • The section element doesn't support aria-expanded, can we update to article (where it is supported)?

2. block-section:

   • The aria-label, similar to the block should leverage the text prop. Its not a required prop, so we might need to consider a backup to provide context if the text prop isn't added in by users?
   • The button should also be accompanied with an aria-expanded prop (e.g., aria-expanded={toAriaBoolean(open)})
   • The section element doesn't support aria-expanded, can we update to article (where it is supported)?

Moving to the August milestone for next steps and implementation.

[justinprather]

@geospatialem ... with this ticket getting moved to the August milestone, which release might this fix be incorporated into? The August 28 release or the September 25 release, perhaps?

[geospatialem]

with this ticket getting moved to the August milestone, which release might this fix be incorporated into? The August 28 release or the September 25 release, perhaps?

Great question, @justinprather, and apologies for the confusion on the moving of milestones.

Since the issue was marked as research, the aim for the July milestone was to carry out research to determine feasibility within the current milestone. Since it'll require a bit more effort with affecting two components and some intricacies, we opted to move to next month's release with next week's 1.5.0 release target on the horizon.

However, with the high priority nature of the issue, we are targeting to complete as soon as possible as part of the August release (August 28).

[justinprather]

Thanks for the specifics, @geospatialem!

[github-actions]

Installed and assigned for verification.

[geospatialem]

The block-section is good to go. The block textual name context was not provided with expand/collapse, a follow-up PR is coming shortly.

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified with NVDA and JAWS for block and block-section in 1.7.1-next.0.