Go through our codebase and fix all accessibility related issues

[taoeffect]

Problem

We haven't thoroughly vetted our codebase for accessibility issues.

Solution

This very informative post on accessibility in SPAs covers a range of issues and offers a bunch of tips.

For example, it says that:

Here’s the best piece of accessibility advice for newbies: if something is a button, make it a <button>. If something is an input, make it an <input>. Don’t try to reinvent everything from scratch using <div>s and <span>s.

I did a quick search through our codebase, and while most of the markup does use tag='button' where necessary (with i18n), or button directly, still some parts don't, but do have the .button class on them. For example:

// In GroupSummary.vue ...

  p.has-text-right
    router-link.button(:to="{name: 'GroupName'}")
      i18n Edit

// In GroupMembers.vue

      tooltip(
        v-if='member.pending'
        direction='bottom-end'
      )
        span.button.is-icon-small(
          data-test='pendingTooltip'
        )
          i.icon-question-circle
        template(slot='tooltip')
          i18n(
            tag='p'
            :args='{ username }'
          ) We are waiting for {username} to join the group by using their unique invite link.

etc.

The post covers other topics include the use of aria labels, how to handle scrolling and scroll positions, as well as automated accessibility testing.

Go through the post and check that our codebase follows all best practices, and then actually test out the entire app with a screen reader, like the built-in on on macOS, to make sure everything works as expected.

[dotmacro]

then actually test out the entire app with a screen reader, like the built-in on on macOS

I'd love to test the app with VoiceOver at any time. Also feel free to @ me to help test individual changes/elements/vues.

[sandrina-p]

I believe addressing accessibility shouldn't be a single task, but instead an ongoing process to be verified at each new development, as an implicit requirement.

That being said, @dotmacro you can test the app with VoiceOver right now. On the way, you'll find a lot of problems. Then it makes sense to open a specific issue to address them.