fix(action): Add screen reader support for active and indicator props

[driskull]

Related Issue: #4813

Summary

fix(action): Add screen reader support for active and indicator properties. #4813

• Uses aria-pressed to describe toggle state for active property
• Uses aria-live region to describe Unsaved changes for indicator property

[geospatialem]

Fantastic improvement, @driskull! 🙌🏻

We're giving context when the indicator is added to the component on-the-fly. It's missing context if an indicator is already present on the component.

It provides instant feedback, which is a great improvement and good starting point for the component.

A few comments below regarding the indicatorMessage prop, which would be awesome to have a default value assigned to it.

[driskull]

It's missing context if an indicator is already present on the component.

Not sure how we can do anything in this case. Do you know?

[geospatialem]

Not sure how we can do anything in this case. Do you know?

If we have a default text value present in indicatorMessage and add context to the ariaLabel, we can provide context on load.

Very rough example where if present the value is read back with the aria-label, otherwise the empty string will ignore an indicator status:

const {
      active,
      compact,
      disabled,
      loading,
      textEnabled,
      label,
      text,
      indicator,
      indicatorId,
      indicatorMessage,
      intlIndicator,
      buttonId
    } = this;

    const indicatorPresent = indicator ? indicatorMessage ?? intlIndicator : "";

    const ariaLabel = label + indicatorPresent || text + indicatorPresent;

[driskull]

@geospatialem I could use a concatenated aria-label instead of the live region if thats the way we want to go. Let me know @geospatialem. I was concerned that concatenating wouldn't work well in all languages.

[geospatialem]

@geospatialem I could use a concatenated aria-label instead of the live region if thats the way we want to go. Let me know @geospatialem. I was concerned that concatenating wouldn't work well in all languages.

We'd still need the live region for providing context when the indicator is changed, so both would need to be present for context to AT users.

Good call on the concatenation for language support, @driskull what if we used a template literal, such as:

const indicatorStatus = indicator ? indicatorMessage ?? intlIndicator : "";
const ariaLabel = `${label} ${indicatorStatus}` || `${text} ${indicatorStatus}`;

[driskull]

Good call on the concatenation for language support, @driskull what if we used a template literal, such as:

I can do that if we don't think it will be an issue to combine the two strings.

[driskull]

@geospatialem can you test again?

[geospatialem]

@geospatialem can you test again?

@driskull Looking great! 😎

JAWS transcript below, with a similar experience in NVDA, with indicatorMessage set as "My indicator message":

If the indicator is present on load:

hello world (My indicator message) �Toggle button� �Pressed� 
To toggle the state press spacebar.

after the indicator is removed:

hello world

and after the indicator is added:

hello world (My indicator message)

[driskull]

Ready for review.

[anveshmekala]

to support built-in localization for aira-label , t9nComponent interface should be implemented here.

[anveshmekala]

nvm. it will be covered here.

[driskull]

Yep. Can you approve?

[anveshmekala]

🚀