Presets Panel: Keyboard Access Not Provided for Icon Links

[derekjackson-das]

Issue Description

The icon links that are revealed on hover are not accessible via keyboard or screen readers. This creates a barrier for users who rely on assistive technologies or keyboard navigation.

Related to:

• Presets Panel: Incorrect "option" Role. #5450
• 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

The simplest solution, which is a small change to the UI:

• Remove the hover effect so that the icons are persistent.
• Once the icons are always visible, they can then be reached with the keyboard.

Screenshot or Screen Recording

buttons inaccessible to keyboard Screenshot or Screen Recording

Persistent icons demo - 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">