No Focus Visible on File Buttons

[derekjackson-das]

Issue Description
There is no visible focus when the file upload button is the current active element. This causes an accessibility issue for users who rely on visible focus indicators to navigate the interface.

WCAG Criteria
2.4.7 Focus Visible - AA

Screenshot or Screen Recording
Screen recording

Snippet

<div class="relative h-10 w-10 shrink-0 overflow-hidden rounded-md">
  <button type="button" aria-haspopup="dialog" aria-expanded="false" class="h-full w-full" style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url('/images/66b0d8494326aaada4389d39/7a507c67-86b6-4ba8-92dd-bc04fd7f6b7d__Worst_Construction_Safety.png');"></button>
</div>

Notes

• Overflow is hidden on the container div, which is preventing the focus indicator from being visible when the button is the current active element.
• The file name should also be part of the button element to provide an accessible name.
• The button should not have the aria-haspopup or aria-expanded attribute

[danny-avila]

@berry-13 can you take a look at this whenever you get the chance?