fix(select): add aria-disabled when disabled (#662)

core-ds · May 18, 2021 · bd93614 · bd93614
1 parent 6f0ddab
commit bd93614
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/packages/select/src/Component.test.tsx b/packages/select/src/Component.test.tsx
@@ -256,10 +256,15 @@ describe('Select', () => {
             expect(getByRole(ROLE_LISTBOX)).toBeInTheDocument();
         });
 
-        it('should add disabled class', () => {
-            render(<Select {...baseProps} label={LABEL_TEXT} options={options} disabled={true} />);
+        it('should add disabled class and aria-disabled', () => {
+            const { getByRole } = render(
+                <Select {...baseProps} label={LABEL_TEXT} options={options} disabled={true} />,
+            );
 
             expect(document.querySelector('.disabled') as HTMLElement).toBeInTheDocument();
+
+            const combobox = getByRole(ROLE_COMBOBOX);
+            expect(combobox).toHaveAttribute('aria-disabled');
         });
 
         it('should add `focused` class', () => {

diff --git a/packages/select/src/components/base-select/Component.tsx b/packages/select/src/components/base-select/Component.tsx
@@ -339,6 +339,7 @@ export const BaseSelect = forwardRef(
             <div
                 {...getComboboxProps({
                     ref: rootRef,
+                    ...(disabled && { 'aria-disabled': true }),
                     className: cn(styles.component, { [styles.block]: block }, className),
                 })}
                 onKeyDown={disabled ? undefined : handleFieldKeyDown}