Files
headlessui/packages/@headlessui-vue
Robin Malfait fd17c26490 Ensure hidden TabPanel components are hidden from the accessibility tree (#2708)
* explicitly add the `aria-hidden="true"` attribute

The `Hidden` component only adds the `aria-hidden` by default if the
`Focusable` feature is passed. In our case we don't want it to be
focusable so therefore we didn't pass this feature flag.

Because we didn't pass the `Focusable` feature, the `display: hidden`
was used which makes it completely unfocusable to the keyboard of the
user which is what we want.

However, the VoiceOver cursor _can_ get into those elements. Adding the
`aria-hidden` manually to these tabs solves the issue.

* update changelog
2023-08-28 17:49:26 +02:00
..
2022-01-31 00:10:06 +01:00
2022-01-31 12:29:27 +01:00
2023-08-17 10:59:05 -04:00

@headlessui/vue

A set of completely unstyled, fully accessible UI components for Vue 3, designed to integrate beautifully with Tailwind CSS.

Total Downloads Latest Release License

Installation

Please note that this library only supports Vue 3.

npm install @headlessui/vue

Documentation

For full documentation, visit headlessui.dev.

Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discuss Headless UI on GitHub

For casual chit-chat with others using the library:

Join the Tailwind CSS Discord Server