mattermost-community/focalboard

Bug: Accessibility > Ensure buttons have discernible text

Open

#2,191 创建于 2022年1月27日

在 GitHub 查看
 (3 评论) (0 反应) (0 负责人)TypeScript (26,187 star) (2,542 fork)user submission
BugHelp Wanted

描述

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>

贡献者指南

技术栈
typescriptreacthtmlcss
领域
frontendaccessibility
议题类型
accessibility
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
2
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
under 1 hour
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
stale
清晰度议题是否清楚说明期望改动、验收标准和下一步。
clear
前置要求
Basic HTML/CSS knowledgeUnderstanding of ARIA attributesFamiliarity with React components
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
80
研究方向
The issue lists specific buttons in the UI that lack discernible text. Review the components referenced (e.g., IconButton, MenuWrapper) in the codebase, likely under webapp/src/components. Add appropriate aria label attributes to each button element as described. No linked PRs or assignees exist, so this is available for a newcomer. Check comments for any additional guidance from maintainers.