Skip to content

Commit

Permalink
feat: [Select] make dropdown role=group and pass correct id to option…
Browse files Browse the repository at this point in the history 
…s list for a11y (#897)

* feat: make dropdown role=group and fix id for a11y in Select

* feat: make dropdown role=group and fix id for a11y in Select-update snapshots

* feat: select a11y fixes - improve code coverage
  • Loading branch information
@sprajapati-eightfold
sprajapati-eightfold authored Oct 25, 2024
1 parent 6ed1508 commit 758e580
Show file tree
Hide file tree
Showing 6 changed files with 150 additions and 16 deletions.
5 changes: 4 additions & 1 deletion src/components/Dropdown/Dropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -321,10 +321,13 @@ export const Dropdown: FC<DropdownProps> = React.memo(
}
// If there's an ariaRef, apply the a11y attributes to it, rather than the immediate child.
if (ariaRef?.current) {
ariaRef.current.setAttribute('aria-controls', dropdownId);
ariaRef.current.setAttribute('aria-expanded', `${mergedVisible}`);
ariaRef.current.setAttribute('aria-haspopup', 'true');

if (!ariaRef.current.hasAttribute('aria-controls')) {
ariaRef.current.setAttribute('aria-controls', dropdownId);
}

if (!ariaRef.current.hasAttribute('role')) {
ariaRef.current.setAttribute('role', 'button');
}
Expand Down
10 changes: 10 additions & 0 deletions src/components/List/List.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,16 @@ describe('List', () => {
expect(container).toMatchSnapshot();
});

test('Renders ol without crashing', () => {
const { container, getByTestId } = render(
<List {...listProps} listType="ol" />
);
const list = getByTestId('test-list');
expect(() => container).not.toThrowError();
expect(list).toBeTruthy();
expect(container).toMatchSnapshot();
});

test('List is horizontal', () => {
const { container } = render(<List {...listProps} layout="horizontal" />);
expect(container.querySelector('.vertical')).toBeFalsy();
Expand Down
15 changes: 13 additions & 2 deletions src/components/List/List.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export const List = <T extends any>({
role,
itemProps,
getItem,
id,
...rest
}: ListProps<T>) => {
const htmlDir: string = useCanvasDirection();
Expand Down Expand Up @@ -252,13 +253,23 @@ export const List = <T extends any>({
<div {...rest} className={classNames} style={style}>
{getHeader()}
{listType === 'ul' && (
<ul role={role} className={containerClasses} style={{ ...listStyle }}>
<ul
id={id}
role={role}
className={containerClasses}
style={{ ...listStyle }}
>
{getItems()}
{!!renderAdditionalItem && getAdditionalItem()}
</ul>
)}
{listType === 'ol' && (
<ol role={role} className={containerClasses} style={{ ...listStyle }}>
<ol
id={id}
role={role}
className={containerClasses}
style={{ ...listStyle }}
>
{getItems()}
{!!renderAdditionalItem && getAdditionalItem()}
</ol>
Expand Down
109 changes: 109 additions & 0 deletions src/components/List/__snapshots__/List.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,115 @@ exports[`List List is horizontal 1`] = `
</div>
`;

exports[`List Renders ol without crashing 1`] = `
<div>
<div
class="my-ref-class"
data-testid="test-list"
>
<div
style="padding-left: 16px;"
>
<h2>
Header
</h2>
</div>
<ol
class="list-container my-list-class vertical"
role="list"
>
<li
class="list-item my-list-item-class"
style="padding: 8px 16px;"
>
<a
aria-disabled="false"
class="link-style full-width"
data-testid="User1"
href="#"
id="User1"
role="link"
target="_self"
>
User 1
</a>
</li>
<li
class="list-item my-list-item-class"
style="padding: 8px 16px;"
>
<a
aria-disabled="false"
class="link-style full-width"
data-testid="User2"
href="#"
id="User2"
role="link"
target="_self"
>
User 2
</a>
</li>
<li
class="list-item my-list-item-class"
style="padding: 8px 16px;"
>
<a
aria-disabled="false"
class="link-style full-width"
data-testid="User3"
href="#"
id="User3"
role="link"
target="_self"
>
User 3
</a>
</li>
<li
class="list-item my-list-item-class"
style="padding: 8px 16px;"
>
<a
aria-disabled="false"
class="link-style full-width"
data-testid="User4"
href="#"
id="User4"
role="link"
target="_self"
>
User 4
</a>
</li>
<li
class="list-item my-list-item-class"
style="padding: 8px 16px;"
>
<a
aria-disabled="false"
class="link-style full-width"
data-testid="User5"
href="#"
id="User5"
role="link"
target="_self"
>
User 5
</a>
</li>
</ol>
<div
style="padding-left: 16px;"
>
<h3>
Footer
</h3>
</div>
</div>
</div>
`;

exports[`List Renders without crashing 1`] = `
<div>
<div
Expand Down
1 change: 1 addition & 0 deletions src/components/Select/Select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -873,6 +873,7 @@ export const Select: FC<SelectProps> = React.forwardRef(
options?.length > 0)
}
ref={dropdownRef}
role={'group'}
>
<div className={styles.selectInputWrapper}>
{/* When Dropdown is visible, place Pills in the reference element */}
Expand Down
26 changes: 13 additions & 13 deletions src/components/Select/__snapshots__/Select.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ exports[`Select Renders empty options in multiple mode without crashing 1`] = `
class="select-input-group input-group right-icon"
>
<input
aria-controls="dropdown-"
aria-controls="list-"
aria-disabled="false"
aria-expanded="false"
aria-haspopup="true"
Expand Down Expand Up @@ -99,7 +99,7 @@ exports[`Select Renders empty options in single mode without crashing 1`] = `
class="select-input-group input-group right-icon"
>
<input
aria-controls="dropdown-"
aria-controls="list-"
aria-disabled="false"
aria-expanded="false"
aria-haspopup="true"
Expand Down Expand Up @@ -176,7 +176,7 @@ exports[`Select Renders null options in multiple mode without crashing 1`] = `
class="select-input-group input-group right-icon"
>
<input
aria-controls="dropdown-"
aria-controls="list-"
aria-disabled="false"
aria-expanded="false"
aria-haspopup="true"
Expand Down Expand Up @@ -253,7 +253,7 @@ exports[`Select Renders null options in single mode without crashing 1`] = `
class="select-input-group input-group right-icon"
>
<input
aria-controls="dropdown-"
aria-controls="list-"
aria-disabled="false"
aria-expanded="false"
aria-haspopup="true"
Expand Down Expand Up @@ -330,7 +330,7 @@ exports[`Select Renders with default value 1`] = `
class="select-input-group input-group right-icon"
>
<input
aria-controls="dropdown-"
aria-controls="list-"
aria-disabled="false"
aria-expanded="false"
aria-haspopup="true"
Expand Down Expand Up @@ -477,7 +477,7 @@ exports[`Select Renders with default values when multiple 1`] = `
class="select-input-group input-group right-icon"
>
<input
aria-controls="dropdown-"
aria-controls="list-"
aria-disabled="false"
aria-expanded="false"
aria-haspopup="true"
Expand Down Expand Up @@ -554,7 +554,7 @@ exports[`Select Renders without crashing 1`] = `
class="select-input-group input-group right-icon"
>
<input
aria-controls="dropdown-"
aria-controls="list-"
aria-disabled="false"
aria-expanded="false"
aria-haspopup="true"
Expand Down Expand Up @@ -630,7 +630,7 @@ exports[`Select Select is large 1`] = `
class="select-input-group input-group right-icon"
>
<input
aria-controls="dropdown-"
aria-controls="list-"
aria-disabled="false"
aria-expanded="false"
aria-haspopup="true"
Expand Down Expand Up @@ -705,7 +705,7 @@ exports[`Select Select is medium 1`] = `
class="select-input-group input-group right-icon"
>
<input
aria-controls="dropdown-"
aria-controls="list-"
aria-disabled="false"
aria-expanded="false"
aria-haspopup="true"
Expand Down Expand Up @@ -780,7 +780,7 @@ exports[`Select Select is pill shaped 1`] = `
class="select-input-group input-group right-icon"
>
<input
aria-controls="dropdown-"
aria-controls="list-"
aria-disabled="false"
aria-expanded="false"
aria-haspopup="true"
Expand Down Expand Up @@ -855,7 +855,7 @@ exports[`Select Select is rectangle shaped 1`] = `
class="select-input-group input-group right-icon"
>
<input
aria-controls="dropdown-"
aria-controls="list-"
aria-disabled="false"
aria-expanded="false"
aria-haspopup="true"
Expand Down Expand Up @@ -930,7 +930,7 @@ exports[`Select Select is small 1`] = `
class="select-input-group input-group right-icon"
>
<input
aria-controls="dropdown-"
aria-controls="list-"
aria-disabled="false"
aria-expanded="false"
aria-haspopup="true"
Expand Down Expand Up @@ -1005,7 +1005,7 @@ exports[`Select Select is underline shaped 1`] = `
class="select-input-group input-group right-icon"
>
<input
aria-controls="dropdown-"
aria-controls="list-"
aria-disabled="false"
aria-expanded="false"
aria-haspopup="true"
Expand Down

0 comments on commit 758e580

Please sign in to comment.