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

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}