Accessibility issue: focus order skips whole info modal

[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

info modal (available on slim screens only)

Issue description

When the modal is activated by a keyboard user, focus moves to the close button. This behaviour skips every single item inside the modal. The only way to access them is to tab backwards. This is illogical and potentially hides content from users. Furthermore, when the modal is closed, focus moves away from the modal and its associated info button to the top of the page.

Steps to reproduce

1. open this manifest
2. ensure that the screen is of a width where the info sidebar disappears in favour of an info button
3. use the keyboard to navigate to the info button and activate it
4. tab forward and observe that focus moves away from the modal rather than through the links inside it
5. tab backwards to observe focus moving to the items inside the modal

Expected behaviour

1. On first opening the modal, focus should move through the focusable items inside in reading order from top to bottom.
2. On closing the modal, focus should move back to the info button from where the user can continue where they left off.

WCAG criterion

2.4.3 Focus Order (Level A)

Related code

<div class="overlay moreInfo" aria-hidden="false" style="top: 517px; left: 240px;"><div class="top"></div><div class="middle"><div class="content"><div role="heading" class="heading">More Information</div><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">EAP500/1/1</div></div>      </div><div class="item _title">          <div class="label">Title</div>          <div class="values"><div class="value">"Dimitar Babaliev's collection of photographs from the Karnobat regions, Southeast Bulgaria [1950s-1990s]"</div></div>      </div><div class="item _place">          <div class="label">Place</div>          <div class="values"><div class="value">Bulgaria, Europe</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="https://eap.bl.uk/archive-file/EAP500-1-1" 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">"Dimitar Babaliev's collection of photographs from the Karnobat regions, Southeast Bulgaria… <a href="#" class="toggle less">more</a></div></div>      </div><div class="item _digitised-by">          <div class="label">Digitised by</div>          <div class="values"><div class="value">Independent researcher</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">The photos present Karakachans everyday life and festive tradition in Karnobat region,… <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… <a href="#" class="toggle less">more</a></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 class="buttons"><button type="button" class="btn btn-default close" tabindex="0">Close</button></div></div><div class="bottom" style="background-position: 118px 0px;"></div></div>