Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
globally remove link tap highlighting (#11872)
### WHY are these changes introduced? When tapping links with an iOS device, it highlights the element with a grey background. This is undesirable and we should rely on locally defined styles for tappable elements. [Slack thread](https://shopify.slack.com/archives/C052FLLS8V6/p1711024818880199) Example: https://share.descript.com/view/ognFPIjLAzV ### WHAT is this pull request doing? The proposed solution solution is to set [-webkit-tap-highlight-color](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color) to `transparent` globally. This will disable the appearance of tap highlighting. ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) [Spin](https://admin.web.webkit-tap-highlight-color.matt-kubej.us.spin.dev/store/shop1) Open the spin instance above via a Simulated iOS device or a real device via BrowserStack, then navigate into the settings of Admin, such as Markets, and validate the grey tap highlighting as seen in the descript video is no longer present. ### 🎩 checklist - [x] Tested a [snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases) - [x] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [x] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [x] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [x] Updated the component's `README.md` with documentation changes - [x] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
- Loading branch information