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

packages/@headlessui-react/CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Don't call `<Dialog>`'s `onClose` twice on mobile devices ([#2690](https://github.com/tailwindlabs/headlessui/pull/2690))
 - Lazily resolve default containers in `<Dialog>` ([#2697](https://github.com/tailwindlabs/headlessui/pull/2697))
+- Ensure hidden `Tab.Panel` components are hidden from the accessibility tree ([#2708](https://github.com/tailwindlabs/headlessui/pull/2708))
 
 ## [1.7.17] - 2023-08-17
 

packages/@headlessui-react/src/components/tabs/tabs.tsx

@@ -589,7 +589,7 @@ function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
   }
 
   if (!selected && (theirProps.unmount ?? true) && !(theirProps.static ?? false)) {
-    return <Hidden as="span" {...ourProps} />
+    return <Hidden as="span" aria-hidden="true" {...ourProps} />
   }
 
   return render({

packages/@headlessui-react/src/internal/hidden.tsx

@@ -24,7 +24,10 @@ function VisuallyHidden<TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDE
   let { features = Features.None, ...theirProps } = props
   let ourProps = {
     ref,
-    'aria-hidden': (features & Features.Focusable) === Features.Focusable ? true : undefined,
+    'aria-hidden':
+      (features & Features.Focusable) === Features.Focusable
+        ? true
+        : theirProps['aria-hidden'] ?? undefined,
     style: {
       position: 'fixed',
       top: 1,

packages/@headlessui-vue/CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Don't call `<Dialog>`'s `onClose` twice on mobile devices ([#2690](https://github.com/tailwindlabs/headlessui/pull/2690))
 - Fix Portal SSR hydration mismatches ([#2700](https://github.com/tailwindlabs/headlessui/pull/2700))
+- Ensure hidden `TabPanel` components are hidden from the accessibility tree ([#2708](https://github.com/tailwindlabs/headlessui/pull/2708))
 
 ## [1.7.16] - 2023-08-17
 

packages/@headlessui-vue/src/components/tabs/tabs.ts

@@ -528,7 +528,7 @@ export let TabPanel = defineComponent({
       }
 
       if (!selected.value && props.unmount && !props.static) {
-        return h(Hidden, { as: 'span', ...ourProps })
+        return h(Hidden, { as: 'span', 'aria-hidden': true, ...ourProps })
       }
 
       return render({

packages/@headlessui-vue/src/internal/hidden.ts

@@ -22,7 +22,11 @@ export let Hidden = defineComponent({
     return () => {
       let { features, ...theirProps } = props
       let ourProps = {
-        'aria-hidden': (features & Features.Focusable) === Features.Focusable ? true : undefined,
+        'aria-hidden':
+          (features & Features.Focusable) === Features.Focusable
+            ? true
+            : // @ts-ignore
+              theirProps['aria-hidden'] ?? undefined,
         style: {
           position: 'fixed',
           top: 1,