Presets panel: Action buttons not keyboard-accessible

[kangabell]

These buttons ("Clear all", "Import") cannot be tabbed to using a keyboard.

WCAG Criteria

2.1.1 Keyboard - A

Testing Method

Manual - Chrome/MacOS

Screenshot

Code Snippet

<label for="file-upload-1" class="mr-1 flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-normal transition-colors hover:bg-gray-100 hover:text-green-600 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-green-500 text-gray-600">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-up mr-1 flex w-[22px] items-center stroke-1">
    <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
    <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
    <path d="M12 12v6"></path>
    <path d="m15 15-3-3-3 3"></path>
  </svg>
  <span class="flex text-xs ">Import</span>
  <input id="file-upload-1" type="file" class="hidden" accept=".json" value="">
</label>

Action

Remove the class of .hidden from the input and move the input outside of the label element so that the input and its label are siblings. The SVG icon can remain inside of the label element but should also have aria-hidden="true" added.

Notes

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

[derekjackson-das]

With this when you remove the .hidden class the input element will become visible and overlap with the svg.

Some further updates to hide the input but keep the UI accessible:

1. Hide the input visually and reduce the size of the element so that is not a visible element but programmatically accessible. Something like this which hides it visually but keeps it located within the label's box and interactive.

input#file-upload-1 {
    opacity: 0;
    position: relative;
    left:-5em;
    width: 1px;
    height: 1px;
}

2. Add aria-label to the <input> element so it has an accessible name.

    <input id="file-upload-1" type="file" aria-label="Import Presets" accept=".json" value="">

3. Add focus to the label with :focus-within so that when the <input> element is active the <label> area is focused.

label[for="file-upload-1"]:focus-within {
    outline: solid black 2px;
}

4. Hide the the svg and text with aria-hidden="true"

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-up mr-1 flex w-[22px] items-center stroke-1">
        <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
        <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
        <path d="M12 12v6"></path>
        <path d="m15 15-3-3-3 3"></path>
    </svg><span aria-hidden="true" class="flex text-xs ">Import</span>

This goal is to make the input element useable for screen readers and other Assistive Technology with the correct name and role while hiding it visually but also providing focus to keyboard users.

With these updates it should provide keyboard focus and screen reader access with the correct names and roles:
https://share.zight.com/xQukj6mo

The "Import" button here is a bit different than the "Clear all". 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. I made a new issue for the "Clear all" to suggest a fix, #5441.