Is your proposal related to a problem?

Yes. The 12h/24h toggle button on the booking page is missing an accessible name or ARIA label. This makes it unusable for screen reader users, as the control is not announced properly and its purpose is unclear. This violates accessibility guidelines and impacts the user experience for people relying on assistive technologies.

Describe the solution you'd like

Add an appropriate aria-label (e.g., aria-label="12-hour or 24-hour time format toggle") to the toggle button so screen readers can accurately convey the control's function to users. Alternatively, consider using a visually hidden label that also improves accessibility without changing the visual layout.

Original Code:

<button
  type="button"
  data-state="off"
  role="radio"
  aria-checked="false"
  data-testid="toggle-group-item-h:mma"
  class="aria-checked:bg-emphasis relative rounded-[4px] px-3 py-1 text-sm leading-tight transition text-default [&amp;[aria-checked='false']]:hover:text-emphasis"
  tabindex="-1"
  data-orientation="horizontal"
  data-radix-collection-item=""
>
  <div class="flex items-center gap-2 justify-center">12 Std</div>
</button>

Improved Code:

<button
  type="button"
  data-state="off"
  role="radio"
  aria-checked="false"
  aria-label="Toggle between 12-hour and 24-hour time formats"
  data-testid="toggle-group-item-h:mma"
  class="aria-checked:bg-emphasis relative rounded-[4px] px-3 py-1 text-sm leading-tight transition text-default [&amp;[aria-checked='false']]:hover:text-emphasis"
  tabindex="-1"
  data-orientation="horizontal"
  data-radix-collection-item=""
>
  <div class="flex items-center gap-2 justify-center">12 Std</div>
</button>

Describe alternatives you've considered

• Using custom JavaScript to add an ARIA label client-side. This is a fragile and unsustainable workaround, especially across updates.

• Ignoring the issue and accepting reduced accessibility — not a viable option for inclusive design or for deployments that must meet WCAG or legal accessibility requirements.

Additional context

This button is a interactive element during booking and should be accessible. Proper labeling ensures that all users, including those using screen readers, can understand and interact with it.

Requirement/Document

https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html