Potential conflict between visuallyHiddenStyle and aria-hidden=true

[StyleShit]

🐛 Bug report

Well, I'm not an a11y expert by any means, but I've found out some weird behavior that I wondered whether is intentional or not.

When using a select machine, the getHiddenSelectProps() function returns the visuallyHiddenStyle object, but also a aria-hidden=true prop. So it basically means that this element is gonna he hidden for both regular users and users with assistive technologies, right?

I'm assuming this is the expected behavior in some cases (this hidden select element, for example), but it means that these elements are still visible for things like expect( ... ).toBeVisible(), which is how I found this out (through Ark UI and Storybook testing)

I saw this in multiple places:

zag/packages/machines/select/src/select.connect.ts

Lines 361 to 370 in f6e0790

	return normalize.select({
	name: prop("name"),
	form: prop("form"),
	disabled: disabled,
	multiple: prop("multiple"),
	required: prop("required"),
	"aria-hidden": true,
	id: dom.getHiddenSelectId(scope),
	defaultValue,
	style: visuallyHiddenStyle,

zag/packages/machines/navigation-menu/src/navigation-menu.connect.ts

Lines 222 to 229 in f6e0790

	return normalize.element({
	"aria-hidden": true,
	tabIndex: 0,
	"data-trigger-proxy": "",
	id: itemState.triggerProxyId,
	"data-trigger-id": itemState.triggerId,
	hidden: !itemState.selected,
	style: visuallyHiddenStyle,

---

While some others were "fine" (even though I wasn't sure what's the difference between them and the hidden select case, for example):

zag/packages/machines/switch/src/switch.connect.ts

Lines 101 to 112 in f6e0790

	return normalize.input({
	id: dom.getHiddenInputId(scope),
	type: "checkbox",
	required: prop("required"),
	defaultChecked: checked,
	disabled: disabled,
	"aria-labelledby": dom.getLabelId(scope),
	"aria-invalid": prop("invalid"),
	name: prop("name"),
	form: prop("form"),
	value: prop("value"),
	style: visuallyHiddenStyle,

zag/packages/machines/color-picker/src/color-picker.connect.ts

Lines 596 to 605 in f6e0790

	return normalize.input({
	type: "text",
	disabled,
	name: prop("name"),
	tabIndex: -1,
	readOnly,
	required,
	id: dom.getHiddenInputId(scope),
	style: visuallyHiddenStyle,
	defaultValue: valueAsString,

🧭 Possible Solution

Maybe these specific cases should use display: none instead? Or I'm missing something here?

[segunadebayo]

The reason we don't use display: none is that we need them to participate in form submission/change events, and we need the component to work during autofill events.

[StyleShit]

Ah, makes sense, didn't think about it, thanks!

So maybe I should open an issue to the Testing Library guys instead. I'm assuming there is a standard way for this (clip: rect(0 0 0 0); position: absolute maybe), based on the a11y project?