Activating the Download button pops up options at the bottom of the page, but nothing is communicated to the screen reader about this

[devinprater]

What Happened?

When I go to https://elementary.io/ and press Enter on the download button, nothing seem to happen. My screen reader doesn't say anything. When I navigate to the end of the page, though, there is a download link, and an empty link which I guess opens a magnet to the ISO torrent. There is no text in that link, though.

Thanks so much for all the accessibility improvements, and I hope this helps for when blind users come to download the OS.

Steps to Reproduce

1. I went to https://elementary.io/
2. I pressed Tab until reaching the download button
3. I pressed Enter on the download button.

Expected Behavior

I expected the download to start automatically. Failing that, I expected there to be a dialog open, maybe using the modal dialog element. Failing that, I expected my screen reader to be placed at the start of the popup, where it talks about using HTTP or a torrent to download Elementary.

OS Version

7.x (Horus)

Software Version

Latest release (I have run all updates)

Log Output

No response

Hardware Info

Screen reader: NVDA 2023.3
Operating System, Windows 11 Version 22H2 (OS Build 22621.2361)
System Model HP Pavilion Laptop 15-eh1xxx
System Type x64-based PC
System SKU 4J8D6UA#ABA
Processor AMD Ryzen 5 5500U with Radeon Graphics, 2100 Mhz, 6 Core(s), 12 Logical Processor(s)
BIOS Version/Date AMI F.26, 7/4/2023
SMBIOS Version 3.3
Embedded Controller Version 78.60
BIOS Mode UEFI
BaseBoard Manufacturer HP
BaseBoard Product 88D0
BaseBoard Version 78.60
Platform Role Mobile
Secure Boot State Off

[NickColley]

Hello @devinprater !

Do you remember if you opted to donate or did you select a zero donation to make the download free?

When I press a donation it redirects me to Stripe, which would be announced on a screen reader but when selecting no donation a model does indeed appear - which could be consistent with what you're describing.

[NickColley]

What I notice that this modal that appears does not trap keyboard focus, it only appears visually. For visual users, try these steps:

1. Enter zero as a donation amount
2. Click on download elementary OS
3. Press tab

You'll notice rather than being focused in the modal itself, you are tabbing behind the modal. This is a big issue and is likely why Devin has ran into this, the modal is never focused it only shows visually.

Potential solution would be to focus the modal itself and have the "Choose a download" heading be announced, then you'd want to trap the focus inside the modal. You can use something like https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert for that. Though it might be better to just adopt the HTML modal element as suggested by Devin.

So I think given I'm fairly confident that this is what's causing the barrier, the next step would be to review the modal functionality and ensure it meets the behaviours described in Dialog (Modal) Pattern.

[NickColley]

I have put together a pull request that I hope resolves this issue, I have tested it cross browser and in NVDA and it seems like it's now announcing properly and will make sense what's going on.

#3593