Accessibility issue: keyboard users potentially stopped from accessing 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

information sidebar

Issue description

The sidebar is made to fit the size of the image viewer which means that it becomes scrollable when the content outgrows the space given. This scrolling needs to be possible for keyboard users. As long as there is at least one link (or other focusable item) inside the sidebar, this is no problem: the user tabs to this item and then they can use the up and down keys to scroll. However, if there is no focusable item inside, there is no way for a user to tab into or otherwise access the sidebar and they won't be able to read the whole content.

Note that the same issue applies to the sidebar modal (the box that pops up when users activate the info icon on slim screens where there is no space for the sidebar). But i expect the fix is in the same place and will apply to both.

Steps to reproduce

1. open this manifest. This should have a sidebar with enough content to require scrolling.
2. Ensure there are no links in the right-hand sidebar (remove any links using browser devtools)
3. Attempt use keyboard navigation to scroll the sidebar to view the whole content.

Expected behaviour

Keyboard users can view the whole sidebar even if it doesn't contain any links.

Possible fix

Include the sidebar in the tab index. That way a keyboard user will be able to interact with it even when there are no other focusable elements inside.

WCAG criterion

2.1.1 Keyboard (Level A)

Related code

<div class="rightPanel" style="width: 255px; height: 695.466px; left: 1099px;"><div class="top" style="" aria-hidden="false"><h2 class="title">More Information</h2><a class="expandFullButton" tabindex="0"></a><div role="button" class="collapseButton" tabindex="0" title="Collapse Information"></div></div><div class="closed" aria-hidden="true" style="display: none;"><a role="button" class="expandButton" tabindex="0" title="Expand Information"></a><a class="title">More Information</a></div><div class="main" style="height: 650.455px;" aria-hidden="false"><div class="iiif-metadata-component"><div class="groups"><div class="group"> <div class="header">About the item</div> <div class="items"><div class="item _identifier"> <div class="label">Identifier</div> <div class="values"><div class="value">EAP054/1/3</div></div> </div><div class="item _title"> <div class="label">Title</div> <div class="values"><div class="value">Jacques Touselle Photographs: box 3 [c 1982]</div></div> </div><div class="item _place"> <div class="label">Place</div> <div class="values"><div class="value">Cameroon, Africa</div></div> </div><div class="item _link-to-catalogue-record"> <div class="label">Link to catalogue record</div> <div class="values"><div class="value"><a href="http://eap-dev.cogapp.com/archive-file/EAP054-1-3" target="_blank">View the catalogue record</a></div></div> </div><div class="item _citation"> <div class="label">Citation</div> <div class="values"><div class="value">Jacques Touselle Photographs: box 3 [c 1982], British Library, EAP054/1/3, http://eap-dev.cogapp.com/archive-file/EAP054-1-3</div></div> </div><div class="item _digitised-by"> <div class="label">Digitised by</div> <div class="values"><div class="value">University of Kent</div></div> </div><div class="item _digitisation-funded-by"> <div class="label">Digitisation funded by</div> <div class="values"><div class="value">Endangered Archives Programme supported by Arcadia</div></div> </div><div class="item _language"> <div class="label">Language</div> <div class="values"></div> </div><div class="item _scripts"> <div class="label">Scripts</div> <div class="values"></div> </div><div class="item _description"> <div class="label">Description</div> <div class="values"><div class="value">Written on the outside of the box is the following: "11/02/1982". Format of original: Mix of plastic negatives, 120 format plus 2 large plates.… <a href="#" class="toggle less">more</a></div></div> </div><div class="item _attribution"> <div class="label">Attribution</div> <div class="values"><div class="value">Except as otherwise permitted under your national copyright law this material may not be copied or distributed further</div></div> </div><div class="item _logo"> <div class="label">Logo</div> <div class="values"><div class="value"><img alt="logo" src="https://eap.bl.uk/themes/custom/eap/images/bl_logo_100.gif"></div></div> </div></div> </div></div><div class="noData" style="display: none;">No data to display</div></div></div></div>

[LlGC-jop]

I found I was able to focus on the sidebar's .main div after removing links and from there use arrows to scroll.

Has anyone else tried and found they can't?

[Saira-A]

I edited the manifest to completely remove the links (https://gist.githubusercontent.com/Saira-A/41d645a926e28888ec22c87fbf03214e/raw/a8cc631c3fc9386c971ed57dcbf5444edda4b509/gistfile1.json) and from there it doesn't let me scroll at all using the arrow keys - the tabbing goes straight from the panel open/collapse button to the footer options

[LlGC-jop]

Is that with the panel open or closed @Saira-A?

With it closed I get the panel arrows highlighted and then tab takes me to the footer, but that's what I'd expect with the panel closed.

If I open the panel, either before tabbing, or as part of the sequence, I get the main div focused and I can scroll.

[Saira-A]

It's for both - whether it's open or closed it goes straight from the panel arrows to the footer icons. That's with Chrome, I just tried it on Safari and it completely skips the footer icons as well (though not the bottom search bar if it has one)

[LlGC-jop]

Weird. I guess we could just stick tabindex=0 on the main div. Something like

this.$main.attr('tabindex', 0);

on line 38 of MoreInfoRightPanel.ts should do it I think.

I'll take a look at that tomorrow.