[PWA Builder]: Keyboard Focus Not Visible on Action Items Expandable Button.

[Anshi0420]

What happened?

When navigating using the keyboard, the focus indicator is not visible on the Action items expandable button.

How do we reproduce the behavior?

Repro Steps:

1. Open the above URL.
2. Navigate to the Action Items expandible button with keyboard.
3. Observe the keyboard focus.

What do you expect to happen?

The Action items expandable button should clearly indicate keyboard focus when navigated to using the keyboard, following accessibility standards.

What environment were you using?

Test Environment: OS Build: Windows 11 Enterprise Insider Preview 24H2 (26120.461) Edge Browser: Version 123.0.2400.1 (Official build) dev (64-bit) URL: https://www.pwabuilder.com/reportcard?site=https://webboard.app

Additional context

Note:

1. Keyboard focus is not visible on the View details button present on this page.
2. Keyboard focus is not visible on the close button inside the Share dialog.

User Impact: Users who rely on keyboard navigation, such as those with motor disabilities or who prefer not to use a mouse, may find it difficult to determine which element is currently focused on the screen.

WCAG Reference: https://www.w3.org/WAI/WCAG22/Understanding/focus-visible

Attachments:

https://github.com/pwa-builder/PWABuilder/assets/117908911/171048d0-cfb0-4cdb-8466-e3e33d047f9d

https://github.com/pwa-builder/PWABuilder/assets/117908911/36307e41-dfb4-4e27-98b3-ca2cdf8660e6

[microsoft-github-policy-service[bot]]

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .