Accessibility issue: insufficient label on more toggles in sidebar

[scoutb-cogapp]

UV version: [email protected]

I'm submitting a: bug report => please fork one of these codesandbox examples with a repro of your issue and include a link to it below

Page area

more toggles inside information sidebar

Issue description

Inside the information side-bar, when there are elements that contain longer text, they are abbreviated and a "more" toggle is added that will reveal the rest of the text when clicked. This is fine for the on-screen visible item because a user can see it in context and know what it means. But for a screen-reader user this label is insufficient as they will lack context. The experience of a screenreader user will be that a large number of "more" are read out without any context.

Note that the same goes for the "less" toggle that becomes available after activating the "more" toggle

Steps to reproduce

1. open this manifest
2. expand the information sidebar on the right side
3. now either use the browser's devtools to investigate the "more" toggles inside this sidebar or test as follows using a screenreader:
4. tab to a "more" toggle and hear it announced as simply "more" (depending on the screenreader it may say something like "link more" or similar)
5. activate the toggle
6. tab again to access the newly appeared "less" toggle
7. listen to the "less" toggle announced as "less"

Expected behaviour

The item should have a more descriptive label along the lines of "more citation information" so a screenreader user will know exactly what information is being revealed.

Possible fix

Best approach might be simply changing the visible lable (the toggle text).

Adding an accessible lable (eg aria-label) would also fix this. But there is the additional complication of WCAG 2.5.3 Success Criterion Label in Name (Level A), which states that the accessible label must also contain the visible text (in this case the word "more" or "less"), ideally at the beginning of the label.

WCAG criterion

2.4.9 Link Purpose (Link Only) (Level AAA)

Related code

// insert any relevant code here

Other information

I generally only tested A and AA requirements but this AAA issue is very noticable. And for something that's proably easy to fix, it would make a big difference for screenreader users.

[hannahb-cogapp]

The toggle links are: <a href="#" class="toggle less">more</a> and <a href="#" class="toggle more">less</a>

To meet WCAG 2.5.3 Success Criterion Label in Name (Level A) the aria-labels could be something like this: "More information: Reveal full description" "Less information: Hide full description" "More information: Reveal full citation" "Less information: Hide full citation" etc.

[jamesmisson]

This is within the imported iiif-metadata-component so I'll work on it over in that repo

[jamesmisson]

Hi @scoutb-cogapp and @hannahb-cogapp , while I'm here, would it also be useful/correct for these elements to have an aria-expanded attribute as well as the more descriptive labels?

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded