Umbraco.CMS.Backoffice icon indicating copy to clipboard operation
Umbraco.CMS.Backoffice copied to clipboard

[BUG]: A11y - Content tree caret buttons has no accessible name/role/value

Open liamlaverty opened this issue 10 months ago • 0 comments

Describe the bug Caret buttons in the left hand menu have no guidance for accessibility users. This fails WCAG 2.0 & 2.1 rule 4.1.2 - name, role, value

To Reproduce Steps to reproduce the behavior:

  1. Open the typescript app
  2. right click the caret next to the recycle bin
  3. inspect element
  4. see the HTML content excludes an aria-label:
<button id="caret-button">
              <uui-symbol-expand></uui-symbol-expand>
            </button>

Expected behavior

Carets should be updated to include an aria-label which describes the button's action, for example:

<button id="caret-button" aria-label="Reveal child content nodes">
              <uui-symbol-expand></uui-symbol-expand>
            </button>

Screenshots Screenshot shows where to find a caret in the vite app:

Screenshot 2024-04-19 at 16 05 54

Desktop (please complete the following information):

  • OS: macOS Sonoma 14.2.1 (23C71)
  • Browser MS Edge
  • Version 122.0

Additional context Add any other context about the problem here.

liamlaverty avatar Apr 19 '24 15:04 liamlaverty