search

iTwin / iTwinUI

A design system for building beautiful and well-working web interfaces.
https://itwin.github.io/iTwinUI/
MIT License
105 stars 38 forks source link

Skip to content button is not accessible in Safari #512

Closed FlyersPh9 closed 2 years ago

FlyersPh9 commented 2 years ago

Safari doesn't support :focus-visible and I think that is making the element un-focusable.

mayank99 commented 2 years ago

Can you try replacing this line https://github.com/iTwin/iTwinUI/blob/e40f387d94781fb0dcb6ebce0bbfea74c4404931/src/skip-to-content/skip-to-content.scss#L7 with this?

&:focus {
  outline: 2px solid var(--iui-color-foreground-primary);
  outline-offset: 2px;
}

Even if that works, I think we might want to investigate why this fallback is not working. https://github.com/iTwin/iTwinUI/blob/e40f387d94781fb0dcb6ebce0bbfea74c4404931/src/style/mixins.scss#L28-L32

FlyersPh9 commented 2 years ago

I followed the steps on this page to enable tabbing in Safari, no change needed to fix this.

I did however discover that the skip-to-content button is visible if touch scrolling beyond the edge of the screen: Screen Recording 2022-03-28 at 3 40 42 PM