Presets Panel: Clear All button is not keyboard-accessible.

[derekjackson-das]

Issue Description

The "Clear all" button is not keyboard accessible and does not have an interactive element associated with it. Related to issue #5388

WCAG Criteria

2.1.1 Keyboard - A

Screenshot or Screen Recording

Relevant Code

<label for="file-upload" class="mr-1 flex h-[32px] cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-red-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-red-700" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-:r66:" data-state="closed">
  <svg width="24" height="24" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="mr-1 flex w-[22px] items-center">
    <path d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0M9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1M6.854 7.146 8 8.293l1.146-1.147a.5.5 0 1 1 .708.708L8.707 9l1.147 1.146a.5.5 0 0 1-.708.708L8 9.707l-1.146 1.147a.5.5 0 0 1-.708-.708L7.293 9 6.146 7.854a.5.5 0 1 1 .708-.708"></path>
  </svg>
  Clear all
</label>

Notes

Ideally, the element could be changed from a <label> to a <button> since there is no <input> element to associate the label's @for attribute, this attribute can then be removed, and an @aria-label attribute can be added to give it an accessible name. With this method, the JavaScript will likely need to be updated to associate the click event with this new element and not the <label>—keyboard support will be provided by the browser.

<button class="mr-1 flex h-[32px] cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-red-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-red-700"
type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-:rbb:"
data-state="closed" aria-label="Clear All Presets">
  <svg width="24" height="24" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
  class="mr-1 flex w-[22px] items-center" aria-hidden="true">
    <path d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0M9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1M6.854 7.146 8 8.293l1.146-1.147a.5.5 0 1 1 .708.708L8.707 9l1.147 1.146a.5.5 0 0 1-.708.708L8 9.707l-1.146 1.147a.5.5 0 0 1-.708-.708L7.293 9 6.146 7.854a.5.5 0 1 1 .708-.708">
    </path>
  </svg>
  <span aria-hidden="true">
    Clear all
  </span>
</button>

With these updates it should provide keyboard focus and screen reader access with the correct names and roles:
https://share.zight.com/xQukj6mo - NOTE: the interactivity has not been added to the button in the video, so while the button can be identified and focused the keyboard support is not available until the javascript has been updated.

Alternatively, attributes can be added to the <label>: a @role attribute to identify it as a button, an @aria-label to give it an accessible name, and a @tabindex to put it in the page's focus order. In this case, keyboard support will need to be added so the "Clear All" event is fired when the Enter key or Spacebar is pressed when it has focus.

In either case use aria-hidden="true" on the SVG image and interior text to ensure unnecessary information is not announced or repeated.

The "Clear all" button here is a bit different than the "Import" button. The Import uses the <label> and <input> elements but the <input> element is not part of the "Clear all" so the fixes will be a little different. There is a separate issue for the "Import" button, #5388.

This is an issue identified by Accessibility issues for screenreader users #5187