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.

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

[EuiFlyout] Include all fixed EuiHeaders in flyout focus traps + improve screen reader accessibility #6566

Merged
merged 7 commits into from
Feb 3, 2023
Merged

[EuiFlyout] Include all fixed EuiHeaders in flyout focus traps + improve screen reader accessibility #6566

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4b06208
EuiFlyout - auto-shard all fixed EuiHeaders
cee-chen Feb 1, 2023
f38b991
Fix flyouts toggled from header shards not correctly focusing headers
cee-chen Feb 2, 2023
13285dd
Add screen reader instructions on interacting with the flyout
cee-chen Feb 2, 2023
1bbed23
Deprecate `closeButtonAriaLabel` - use `closeButtonProps['aria-label'…
cee-chen Feb 2, 2023
99588c5
[chore] Remove Fragment
cee-chen Feb 2, 2023
feadb36
Write tests for new EuiHeader affordance & screen reader instructions
cee-chen Feb 2, 2023
c27ebc2
[PR feedback] Remove `role` prop customization, tweak SR text accordi…
cee-chen Feb 2, 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
85 changes: 76 additions & 9 deletions src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,20 @@ Array [
data-focus-lock-disabled="false"
>
<nav
aria-describedby="generated-id"
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
data-autofocus="true"
id="id"
role="dialog"
style="inline-size: 320px;"
tabindex="-1"
tabindex="0"
>
<p
class="emotion-euiScreenReaderOnly"
id="generated-id"
>
You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close.
</p>
<button
aria-label="Close this dialog"
class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
Expand Down Expand Up @@ -55,13 +64,22 @@ Array [
data-focus-lock-disabled="false"
>
<nav
aria-describedby="generated-id"
aria-label="aria-label"
class="euiFlyout euiCollapsibleNav testClass1 testClass2 emotion-euiFlyout-none-noMaxWidth-overlay-left"
data-autofocus="true"
data-test-subj="test subject string"
id="id"
role="dialog"
style="inline-size: 320px;"
tabindex="-1"
tabindex="0"
>
<p
class="emotion-euiScreenReaderOnly"
id="generated-id"
>
You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close.
</p>
<button
aria-label="Close this dialog"
class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
Expand Down Expand Up @@ -97,11 +115,20 @@ Array [
data-focus-lock-disabled="false"
>
<nav
aria-describedby="generated-id"
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
data-autofocus="true"
id="id"
role="dialog"
style="inline-size: 240px;"
tabindex="-1"
tabindex="0"
>
<p
class="emotion-euiScreenReaderOnly"
id="generated-id"
>
You are in a non-modal dialog. To close the dialog, press Escape.
</p>
<button
aria-label="Close this dialog"
class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
Expand Down Expand Up @@ -142,11 +169,20 @@ Array [
data-focus-lock-disabled="false"
>
<nav
aria-describedby="generated-id"
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
data-autofocus="true"
id="id"
role="dialog"
style="inline-size: 320px;"
tabindex="-1"
tabindex="0"
>
<p
class="emotion-euiScreenReaderOnly"
id="generated-id"
>
You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close.
</p>
<button
aria-label="Close this dialog"
class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
Expand Down Expand Up @@ -183,11 +219,20 @@ Array [
data-focus-lock-disabled="false"
>
<nav
aria-describedby="generated-id"
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
data-autofocus="true"
id="id"
role="dialog"
style="inline-size: 320px;"
tabindex="-1"
tabindex="0"
>
<p
class="emotion-euiScreenReaderOnly"
id="generated-id"
>
You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close.
</p>
<button
aria-label="Close this dialog"
class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
Expand Down Expand Up @@ -224,9 +269,11 @@ Array [
>
<nav
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-left"
data-autofocus="true"
id="id"
role="dialog"
style="inline-size:320px"
tabindex="-1"
tabindex="0"
/>
</div>,
<div
Expand All @@ -249,11 +296,20 @@ Array [
data-focus-lock-disabled="false"
>
<nav
aria-describedby="generated-id"
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
data-autofocus="true"
id="id"
role="dialog"
style="inline-size: 320px;"
tabindex="-1"
tabindex="0"
>
<p
class="emotion-euiScreenReaderOnly"
id="generated-id"
>
You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close.
</p>
<button
aria-label="Close this dialog"
class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
Expand Down Expand Up @@ -295,9 +351,11 @@ Array [
>
<nav
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-left"
data-autofocus="true"
id="id"
role="dialog"
style="inline-size: 320px;"
tabindex="-1"
tabindex="0"
/>
</div>,
<div
Expand All @@ -320,11 +378,20 @@ Array [
data-focus-lock-disabled="false"
>
<nav
aria-describedby="generated-id"
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
data-autofocus="true"
id="id"
role="dialog"
style="inline-size: 240px;"
tabindex="-1"
tabindex="0"
>
<p
class="emotion-euiScreenReaderOnly"
id="generated-id"
>
You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close.
</p>
<button
aria-label="Close this dialog"
class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
Expand Down
4 changes: 1 addition & 3 deletions src/components/collapsible_nav/collapsible_nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import { EuiFlyout, EuiFlyoutProps } from '../flyout';
// Extend all the flyout props except `onClose` because we handle this internally
export type EuiCollapsibleNavProps = Omit<
EuiFlyoutProps,
'closeButtonAriaLabel' | 'type' | 'pushBreakpoint'
'type' | 'pushBreakpoint'
> & {
/**
* ReactNode to render as this component's content
Expand Down Expand Up @@ -65,7 +65,6 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
as = 'nav' as EuiCollapsibleNavProps['as'],
size = 320,
side = 'left',
role = null,
ownFocus = true,
outsideClickCloses = true,
closeButtonPosition = 'outside',
Expand Down Expand Up @@ -117,7 +116,6 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
as={as}
size={size}
side={side}
role={role}
ownFocus={ownFocus}
outsideClickCloses={outsideClickCloses}
closeButtonPosition={closeButtonPosition}
Expand Down
Loading