mattermost-community/focalboard

Bug: Accessibility > Ensure buttons have discernible text

Ouverte

#2 191 ouverte le 27 janv. 2022

 (3 commentaires) (0 réaction) (0 personne assignée)TypeScript (2 542 forks)user submission
BugHelp Wanted

Métriques du dépôt

Stars
 (26 187 étoiles)
Métriques de merge PR
 (Aucune PR mergée en 30 j)

Description

Ensure that each button element and elements with role="button" have one of the following characteristics (more info):

  • Inner text that is discernible to screen reader users.
  • Non-empty aria-label attribute.
  • aria-labelledby pointing to element with text which is discernible to screen reader users.
  • role="presentation" or role="none" (ARIA 1.1) and is not in tab order (tabindex="-1")

List of buttons:

  1. Sidebar 1

    • Element location: .\' > .IconButton.Button[type="button"]
    • Element source: <button type="button" class="Button IconButton"><svg xmlns="http://www.w3.org/2000/svg" class="DisclosureTriangleIcon Icon" viewBox="0 0 100 100"><polygon points="37,35 37,65 63,50"></polygon></svg></button>
  2. Sidebar 2

    • Element location: .\' > .MenuWrapper[role="button"][aria-label="menuwrapper"] > .IconButton.Button[type="button"]
    • Element source: <button type="button" class="Button IconButton"><i class="CompassIcon icon-dots-horizontal OptionsIcon"></i></button>
  3. Header 1

    • Element location: .MenuWrapper[role="button"][aria-label="menuwrapper"]:nth-child(2) > .IconButton.Button[type="button"]
    • Element source: <button type="button" class="Button IconButton"><i class="CompassIcon icon-chevron-down DropdownIcon"></i></button>
  4. Header 2

    • Element location: .ModalWrapper:nth-child(9) > .MenuWrapper[role="button"][aria-label="menuwrapper"] > .IconButton.Button[type="button"]
    • Element source: <button type="button" class="Button IconButton"><i class="CompassIcon icon-dots-horizontal OptionsIcon"></i></button>
  5. Board view 1

    • Element location: .KanbanColumnHeader.octo-board-header-cell[draggable="true"]:nth-child(1) > .MenuWrapper[role="button"][aria-label="menuwrapper"] > .IconButton.Button[type="button"]
    • Element source: <button type="button" class="Button IconButton"><i class="CompassIcon icon-dots-horizontal OptionsIcon"></i></button>
  6. Board view 2

    • Element location: .KanbanColumnHeader.octo-board-header-cell[draggable="true"]:nth-child(1) > .IconButton.Button[type="button"]
    • Element source: <button type="button" class="Button IconButton"><i class="CompassIcon icon-plus AddIcon"></i></button>
  7. Card view

    • Element location: .MenuWrapper[aria-label="menuwrapper"][role="button"] > .IconButton--large.IconButton.Button
    • Element source: <button type="button" class="Button IconButton IconButton--large"><i class="CompassIcon icon-dots-horizontal OptionsIcon"></i></button>

Guide contributeur