action-bar messageOverride props correspond to both text and label

[geospatialem]

Summary

We presently support assistive technology (AT) users with the action-bar component for the collapse/expand buttons.

However, the support also provides the same context visually updating the text, which in some use cases doesn't provide a good interface, or user experience for visual users.

Could we support both AT and visual users in providing opportunities to support both use cases?

Actual Behavior

When setting the intlCollapse property the visual text and label contain the value.

Expected Behavior

Developers should be able to specify different values for the action-bar collapse button with the displayed text (perhaps new props, textCollapse/textExpand versus what is read by AT intlCollapse/intlExpand)?

For instance, visual users may only need displayed text of "Collapse", whereas additional context is needed to support AT users, such as "Collapse accordion sample menu bar".

Reproduction Sample

https://codepen.io/geospatialem/pen/Jjvgrqv

Reproduction Steps

1. Open the sample
2. Observe when supplied with the intlCollapse prop the "Collapse" text is replaced with the value (e.g., "Collapse accordion sample menu bar").

Reproduction Version

beta.95

Working W3C Example/Tutorial

No response

Relevant Info

There may still be a use case for allowing the developer to change the visual text, so perhaps a new property should be introduced to account for both the accessible label (intlCollapse/intlExpand and text (perhaps textCollapse/textExpand)?

Additional background:

• A sample with a native button that is supplied with different visual text and an accessible label for context.
• Many other CC have similar options, such as Loader where label and text properties co-exist on the component.

Regression?

No response

Esri team

Calcite (dev)

[geospatialem]

Spike to determine if this is still an issue that we should address with the 1.x and 2.x releases.

[geospatialem]

This is still valid, updated the Codepen to 2.0.0 to reflect the different properties and attributes.

Currently if the messageOverrides property is overwritten context is provided to AT, but the text in the component is also altered, which may not support a good user experience.

[github-actions]

cc @geospatialem, @brittneytewks

[github-actions]

Installed and assigned for verification.

[driskull]

This one was already marked as installed but it is installed now.

[geospatialem]

Verified in JAWS and NVDA with https://codepen.io/geospatialem/pen/Jjvgrqv in 2.10.0-next.1 with the following messageOverrides of expandLabel and collapseLabel:

document.querySelector("calcite-action-bar").messageOverrides = {
  expandLabel: "Expand accordion sample menu bar",
  collapseLabel: "Collapse accordion sample menu bar"
};