Bug: Hiding elements correctly

[chris-pearce]

Prerequisites

• I have searched the repository’s issues and Kinde community to ensure my issue isn’t a duplicate
• I have read the contributing guidelines
• I agree to the terms within the code of conduct

Describe the issue

I know we can't prevent customers from doing this. However, not doing it in our starter kits is extremely important, and eventually, mentioning it in the docs is using display: none; appropriately to hide elements. It's crucial as we want to maintain our commitment to accessibility.

The issue is that display: none; completely removes the element from the Accessibility Tree meaning non-visual users (users who rely on an auditory UI via assistive tech like screen readers) will never know about the element. In some cases, display: none; is what you want as the element should be hidden for ALL users, as is the case for hiding the Fallback action component here. Where it's not correct in this starter kit is for hiding the Auth button component's text via:

[data-kinde-layout-auth-buttons] [data-kinde-button-text] {
  display: none;
}

See here.

This breaks accessibility as the button now doesn't have a text label. Instead, it only has a purely visual SVG icon (which under the hood is removed from the Accessibility Tree via aria-hidden="true" because it's purely visual). This means there is no way of understanding what the button represents, thus breaking the UI for assistive tech users.

The correct way to hide elements for only visual users is by using a specific set of CSS rules, which the Kinde widget uses via a "hide-visually" utility class:

.kinde-util-hide-visually:not(:focus, :focus-visible, :focus-within, :active) {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

Learn more.

Funny enough, this class is used in the auth buttons under a particular display configuration, i.e., when the social auth buttons become logo-only (no visual text label).

Given all that, you can hide the auth buttons text label in an accessible manner by utilising the correct styles:

[data-kinde-layout-auth-buttons] [data-kinde-button-text] {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

Starter kit URL

https://github.com/kinde-starter-kits/custom-ui-orbit

Operating system(s)

macOS

Operating system version(s)

15.3.1

Further environment details

No response

Reproducible test case URL

No response

Additional information

No response