Skip to content

[EuiResizablePanel] Added tabindex prop to EuiResizablePanel for keyboard accessibility. #6534

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.

Sign up for GitHub

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

Merged
1Copenut merged 4 commits into from
Jan 23, 2023
Merged

[EuiResizablePanel] Added tabindex prop to EuiResizablePanel for keyboard accessibility. #6534

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ae27359
Added tabindex prop to EuiResizablePanel for keyboard accessibility.
Jan 18, 2023
22f97c5
Added unit test and corrected tabIndex type.
Jan 18, 2023
021850e
Renaming tabindex to tabIndex for consistency in docs.
Jan 18, 2023
545b6da
Renaming test description. Removing changelog.
Jan 23, 2023
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
4 changes: 2 additions & 2 deletions src-docs/src/views/resizable_container/resizable_container_basic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default () => (
<EuiResizableContainer style={{ height: '200px' }}>
{(EuiResizablePanel, EuiResizableButton) => (
<>
<EuiResizablePanel initialSize={50} minSize="30%">
<EuiResizablePanel initialSize={50} minSize="30%" tabIndex={0}>
<EuiText>
<div>{text}</div>
<a href="">Hello world</a>
Expand All @@ -23,7 +23,7 @@ export default () => (

<EuiResizableButton />

<EuiResizablePanel initialSize={50} minSize="200px">
<EuiResizablePanel initialSize={50} minSize="200px" tabIndex={0}>
<EuiText>{text}</EuiText>
</EuiResizablePanel>
</>
Expand Down
2 changes: 2 additions & 0 deletions src-docs/src/views/resizable_container/resizable_container_callbacks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ export default () => {
id={firstPanelId}
size={sizes[firstPanelId]}
minSize="30%"
tabIndex={0}
>
<EuiText>
<div>{text}</div>
Expand All @@ -91,6 +92,7 @@ export default () => {
id={secondPanelId}
size={sizes[secondPanelId]}
minSize="200px"
tabIndex={0}
>
<EuiText>{text}</EuiText>
</EuiResizablePanel>
Expand Down
11 changes: 11 additions & 0 deletions src-docs/src/views/resizable_container/resizable_container_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,6 +212,17 @@ export const ResizableContainerExample = {
<strong>EuiResizablePanel</strong> component and put the{' '}
<strong>EuiResizableButton</strong> component between.
</p>

<>
<EuiCallOut title="Consider adding a tabIndex for keyboard accessibility">
<p>
Add a prop <EuiCode>tabIndex={0}</EuiCode> to the{' '}
<strong>EuiResizableContainer</strong> if it is a fixed height or
has a lot of content. This ensures keyboard users can set focus on
the container and scroll to the bottom using arrow keys.
</p>
</EuiCallOut>
</>
</EuiText>
),
sections: [
Expand Down
2 changes: 2 additions & 0 deletions src-docs/src/views/resizable_container/resizable_container_reset_values.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@ export default () => {
id={firstPanelId}
size={sizes[firstPanelId]}
minSize="30%"
tabIndex={0}
>
<EuiText>
<div>{text}</div>
Expand All @@ -105,6 +106,7 @@ export default () => {
id={secondPanelId}
size={sizes[secondPanelId]}
minSize="200px"
tabIndex={0}
>
<EuiText>
<div>{text}</div>
Expand Down
4 changes: 2 additions & 2 deletions src-docs/src/views/resizable_container/resizable_container_vertical.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,15 @@ export default () => (
<EuiResizableContainer style={{ height: '400px' }} direction="vertical">
{(EuiResizablePanel, EuiResizableButton) => (
<>
<EuiResizablePanel initialSize={60} minSize="40%">
<EuiResizablePanel initialSize={60} minSize="40%" tabIndex={0}>
<EuiText>
<div>{text}</div>
</EuiText>
</EuiResizablePanel>

<EuiResizableButton />

<EuiResizablePanel initialSize={40} minSize="10%">
<EuiResizablePanel initialSize={40} minSize="10%" tabIndex={0}>
<EuiText>
<div>{text}</div>
</EuiText>
Expand Down
7 changes: 6 additions & 1 deletion src-docs/src/views/resizable_container/resizable_panel_collapsible.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,12 @@ export default () => {

<EuiResizableButton />

<EuiResizablePanel mode="main" initialSize={60} minSize="50px">
<EuiResizablePanel
mode="main"
initialSize={60}
minSize="50px"
tabIndex={0}
>
<EuiPanel paddingSize="l" style={{ minHeight: '100%' }}>
<EuiTitle>
<p>{itemSelected.label}</p>
Expand Down
7 changes: 6 additions & 1 deletion src-docs/src/views/resizable_container/resizable_panel_collapsible_options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,12 @@ export default () => {

<EuiResizableButton />

<EuiResizablePanel mode="main" initialSize={60} minSize="20%">
<EuiResizablePanel
mode="main"
initialSize={60}
minSize="20%"
tabIndex={0}
>
<EuiPanel paddingSize="l" style={{ minHeight: '100%' }}>
<EuiTitle>
<p>{itemSelected.label}</p>
Expand Down
1 change: 1 addition & 0 deletions src-docs/src/views/resizable_container/resizable_panels.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export default () => (
borderRadius="m"
wrapperPadding="m"
minSize="20%"
tabIndex={0}
>
<EuiText size="s">
<p>
Expand Down
20 changes: 20 additions & 0 deletions src/components/resizable_container/__snapshots__/resizable_panel.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,25 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`EuiResizablePanel props tabindex 1`] = `
<div>
<div
class="euiResizablePanel emotion-euiResizablePanel-l"
data-position="middle"
id="resizable-panel_generated-id"
style="inline-size: 100%; block-size: 0%;"
>
<div
aria-label="aria-label"
class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content testClass1 testClass2 emotion-euiPanel-grow-none-m-transparent-euiResizablePanel__content-scrollable"
data-test-subj="test subject string"
tabindex="0"
>
Content
</div>
</div>
</div>
`;

exports[`EuiResizablePanel props wrapperPadding 1`] = `
<div>
<div
Expand Down
12 changes: 12 additions & 0 deletions src/components/resizable_container/resizable_panel.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,5 +57,17 @@ describe('EuiResizablePanel', () => {

expect(container).toMatchSnapshot();
});

test('tabindex', () => {
Comment thread
1Copenut marked this conversation as resolved.
Outdated
const { container } = render(
<EuiResizableContainerContextProvider registry={mockRegistry}>
<EuiResizablePanel {...requiredProps} wrapperPadding="l" tabIndex={0}>
Content
</EuiResizablePanel>
</EuiResizableContainerContextProvider>
);

expect(container).toMatchSnapshot();
});
});
});
4 changes: 4 additions & 0 deletions src/components/resizable_container/resizable_panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,10 @@ export interface EuiResizablePanelProps
* Custom CSS properties applied to the wrapping `.euiResizablePanel` div
*/
style?: CSSProperties;
/**
* tabIndex={0} provides full keyboard access when content overflows `<EuiResizablePanel />`
*/
tabIndex?: number;
Comment on lines +131 to +134

@cee-chen cee-chen Jan 23, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just to clarify, did you add this primarily just to highlight/promote usage to devs? This doesn't actually affect source code, correct?

@1Copenut 1Copenut Jan 23, 2023

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Correct. This is to highlight times it makes sense to add a tabIndex and documenting it. The {...rest} on EuiResizablePanel#390 allowed me to add the new optional prop and to the best of my knowledge should not affect source code upstream.

/**
* Props to add to the wrapping `.euiResizablePanel` div
*/
Expand Down
3 changes: 3 additions & 0 deletions upcoming_changelogs/6534.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
**Bug fixes**

- Fixed `EuiResizablePanel` to accept `tabindex` prop so keyboard users can navigate content that overflows its container
Comment thread
1Copenut marked this conversation as resolved.
Outdated