Identical and inappropriate labels for buttons

[mkdir-washington-edu]

From the HighWire Press / McGraw-Hill Accessibility spreadsheet: https://hypothes-is.slack.com/archives/C8TPC8XMK/p1736535764817829

Highwire Press Reproduction

1. Using screen reader, navigate to the "Annotation Sidebar" button and activate it.
2. Navigate to the "Orphans" tab and activate it.
3. Navigate to the mentioned buttons in the non-modal dialog.
4. Listen that identical and inappropriate textual descriptions are announced for the buttons.

HighWire Expected Result
Textual descriptions of buttons should be meaningful and unique.

HghWire Actual Result
Identical and inappropriate textual descriptions "Toggle visibility of full excerpt text" are provided for the "More" and "Less" buttons. As a result, screen reader users might not understand the purpose of the buttons effectively.

Code Snippet:
<button role=""button"" data-component=""LinkButton"" type=""button"" aria-label=""Toggle visibility of full excerpt text"" aria-expanded=""false"" class=""focus-visible-ring transition-colors whitespace-nowrap rounded inline underline enabled:hover:underline aria-pressed:font-semibold aria-expanded:font-semibold text-color-text enabled:hover:text-brand-dark"" title=""Toggle visibility of full excerpt text"">More</button>"

HighWire Rationale
Form control label enables users to understand the purpose of the form control. Identical and non-descriptive form control labels make it difficult for the screen reader users to understand the functionality associated to the form control effectively.

HighWire Recommendation
Apply the following changes:
• Remove title attribute form the mentioned tag.
• Provide unique and descriptive textual description such as ""More information about coaltarfreeamerica"", ""Less information a bout coaltarfreeamerica"" and so on using ""aria-label"" attribute for tag containing ""More"" text. Ensure that the value of aria-label updates on user interaction via scripting.

Suggested Code:
<button role=""button"" data-component=""LinkButton"" type=""button"" aria-label=""More information a bout coaltarfreeamerica"" aria-expanded=""false"" class=""focus-visible-ring transition-colors whitespace-nowrap rounded inline underline enabled:hover:underline aria-pressed:font-semibold aria-expanded:font-semibold text-color-text enabled:hover:text-brand-dark"">More</button>