diff --git a/.changeset/pink-comics-go.md b/.changeset/pink-comics-go.md new file mode 100644 index 0000000000..b9d2911774 --- /dev/null +++ b/.changeset/pink-comics-go.md @@ -0,0 +1,5 @@ +--- +'@leafygreen-ui/select': patch +--- + +Fixes `Select` so that when an `aria-label` is added, VO announces both the value and the label when there is a value. Also adds `aria-current` attribute to help screen readers announce the current selection state. diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuSelect/DatePickerMenuSelectMonth.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuSelect/DatePickerMenuSelectMonth.tsx index 4732c23b68..2d4b6e77db 100644 --- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuSelect/DatePickerMenuSelectMonth.tsx +++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuSelect/DatePickerMenuSelectMonth.tsx @@ -43,9 +43,7 @@ export const DatePickerMenuSelectMonth = ({ return ( diff --git a/packages/select/src/Select/Select.tsx b/packages/select/src/Select/Select.tsx index 763487205a..5a4d93ba59 100644 --- a/packages/select/src/Select/Select.tsx +++ b/packages/select/src/Select/Select.tsx @@ -530,6 +530,22 @@ export const Select = forwardRef( }), } as const; + /** + * When aria-label is provided, we compose it with the selected value for screen readers. This is the default + * behavior for native select elements. When not doing this, only aria-label was being announced even when a value + * was selected. + */ + const composedAriaLabel = useMemo(() => { + if (!ariaLabel || label || ariaLabelledby) { + return undefined; + } + + const selectedText = + selectedOption !== null ? selectedOption.props.children : placeholder; + + return `${ariaLabel}, ${selectedText}`; + }, [ariaLabel, ariaLabelledby, label, placeholder, selectedOption]); + return (
( onOpen={onOpen} onClose={onClose} aria-labelledby={labelId} - aria-label={!label && !ariaLabelledby ? ariaLabel : undefined} + aria-label={composedAriaLabel} aria-controls={menuId} aria-expanded={open} aria-describedby={descriptionId}