[IndexFilters] [Tab] - Fix pressed/active states on index table views

zakwarsame commented 2 months ago

WHY are these changes introduced?

Fixes https://github.com/Shopify/web/issues/139587

Tabs were getting stuck in a focus state after being clicked, leading to confusing visual feedback. When clicking a new tab/view, the pressed state was incorrectly applied to the current tab instead of the clicked tab.

This change:

Applies the pressed state to the clicked tab by making active/focus colors the same
Prevents tabs from getting stuck in a focus state after mouse clicks by using focus-visible on Tab-active
Preserves hover styles and keyboard focus styles for accessibility

See video of issue

https://github.com/user-attachments/assets/8f5fdca7-93f0-4522-8c6b-9ac679fdd5bc

WHAT is this pull request doing?

How to 🎩

Sandbox with snapshot: https://codesandbox.io/p/sandbox/priceless-bush-ym9x9t

Click on a tab that's not the current active one
The active one does not produce visual feedback

🎩 checklist

[x] Tested a snapshot
[ ] Tested on mobile
[ ] Tested on multiple browsers
[x] Tested for accessibility
[ ] Updated the component's README.md with documentation changes
[ ] Tophatted documentation changes in the style guide

zakwarsame commented 2 months ago

/snapit

github-actions[bot] commented 2 months ago

🫰✨ Thanks @zakwarsame! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@shopify/polaris-migrator": "0.0.0-snapshot-20240918203244",
"@shopify/polaris": "0.0.0-snapshot-20240918203244",
"@shopify/polaris-tokens": "0.0.0-snapshot-20240918203244",
"@shopify/stylelint-polaris": "0.0.0-snapshot-20240918203244"

Shopify / polaris