Accessibility: The "Copy" control's copied state is not indicated programmatically when a user activates the control

[arlina-espinoza]

Describe the bug The "Copy" control's copied state is not indicated programmatically when a user activates the control. While a status message appears with the text "Copied" to let sighted users know that the text has been copied, blind and low vision users will not know that the button was activated.

Expected behavior When the "Copy" control is activated, its resulting message must be conveyed both visually and programmatically. To programmatically indicate the copied state, a live region should be used to announce the status message of "Copied" to screen reader users at the same time that it appears visually.

Code example (simplified)
<button>
<div class="sc-carFqZ hBWCUB">Copy
...
<div class="sc-iBzEeX glZmJR" role="status">Copied</div>
...
</div>
</button>

Note: To ensure that the message is announced reliably to screen reader users, this element must be present in the DOM when the page first loads but must be empty of any content. When the element is populated with content, it will be announced. Its content must only be announced once and keyboard focus must not be moved to the element.

Resources

• ARIA live regions
• Defining 'Toast' Messages

Screenshots

P.D.: Thanks for the great work on this project!