elementary / website

The elementary.io website
https://elementary.io
MIT License
1.24k stars 706 forks source link

Ensure that the download modal is announced to screen reader users #3593

Open NickColley opened 4 months ago

NickColley commented 4 months ago

I did consider improving the current implementation, I think adding focus management would have been fine but keyboard trapping is non-trivial so that's why adopting this is worthwhile as we get all that for free.

Resolves #3378

Browser support strategy

For browsers that do not support the native dialog we aim to show them this at the bottom of the page:

download elementary section inline the page instead of inside a modal

Which'll be linked to using regular anchor jumping.

For users that support the dialog element it'll look the same as it currently does.

I have not been able to test what happens when someone donates as I cant get stripe working locally but it should work since I've just changed the internal modal and not the place it gets called.

Screen reader testing

NVDA

Using https://assistivlabs.com/.

When I open the dialog I get this announced:

Choose a Download dialog Download from a localized server or by magnet link. For help and more info, see the

Browser testing

Browser Result
Safari iOS 16 iPhone showing modal
Safari iOS 15 iPhone showing inline in the page
Chrome for Android (latest) Android showing modal
Safari 17.3 (latest) Safari showing modal
Safari 14.1 Safari showing inline in the page
Firefox 128 (latest) Firefox showing modal
Firefox 81 Firefox showing inline
Chrome (latest) Chrome showing modal
Internet Explorer It is inline in the page but the download button doesnt work to begin with on IE11 so it is already broken there - I assume we dont mind.

Note the modal icon is not shown in the screenshots because I cant get it to load for some reason, but it is unchanged.