Accessibility concern in dashboard component

Discuss your ideas or share your views:

In dashboard component we have actions that act as link (interactive component), here is an example

https://github.com/freeCodeCamp/chapter/blob/7a21f751446a1a4c715edb4c7f9824a9744e3bd3/client/src/modules/dashboard/Chapters/pages/ChaptersPage.tsx#L14-L36?plain=1

const actionLinks = [
  {
    colorScheme: 'blue',
    size: 'xs',
    href: (id: number) => `/dashboard/chapters/${id}/new-venue`,
    text: 'Add venue',
    requiredPermission: Permission.VenueCreate,
  },
  {
    colorScheme: 'blue',
    size: 'xs',
    href: (id: number) => `/dashboard/chapters/${id}/new-event`,
    text: 'Add Event',
    requiredPermission: Permission.EventCreate,
  },
  {
    colorScheme: 'blue',
    size: 'xs',
    href: (id: number) => `/dashboard/chapters/${id}/edit`,
    text: 'Edit',
    requiredPermission: Permission.EventEdit,
  },
];

Although this is fine, I am worried about the repetition of the actions, which lead to this accessibility concern.

So here is what I am worried about, we have multiple edit button or alike, that do the same thing edit chapter but for different chapters, so people may get confused of the lack of info in these buttons and have a worse experience.

I am wondering if we should add aira-label to these buttons https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label, so people with accessibility know that they are editing a specific chapter, and to give access to voice users playbook https://blog.google/technology/next-billion-users/voice-users-playbook/, because they need to ask the device to interact with a component, and giving a unique name should help them.

[bbsmooth]

@Sboonny You are correct, these interactive elements should have a unique accessible name. For the action buttons on the dashboard page my suggestion would be to just add the name of the chapter to the button text using sr-only text. For example, if the chapter name is “Skiles and Sons” then the “Add venue” button text would be Add venue <span class='sr-only'>for Skiles and Sons</span>.

Also, the “Add new” button in the top right should have sr-only “chapter” added to it as well. This isn’t necessarily to give it a unique name but rather so if screen reader users are navigating by tab or button then they will know exactly what the button does.

If you want to do this with aria-label instead that’s fine. I personally try to use sr-only text whenever possible because if people are using translation services on the page then often the text in aria-label will not get translated.

[Sboonny]

This PR address the links component, so all should be good now https://github.com/freeCodeCamp/chapter/pull/2067