Re-export `VisuallyHidden` in `react-aria-components`

[lixiaoyan]

Provide a general summary of the feature here

Re-export VisuallyHidden in react-aria-components.

🤔 Expected Behavior?

import { VisuallyHidden } from 'react-aria-components';

😯 Current Behavior

import { VisuallyHidden } from 'react-aria';

💁 Possible Solution

export { VisuallyHidden } from 'react-aria';

🔦 Context

.

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Thanks for the issue, can you provide some more context about your usecase and why you need this component? Thank you!

[lixiaoyan]

@snowystinger I'm not sure if this is the appropriate approach. It appears that some exports from react-aria are re-exported in react-aria-components, while others are not.

The real-world issue is that in a project using react-aria-components, if I want to use the VisuallyHidden component, I have to install another package, react-aria.

We may have two options to proceed:

1. Install both react-aria and react-aria-components
   • Pros: We don't need to re-export everything; things remain simple.
   • Cons: There may be two different versions of react-aria installed. (one is a transient dependency of react-aria-components)
2. Re-export (almost) everything from react-aria in react-aria-components
   • Pros: Only one package is needed.
   • Cons: We have to maintain the re-export list. export * may not be suitable for this case.

WDYT?

[snowystinger]

I think that it's common for utilities/components exported by react-aria to also be re-exported by react-aria-components (RAC) and I think this is probably one of those cases. It'd still be helpful to know what you are using it for, as most RAC components already include it. So chances are that you're already installing react-aria and are using hooks from there with it. I'd like to know if that's not the case though and if there's something we haven't covered.

[lixiaoyan]

My use case is creating an icon button by composing components like this:

<Button>
  <Icon />
  <VisuallyHidden>some text</VisuallyHidden>
</Button>

I do not currently use any low-level hooks.

[snowystinger]

Why not accomplish it by using an aria-label? that seems like it would be the right choice

<Button aria-label="some text">
  <Icon />
</Button>

[lixiaoyan]

@snowystinger

1. VisuallyHidden accepts any ReactNode, while the aria-label only accepts a string. (no actual use cases, only for flexible API design)
2. VisuallyHidden performs somewhat better than aria-label. (for example, https://gomakethings.com/revisting-aria-label-versus-a-visually-hidden-class/)

(IIRC, a few years back, the best practice was to avoid using aria-label on a button; not sure when that changed)

[snowystinger]

That was 5 years ago, have you verified that this is still needed? We work very closely with an accessibility expert team, including Aria spec authors and this has never been brought up.

you can also do something like this if you need to accept a ReactNode:

<Button aria-labelledby="label-id">
  <Icon />
  <div id="label-id" style={{display: 'none'}}>some text</div>
</Button>

[lixiaoyan]

@snowystinger Got it. I didn't realize that aria-labelledby might refer to a hidden element. Does this imply that VisuallyHidden should be avoided in most cases?

[snowystinger]

I'm only suggesting that VisuallyHidden isn't always necessary. I still think we can consider exporting it, we do export it from @adobe/react-spectrum as well.

Its primary use, so far, is input so the browser control doesn't appear and it can be styled as anything, yet the control is accessible to screen reader users and drop indicators, again a focusable element.

[stefanprobst]

usecase table columns:

react-spectrum/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx

Lines 38 to 45 in 2ee02a0

	const allColumns: ColumnProps[] = [
	{id: 'favorite', children: <VisuallyHidden>Favorite</VisuallyHidden>, width: 40, minWidth: 40},
	{id: 'common_name', children: 'Name', minWidth: 150, allowsSorting: true},
	{id: 'cycle', children: 'Cycle', defaultWidth: 120, allowsSorting: true},
	{id: 'sunlight', children: 'Sunlight', defaultWidth: 120, allowsSorting: true},
	{id: 'watering', children: 'Watering', defaultWidth: 120, allowsSorting: true},
	{id: 'actions', children: <VisuallyHidden>Actions</VisuallyHidden>, width: 44, minWidth: 44}
	];

[snowystinger]

Thanks, I missed that use in our codebase when I was doing a find. I think those could be replaced in a similar way. I don't know that one is more correct than the other.