[LG-3993] fix(Select): VO properly announces value and label

.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.

packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuSelect/DatePickerMenuSelectMonth.tsx

@@ -43,9 +43,7 @@ export const DatePickerMenuSelectMonth = ({
   return (
     <Select
       {...selectElementProps}
-      aria-label={`Select month - ${
-        monthOptions[month.getUTCMonth()].long
-      } selected`}
+      aria-label="select month"
       value={month.getUTCMonth().toString()}
       onChange={handleMonthOnChange}
       className={cx(selectTruncateStyles, selectInputWidthStyles)}

packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuSelect/DatePickerMenuSelectYear.tsx

@@ -36,7 +36,7 @@ export const DatePickerMenuSelectYear = ({
   return (
     <Select
       {...selectElementProps}
-      aria-label={`Select year - ${month.getUTCFullYear().toString()} selected`}
+      aria-label="select year"
       value={month.getUTCFullYear().toString()}
       onChange={handleYearOnChange}
       className={cx(selectTruncateStyles, selectInputWidthStyles)}

packages/select/src/Select.stories.tsx

@@ -153,6 +153,7 @@ export const LiveExample: StoryFn<SelectProps> = ({
     )}
     // eslint-disable-next-line no-console
     onChange={v => console.log(v)}
+    aria-label="hello world"
   />
 );
 LiveExample.parameters = {

packages/select/src/Select/Select.spec.tsx

@@ -178,6 +178,51 @@ describe('packages/select', () => {
     });
   });
 
+  test('composes aria-label with selected value for screen readers', () => {
+    const { getInput } = renderSelect({
+      label: undefined,
+      'aria-label': 'Color',
+      defaultValue: Color.Blue,
+    });
+
+    const button = getInput();
+    expect(button).toHaveAttribute('aria-label', 'Color, Blue');
+  });
+
+  test('composes aria-label with placeholder when no value is selected', () => {
+    const { getInput } = renderSelect({
+      label: undefined,
+      'aria-label': 'Color',
+      placeholder: 'Choose a color',
+    });
+
+    const button = getInput();
+    expect(button).toHaveAttribute('aria-label', 'Color, Choose a color');
+  });
+
+  test('does not compose aria-label when a visible label is present', () => {
+    const { getInput } = renderSelect({
+      label: 'Color',
+      'aria-label': 'Color',
+      defaultValue: Color.Blue,
+    });
+
+    const button = getInput();
+    expect(button).not.toHaveAttribute('aria-label');
+  });
+
+  test('does not compose aria-label when aria-labelledby is present', () => {
+    const { getInput } = renderSelect({
+      label: undefined,
+      'aria-label': 'Color',
+      'aria-labelledby': 'custom-label',
+      defaultValue: Color.Blue,
+    });
+
+    const button = getInput();
+    expect(button).not.toHaveAttribute('aria-label');
+  });
+
   test('option & group passes through data props', async () => {
     const { queryByTestId } = render(
       <Select label="Label">

packages/select/src/Select/Select.tsx

@@ -530,6 +530,22 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(
       }),
     } 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 (
       <LeafyGreenProvider darkMode={darkMode}>
         <div
@@ -618,7 +634,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(
               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}