Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix 2 ARIA problems with speaker pages #43

Merged
merged 1 commit into from
Nov 17, 2021
Merged

fix 2 ARIA problems with speaker pages #43

merged 1 commit into from
Nov 17, 2021

Conversation

phette23
Copy link
Member

This addresses two accessibility problems on the speakers and past keynotes pages.

  1. the aria-expanded attributes of the speaker name links does not toggle, it simply stays "false" all the time even when a speaker's info box is displayed
  2. aria-controls attributes target non-existent elements

See MDN for aria-expanded reference. It's my understanding that the control must reflect the state of the controlled element, but the controlled element itself does not need any particular ARIA properties.

To test:

  • apply the PR
  • visit the past keynotes page http://127.0.0.1:4000/speakers/past-keynotes
  • inspect the HTML of the name of a particular keynoter
    • their aria-expanded attribute should be "false"
    • their aria-controls value should match the id of the corresponding .speaker-info box beneath
  • click the keynoter's name link
  • their aria-expanded attribute should now be "true"
  • click another keynoter's name link
  • the original speaker's aria-expanded attribute should be "false"
  • the new speaker's aria-expanded attribute should be "true"

Since these changes are to a speaker_box.html include they should fix both the past keynotes page and the regular speakers page http://127.0.0.1:4000/speakers/ but if you want to test that page, you first need to copy our example data (_data/examples/speakers.yml) into the _data directory.

the aria-expanded value of toggles was not toggling
aria-controls attributes were targeting non-existent elements
@phette23 phette23 added bug Something isn't working accessibility labels Nov 12, 2021
@dzoladz dzoladz merged commit 53e83ee into main Nov 17, 2021
@dzoladz dzoladz deleted the aria-expanded branch November 17, 2021 01:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants