When the screen reader clicks on the “Copy Link” or “Copy Embed” links in the Copy Link modal, the user should receive an auditory notice that the link or code has been copied.
Actual Behaviour
When the screen reader user navigates to the “Copy Link” or “Copy Embed” links, they receive auditory cues indicating that the user has already copied the link or code before actually clicking on anything. This is because the “Copied” success message is not properly hidden from the screen reader The content is only hidden in css by setting the opacity to 0. Instead, toggle the display or visibility properties. Or, only render the success message after the “Copy Link” text has been clicked and use an ARIA alert role to announce the “Copied” success message.
Try copying the embedded link of the project using the copy link button
Notice that the “Copied” success message is read aloud when navigating to the “Copy Link” button, after opening the modal, but before clicking the link.
Screenshot
System Details
macOs Ventura, Chrome Browser, Firefox, VoiceOver (AT)
Where To Find Bug
/projects
Expected Behaviour
When the screen reader clicks on the “Copy Link” or “Copy Embed” links in the Copy Link modal, the user should receive an auditory notice that the link or code has been copied.
Actual Behaviour
When the screen reader user navigates to the “Copy Link” or “Copy Embed” links, they receive auditory cues indicating that the user has already copied the link or code before actually clicking on anything. This is because the “Copied” success message is not properly hidden from the screen reader The content is only hidden in css by setting the
opacity
to 0. Instead, toggle thedisplay
orvisibility
properties. Or, only render the success message after the “Copy Link” text has been clicked and use an ARIAalert
role to announce the “Copied” success message.Steps To Reproduce
Screenshot
System Details macOs Ventura, Chrome Browser, Firefox, VoiceOver (AT)