Focus outline clean up and only show on focus:visible

[alex-page]

The focus outline is showing up incorrectly across product pages. We should address this and ensure that incorrect usage is seen as a failure in polaris-coverage.

• Fix Admin issues in screenshots below
  • Fix changing focus outlines on RTE
  • Fix "Select products" focus outline showing on open
  • Fix "Sales channel" popup activator focus ring showing on open
• Move https://github.com/Shopify/web/pull/83179 into polaris-stylelint to encourage teams to fix failures
• Reduce the focus ring mixin to render only two lines of css
• Share wins in "Quality wins" slack channel

Screen.Recording.2023-04-25.at.9.33.46.AM.mov

[sophschneider]

The first screenshot of the ProductResourcePicker is focusing on open because its an overridden Polaris ListBox, which usually has its first item focused with a blue background but is being overriden to be a focus ring instead. So its not a focus-visible issue and I think the best fix would be to refactor it to be an ActionList.

cc: @ouellettejordan @alex-page

[alex-page]

@sophschneider feel free to get draft PR's up and make assumptions. It is going to be much easier to tophat a change then talk through it here. I trust you if you want to refactor that UI.

[sam-b-rose]

@sophschneider is this currently still in progress? Do you thing we should decide to either close it out and revisit later or move to the backlog?

[sophschneider]

@samrose3 hmm yeah I think we should revisit it late/ move to the backlog. I think it would be cool if we did something similar to to aarons shadow bevel component for this

[sam-b-rose]

Sounds good, thanks Sophie!

[sophschneider]

I have a related prototype here for creating a focus ring mixin from a while ago #9467. The PR description has my prototype thoughts!

For the same reasoning in the PR description, I think the ShadowBevel pattern is the way to go

[sam-b-rose]

This is great context!

I think the ShadowBevel pattern is the way to go

This wouldn't be a breaking change, correct? Just a feature add. Seems like we could address this after v12?

[github-actions]

Hi! We noticed there hasn’t been activity on this issue in a while. After 30 days, it will close automatically.

If it’s still relevant, or you have updates, comment and let us know. And don’t worry, you can always re-open later if needed.

[github-actions]

Hi! We noticed there hasn’t been activity on this issue in a while. After 30 days, it will close automatically.

If it’s still relevant, or you have updates, comment and let us know. And don’t worry, you can always re-open later if needed.

[alex-page]

😭