Implement an action indicator with icon color override with screen reader context (active/inactive)

[geospatialem]

Summary

Screen readers should receive confirmation of the actions state (active/inactive).

Additional issues stemmed from this issue include #5003, #5005

(Some additional issues for consideration: #1220, #3950)

Actual Behavior

Context of the active property is not provided to screen reader users.

Expected Behavior

Provide screen reader context based on the active prop (e.g., action / button is active) using aria-selected, or similar.

Reproduction Sample

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

Reproduction Steps

1. Open the Codepen sample
2. Keyboard in or mouse over the second action (speaker) to depict the difference between an active state vs :focus/:active/:hover states.

Reproduction Version

1.0.0-beta.83

Working W3C Example/Tutorial

No response

Relevant Info

No response

Regression?

No response

[geospatialem]

Some additional discussion is needed to proceed.

Additional context provided by @macandcheese from #5139 (comment):

I think the issue is that [action] can be used in multiple ways.

If you were to use it alongside other actions, in a group, bar, or pad - an app needs to manage which is active. This would be a menu item or potentially more of a radio group type of interaction, even if the action itself doesn't have knowledge of the other action's states.

It can also be used as a toggle, individually from other actions (dark mode on / off) - this is where the toggle / checkbox role seems like it could apply

It sounds like to me, the aria-pressed could be keyed off of the active prop - even if the action component itself doesn't manage that.

Enter / Space could still be applicable even when there isn't an "active" state associated in the UI - for instance, a "Save" action - this would be interacted by click, enter, space, but wouldn't have a visual representation once clicked.

[driskull]

I think this issue needs more discussion and direction before we can do anything.

We have an active property which is probably better representative of aria-selected. But since action is a role of button I think we have to use aria-pressed here in order to not misuse aria attributes.

I'm not sure what aria attribute indicator would map to exactly.

[driskull]

@geospatialem can you research what we should do for indicator? Maybe just an update label or something?

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified in next.662.

JAWS transcript:

Item 1 (indicator present) �Toggle button� �Pressed� 
To toggle the state press spacebar.
Item 2 �Toggle button� 
To toggle the state press spacebar.