Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: [Select] make dropdown role=group and pass correct id to options list for a11y #897

Merged
merged 3 commits into from
Oct 25, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion src/components/Dropdown/Dropdown.tsx
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
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
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
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
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
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
Loading