Presets Panel: Incorrect "option" Role.

[derekjackson-das]

Issue Description

The container for each preset in the Presets dialog is described programmatically as an option, but it does not have the UI that is expected of this role and is not part of a listbox, which is required for this role. This can confuse screen reader users who rely on the role description to understand what an interactive element will do or how to interact with it.

Related to:

• Presets Panel: Keyboard Access Not Provided for Icon Links  #5451
• Presets Panel: Low Contrast on Icon Buttons  #5452
• Presets Panel: Missing Accessible Name from Icon Buttons #5453
• Presets Panel: Nested Interactive Elements #5489

Derived from #5187

WCAG Criteria

1.3.1 Info and Relationships - A

Notes

• Change the role attribute to "button".
• There are also other issues with the preset selections that will be logged:
  1. Icon links are not keyboard accessible.
  2. Icon links do not have accessible names.
  3. Color contrast of icons in the presets options is below 3:1 requirement.

This is the W3C's list of requirements for the option role: https://www.w3.org/TR/wai-aria/#option.

Screenshot or Screen Recording

Relevant Code

<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" data-flip-config="{&quot;translate&quot;:true,&quot;scale&quot;:true,&quot;opacity&quot;:true}" data-flip-id="34632e96-3612-4052-87f7-dabf463a2af5" data-portal-key="portal">