Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Calculate aria-expanded purely based on the open/closed state #2610

Merged
merged 2 commits into from
Jul 24, 2023
Merged

Calculate aria-expanded purely based on the open/closed state #2610

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c6dc7d2
define `aria-expanded` based on open/closed state
RobinMalfait Jul 24, 2023
12a92bc
update changelog
RobinMalfait Jul 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/@headlessui-react/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Ensure the caret is in a consistent position when syncing the `Combobox.Input` value ([#2568](https://github.com/tailwindlabs/headlessui/pull/2568))
- Improve "outside click" behaviour in combination with 3rd party libraries ([#2572](https://github.com/tailwindlabs/headlessui/pull/2572))
- Ensure IME works on Android devices ([#2580](https://github.com/tailwindlabs/headlessui/pull/2580))
- Calculate `aria-expanded` purely based on the open/closed state ([#2610](https://github.com/tailwindlabs/headlessui/pull/2610))

## [1.7.15] - 2023-06-01

Expand Down
4 changes: 2 additions & 2 deletions packages/@headlessui-react/src/components/combobox/combobox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1020,7 +1020,7 @@ function InputFn<
role: 'combobox',
type,
'aria-controls': data.optionsRef.current?.id,
'aria-expanded': data.disabled ? undefined : data.comboboxState === ComboboxState.Open,
'aria-expanded': data.comboboxState === ComboboxState.Open,
'aria-activedescendant':
data.activeOptionIndex === null ? undefined : data.options[data.activeOptionIndex]?.id,
'aria-labelledby': labelledby,
Expand Down Expand Up @@ -1152,7 +1152,7 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
tabIndex: -1,
'aria-haspopup': 'listbox',
'aria-controls': data.optionsRef.current?.id,
'aria-expanded': data.disabled ? undefined : data.comboboxState === ComboboxState.Open,
'aria-expanded': data.comboboxState === ComboboxState.Open,
'aria-labelledby': labelledby,
disabled: data.disabled,
onClick: handleClick,
Expand Down
4 changes: 1 addition & 3 deletions packages/@headlessui-react/src/components/disclosure/disclosure.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -340,9 +340,7 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
ref: buttonRef,
id,
type,
'aria-expanded': props.disabled
? undefined
: state.disclosureState === DisclosureStates.Open,
'aria-expanded': state.disclosureState === DisclosureStates.Open,
'aria-controls': state.linkedPanel ? state.panelId : undefined,
onKeyDown: handleKeyDown,
onKeyUp: handleKeyUp,
Expand Down
2 changes: 1 addition & 1 deletion packages/@headlessui-react/src/components/listbox/listbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -680,7 +680,7 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
type: useResolveButtonType(props, data.buttonRef),
'aria-haspopup': 'listbox',
'aria-controls': data.optionsRef.current?.id,
'aria-expanded': data.disabled ? undefined : data.listboxState === ListboxStates.Open,
'aria-expanded': data.listboxState === ListboxStates.Open,
'aria-labelledby': labelledby,
disabled: data.disabled,
onKeyDown: handleKeyDown,
Expand Down
2 changes: 1 addition & 1 deletion packages/@headlessui-react/src/components/menu/menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -400,7 +400,7 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
type: useResolveButtonType(props, state.buttonRef),
'aria-haspopup': 'menu',
'aria-controls': state.itemsRef.current?.id,
'aria-expanded': props.disabled ? undefined : state.menuState === MenuStates.Open,
'aria-expanded': state.menuState === MenuStates.Open,
onKeyDown: handleKeyDown,
onKeyUp: handleKeyUp,
onClick: handleClick,
Expand Down
2 changes: 1 addition & 1 deletion packages/@headlessui-react/src/components/popover/popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -591,7 +591,7 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
ref: buttonRef,
id: state.buttonId,
type,
'aria-expanded': props.disabled ? undefined : state.popoverState === PopoverStates.Open,
'aria-expanded': state.popoverState === PopoverStates.Open,
'aria-controls': state.panel ? state.panelId : undefined,
onKeyDown: handleKeyDown,
onKeyUp: handleKeyUp,
Expand Down
72 changes: 12 additions & 60 deletions packages/@headlessui-react/src/test-utils/accessibility-assertions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,20 +62,12 @@ export function assertMenuButton(

case MenuState.InvisibleHidden:
expect(button).toHaveAttribute('aria-controls')
if (button.hasAttribute('disabled')) {
expect(button).not.toHaveAttribute('aria-expanded')
} else {
expect(button).toHaveAttribute('aria-expanded', 'false')
}
expect(button).toHaveAttribute('aria-expanded', 'false')
break

case MenuState.InvisibleUnmounted:
expect(button).not.toHaveAttribute('aria-controls')
if (button.hasAttribute('disabled')) {
expect(button).not.toHaveAttribute('aria-expanded')
} else {
expect(button).toHaveAttribute('aria-expanded', 'false')
}
expect(button).toHaveAttribute('aria-expanded', 'false')
break

default:
Expand Down Expand Up @@ -352,20 +344,12 @@ export function assertComboboxInput(

case ComboboxState.InvisibleHidden:
expect(input).toHaveAttribute('aria-controls')
if (input.hasAttribute('disabled')) {
expect(input).not.toHaveAttribute('aria-expanded')
} else {
expect(input).toHaveAttribute('aria-expanded', 'false')
}
expect(input).toHaveAttribute('aria-expanded', 'false')
break

case ComboboxState.InvisibleUnmounted:
expect(input).not.toHaveAttribute('aria-controls')
if (input.hasAttribute('disabled')) {
expect(input).not.toHaveAttribute('aria-expanded')
} else {
expect(input).toHaveAttribute('aria-expanded', 'false')
}
expect(input).toHaveAttribute('aria-expanded', 'false')
break

default:
Expand Down Expand Up @@ -458,20 +442,12 @@ export function assertComboboxButton(

case ComboboxState.InvisibleHidden:
expect(button).toHaveAttribute('aria-controls')
if (button.hasAttribute('disabled')) {
expect(button).not.toHaveAttribute('aria-expanded')
} else {
expect(button).toHaveAttribute('aria-expanded', 'false')
}
expect(button).toHaveAttribute('aria-expanded', 'false')
break

case ComboboxState.InvisibleUnmounted:
expect(button).not.toHaveAttribute('aria-controls')
if (button.hasAttribute('disabled')) {
expect(button).not.toHaveAttribute('aria-expanded')
} else {
expect(button).toHaveAttribute('aria-expanded', 'false')
}
expect(button).toHaveAttribute('aria-expanded', 'false')
break

default:
Expand Down Expand Up @@ -798,20 +774,12 @@ export function assertListboxButton(

case ListboxState.InvisibleHidden:
expect(button).toHaveAttribute('aria-controls')
if (button.hasAttribute('disabled')) {
expect(button).not.toHaveAttribute('aria-expanded')
} else {
expect(button).toHaveAttribute('aria-expanded', 'false')
}
expect(button).toHaveAttribute('aria-expanded', 'false')
break

case ListboxState.InvisibleUnmounted:
expect(button).not.toHaveAttribute('aria-controls')
if (button.hasAttribute('disabled')) {
expect(button).not.toHaveAttribute('aria-expanded')
} else {
expect(button).toHaveAttribute('aria-expanded', 'false')
}
expect(button).toHaveAttribute('aria-expanded', 'false')
break

default:
Expand Down Expand Up @@ -1100,20 +1068,12 @@ export function assertDisclosureButton(

case DisclosureState.InvisibleHidden:
expect(button).toHaveAttribute('aria-controls')
if (button.hasAttribute('disabled')) {
expect(button).not.toHaveAttribute('aria-expanded')
} else {
expect(button).toHaveAttribute('aria-expanded', 'false')
}
expect(button).toHaveAttribute('aria-expanded', 'false')
break

case DisclosureState.InvisibleUnmounted:
expect(button).not.toHaveAttribute('aria-controls')
if (button.hasAttribute('disabled')) {
expect(button).not.toHaveAttribute('aria-expanded')
} else {
expect(button).toHaveAttribute('aria-expanded', 'false')
}
expect(button).toHaveAttribute('aria-expanded', 'false')
break

default:
Expand Down Expand Up @@ -1232,20 +1192,12 @@ export function assertPopoverButton(

case PopoverState.InvisibleHidden:
expect(button).toHaveAttribute('aria-controls')
if (button.hasAttribute('disabled')) {
expect(button).not.toHaveAttribute('aria-expanded')
} else {
expect(button).toHaveAttribute('aria-expanded', 'false')
}
expect(button).toHaveAttribute('aria-expanded', 'false')
break

case PopoverState.InvisibleUnmounted:
expect(button).not.toHaveAttribute('aria-controls')
if (button.hasAttribute('disabled')) {
expect(button).not.toHaveAttribute('aria-expanded')
} else {
expect(button).toHaveAttribute('aria-expanded', 'false')
}
expect(button).toHaveAttribute('aria-expanded', 'false')
break

default:
Expand Down
1 change: 1 addition & 0 deletions packages/@headlessui-vue/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Improve "outside click" behaviour in combination with 3rd party libraries ([#2572](https://github.com/tailwindlabs/headlessui/pull/2572))
- Improve performance of `Combobox` component ([#2574](https://github.com/tailwindlabs/headlessui/pull/2574))
- Ensure IME works on Android devices ([#2580](https://github.com/tailwindlabs/headlessui/pull/2580))
- Calculate `aria-expanded` purely based on the open/closed state ([#2610](https://github.com/tailwindlabs/headlessui/pull/2610))

## [1.7.14] - 2023-06-01

Expand Down
8 changes: 2 additions & 6 deletions packages/@headlessui-vue/src/components/combobox/combobox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -662,9 +662,7 @@ export let ComboboxButton = defineComponent({
tabindex: '-1',
'aria-haspopup': 'listbox',
'aria-controls': dom(api.optionsRef)?.id,
'aria-expanded': api.disabled.value
? undefined
: api.comboboxState.value === ComboboxStates.Open,
'aria-expanded': api.comboboxState.value === ComboboxStates.Open,
'aria-labelledby': api.labelRef.value ? [dom(api.labelRef)?.id, id].join(' ') : undefined,
disabled: api.disabled.value === true ? true : undefined,
onKeydown: handleKeydown,
Expand Down Expand Up @@ -980,9 +978,7 @@ export let ComboboxInput = defineComponent({
let { id, displayValue, onChange: _onChange, ...theirProps } = props
let ourProps = {
'aria-controls': api.optionsRef.value?.id,
'aria-expanded': api.disabled.value
? undefined
: api.comboboxState.value === ComboboxStates.Open,
'aria-expanded': api.comboboxState.value === ComboboxStates.Open,
'aria-activedescendant':
api.activeOptionIndex.value === null
? undefined
Expand Down
4 changes: 1 addition & 3 deletions packages/@headlessui-vue/src/components/disclosure/disclosure.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,9 +229,7 @@ export let DisclosureButton = defineComponent({
id,
ref: internalButtonRef,
type: type.value,
'aria-expanded': props.disabled
? undefined
: api.disclosureState.value === DisclosureStates.Open,
'aria-expanded': api.disclosureState.value === DisclosureStates.Open,
'aria-controls': dom(api.panel) ? api.panelId.value : undefined,
disabled: props.disabled ? true : undefined,
onClick: handleClick,
Expand Down
4 changes: 1 addition & 3 deletions packages/@headlessui-vue/src/components/listbox/listbox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -532,9 +532,7 @@ export let ListboxButton = defineComponent({
type: type.value,
'aria-haspopup': 'listbox',
'aria-controls': dom(api.optionsRef)?.id,
'aria-expanded': api.disabled.value
? undefined
: api.listboxState.value === ListboxStates.Open,
'aria-expanded': api.listboxState.value === ListboxStates.Open,
'aria-labelledby': api.labelRef.value ? [dom(api.labelRef)?.id, id].join(' ') : undefined,
disabled: api.disabled.value === true ? true : undefined,
onKeydown: handleKeyDown,
Expand Down
2 changes: 1 addition & 1 deletion packages/@headlessui-vue/src/components/menu/menu.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -320,7 +320,7 @@ export let MenuButton = defineComponent({
type: type.value,
'aria-haspopup': 'menu',
'aria-controls': dom(api.itemsRef)?.id,
'aria-expanded': props.disabled ? undefined : api.menuState.value === MenuStates.Open,
'aria-expanded': api.menuState.value === MenuStates.Open,
onKeydown: handleKeyDown,
onKeyup: handleKeyUp,
onClick: handleClick,
Expand Down
4 changes: 1 addition & 3 deletions packages/@headlessui-vue/src/components/popover/popover.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -438,9 +438,7 @@ export let PopoverButton = defineComponent({
ref: elementRef,
id,
type: type.value,
'aria-expanded': props.disabled
? undefined
: api.popoverState.value === PopoverStates.Open,
'aria-expanded': api.popoverState.value === PopoverStates.Open,
'aria-controls': dom(api.panel) ? api.panelId.value : undefined,
disabled: props.disabled ? true : undefined,
onKeydown: handleKeyDown,
Expand Down