Accessibility issue: items incorrectly announced as "clickable"

[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

image viewer when using NVDA screenreader

Issue description

When navigating by keyboard using nvda screenreader, several items get announced as clickable when they are not, which can be very disorienting for non-sighted users:

• an item right after the settings button. It is not visually highlighted which item it is. When i try to activate it, nothing happens.
• when the user opens the more information sidebar, the first thing they tab to after opening is the div for the whole sidebar. It is announced as "about the item clickable". The label is descriptive and focus is visible but there is nothing "clickable" about the item itself.
• every div inside the info-sidebar is preceded by the term "clickable" before the content is read out. These are just paragraphs and not interactive.

Furthermore: the image control buttons (eg zoom or next buttons) are all announced as clickable (eg "clickable next"). As they are buttons, this is unneccessary - users will understand what "zoom" or "next" mean.

This was tested using NVDA. Other screenreaders may act differently. But it highlights an issue with the accessibility of the code.

Steps to reproduce

1. activate NVDA screenreader (requires Windows)
2. open this manifest
3. use the keyboard to navigate to the items mentioned and obsere how they are announced by the screenreader

Expected behaviour

Only interactive items should be announced as clickable.

Possible fix

These are all divs. I think the problem stems from the fact that NVDA struggles to interpret the divs and is looking for all sorts of (inherited) CSS and event listeners to make sense of them and things get confused. If appropriate semantic HTML was used (ie button elements), I expect the issues to go away.

WCAG criterion

4.1.2 Name, Role, Value (Level A)

[hannahb-cogapp]

The item right after the settings button is: <div class="openseadragon-canvas" tabindex="0" dir="ltr" style="…"></div>. The issue is caused by this having tabindex="0"