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

Accessibility improvements #3484

Merged
merged 7 commits into from
Aug 22, 2024
Merged

Accessibility improvements #3484

merged 7 commits into from
Aug 22, 2024

Conversation

JohnXLivingston
Copy link
Contributor

I made an accessibility audit on my project. Part of the issues concern Converse.
Here are the required fixes. I have separated them in different commits, so we can discuss if necessary.

Here is the list of changes:

  • adding role=button attribute on dropdown actions, for better
    accessibility with screen readers.
  • Autocomplete fields: shift+tab should always give focus to previous
    focusable element, and tab should give the focus to next focusable
    element if the input is empty.
  • dropdown buttons: adding a "Menu" aria-label, and adding aria-hidden on icon.
  • message actions: opacity:1 on focus.
  • list-item-action: opacity:1 on focus, tabindex=0 to be focusable.
  • adding aria-hidden="true" on fields with hidden-username class.
  • Adding role="heading", aria-level="2" on userinfo, MUC title and
    chatbox titles, to improve navigation with screen readers.
  • Adding role="heading", aria-level="3" on controlbox-heading elements.
  • converse-avatar:
    • Fix alt_text parameter that was ignored
    • using aria-label instead of alt attribute on svg (alt is not valid)
    • if no alt_text, adding role="presentation" so that screen readers
      ignores the image
    • when fallbacking on initials, adding a aria-label with the full name

As my project only uses Converse in singleton mode to display one MUC, the audit is incomplete.
I tried to fix some of the issues more widely than what was required for my project, but i can have missed some points.

  • Add a changelog entry for your change in CHANGES.md
  • When adding a configuration variable, please make sure to
    document it in docs/source/configuration.rst
  • Please add a test for your change. Tests can be run in the commandline
    with make check or you can run them in the browser by running make serve
    and then opening http://localhost:8000/tests.html.

* adding role=button attribute on dropdown actions, for better
  accessibility with screen readers.
* Autocomplete fields: shift+tab should always give focus to previous
  focusable element, and tab should give the focus to next focusable
  element if the input is empty.
* dropdown buttons: adding a "Menu" aria-label, and adding aria-hidden on icon.
* message actions: opacity:1 on focus.
* list-item-action: opacity:1 on focus, tabindex=0 to be focusable.
* adding aria-hidden="true" on fields with hidden-username class.
* Adding role="heading", aria-level="2" on userinfo, MUC title and
  chatbox titles, to improve navigation with screen readers.
* Adding role="heading", aria-level="3" on controlbox-heading elements.
* converse-avatar:
  * Fix alt_text parameter that was ignored
  * using aria-label instead of alt attribute on svg (alt is not valid)
  * if no alt_text, adding role="presentation" so that screen readers
    ignores the image
  * when fallbacking on initials, adding a aria-label with the full name
@jcbrand jcbrand merged commit 365553d into master Aug 22, 2024
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants