Presets Panel: Nested Interactive Elements

[derekjackson-das]

Issue Description

Each preset is has the role of "option" but also contain more interactive items nested in the option to perform actions like delete or edit. This is not an expected pattern for the role, and many non-visual and low-vision users will not anticipate the nested actions in an "option" object.

• Presets Panel: Incorrect "option" Role. #5450
• Presets Panel: Keyboard Access Not Provided for Icon Links  #5451
• Presets Panel: Low Contrast on Icon Buttons  #5452
• Presets Panel: Icon Buttons Missing Accessible Name  #5453

WCAG Criteria

1.3.1 Info and Relationships - A

Notes

Separate the different functions of the task into their own interactive elements. The "option" role does not need to be used here because it is typically understood to be part of a select HTML element or a widget with a listbox role, which is not the case for the preset choices.

In addition, the option element should only contain text, so including interactive elements becomes somewhat of an anti-pattern.

One alternative is to have each preset grouped but put the actions into their own interactive elements, e.g., buttons. A very simple example of an alternative UI can be seen here: CodePen Demo.

More details about the option role: MDN Option Role.

Screenshot or Screen Recording

Relevant Code

<div type="button">
  <div
    role="option"
    aria-selected="false"
    aria-label="New Preset:"
    data-testid="preset-item-[object Object]"
    class="group m-1.5 flex cursor-pointer gap-2 rounded px-5 py-2.5 !pr-3 text-sm !opacity-100 hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600 md:min-w-[240px]"
    tabindex="0"  >
    ...
  </div>
</div>