🐛 make key indicator collection more accessible

[sophiamersmann]

I dropped the ball on the accordion's accessibility, so here I am making amends 😇

This PR makes the key-indicator-collection component more accessible to keyboard and screen reader users.

In particular,

• Hidden content (i.e. closed accordion items) is removed from the tab sequence and the accessibility tree (uses the inert attribute to do so)
• Fixes a bug where "clicking" on an accordion item by tabbing to it and then pressing Enter made the focus jump back to the first focusable element on the screen (the OWID logo in the header)

[sophiamersmann]

• 🐛 make key indicator collection more accessible #3527 👈
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @sophiamersmann and the rest of your teammates on Graphite

[ikesau]

thank youuuu!!

the fixes work - one last thing that would be nice is to change the key-indicator-header__title spans to be h3s so they show up in the heading rotor?

[sophiamersmann]

The accordion headers show up in the headings rotor for me (the whole button is wrapped in an h3). Don't they for you?

[github-actions]

This PR has had no activity within the last two weeks. It is considered stale and will be closed in 3 days if no further activity is detected.

[sophiamersmann]

hey @ikesau, is this good to merge or should we make some more changes to the markup?

[github-actions]

This PR has had no activity within the last two weeks. It is considered stale and will be closed in 3 days if no further activity is detected.

[sophiamersmann]

Ups, this one slipped through the cracks. I'll just merge this now and if there is something else to be done, we can do so in a separate pr :)

[owidbot]

Quick links (staging server):

Site	Admin	Wizard

Login: ssh owid@staging-site-a11y-key-indicator-collection

• Site-screenshots: https://github.com/owid/site-screenshots/compare/a11y-key-indicator-collection
• SVG tester: https://github.com/owid/owid-grapher-svgs/compare/a11y-key-indicator-collection

SVG tester:

Number of differences (default views): 0 ✅
Number of differences (all views): 0 ✅

Edited: 2024-05-30 07:47:01 UTC
Execution time: 1.81 seconds