Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility updates to copy buttons and textarea description #47

Merged
merged 2 commits into from
Aug 8, 2023

Conversation

mferrarini
Copy link
Contributor

Description

An accessibility audit completed at Harvard revealed two issues that occur when screenreaders are interacting with the share plugin.

  1. There are two buttons labeled "copy" that copy different info; When seen in context, the placement of these buttons are fine. Using a screenreader, though, when listing the buttons, there will be two buttons with the same text (copy) that copy different content, thus creating confusion.
  2. textarea form field (where the embed code is offered for copying and pasting) is not labeled; every form field element should have a descriptive text label.

Fixes

  1. Added aria-labels to the “Copy” buttons so that screen readers can differentiate the two options (copying a link vs. copying the iframe code)
  2. Updated the "copy & paste code" element to be a label instead of a legend, so that screenreaders have a clearer description of the textarea form field when it is read aloud; this also involved updating the classname to be a label and giving it the same styles as it had before with the legend.

Unit tests were also updated to reflect the changes made related to the legend and label components.

@mferrarini mferrarini changed the title Copy labels Accessibility updates to copy buttons and textarea description Aug 7, 2023
Copy link
Collaborator

@phil-plencner-hl phil-plencner-hl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I ran the plugin locally and I saw the changes to the labels and aria tags in the markup.
I also ran the unit tests and everything passed.

@mferrarini mferrarini marked this pull request as ready for review August 7, 2023 13:36
@mferrarini mferrarini merged commit 556e3da into master Aug 8, 2023
1 of 5 checks passed
@mferrarini mferrarini deleted the copy-labels branch August 8, 2023 18:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants