From 0f4b4206bc29d8abab3130e436472924071bde0f Mon Sep 17 00:00:00 2001 From: Alexey Antonov Date: Thu, 13 Nov 2025 16:05:30 +0200 Subject: [PATCH 1/6] [EuiFlyout] Missing flyout title in screen reader announcement --- packages/eui/src/components/flyout/flyout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/eui/src/components/flyout/flyout.tsx b/packages/eui/src/components/flyout/flyout.tsx index f2cec400546..679a6a98ba9 100644 --- a/packages/eui/src/components/flyout/flyout.tsx +++ b/packages/eui/src/components/flyout/flyout.tsx @@ -565,9 +565,9 @@ export const EuiFlyout = forwardRef( aria-describedby={!isPushed ? ariaDescribedBy : _ariaDescribedBy} data-autofocus={!isPushed || undefined} > + {contentToRender} {!isPushed && screenReaderDescription} {closeButton} - {contentToRender} From cf1e0e500577a761b4690da0baff5a29e645149a Mon Sep 17 00:00:00 2001 From: Alexey Antonov Date: Fri, 14 Nov 2025 13:42:57 +0200 Subject: [PATCH 2/6] fix Cypress --- packages/eui/src/components/flyout/flyout.spec.tsx | 4 ++-- packages/eui/src/components/tool_tip/tool_tip.spec.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/eui/src/components/flyout/flyout.spec.tsx b/packages/eui/src/components/flyout/flyout.spec.tsx index a40bbf61d1f..e439bf82ce3 100644 --- a/packages/eui/src/components/flyout/flyout.spec.tsx +++ b/packages/eui/src/components/flyout/flyout.spec.tsx @@ -83,9 +83,9 @@ describe('EuiFlyout', () => { it('traps focus and cycles tabbable items', () => { cy.mount(); cy.get('[data-test-subj="flyoutSpec"]').should('be.focused'); - cy.repeatRealPress('Tab', 4); - cy.get('[data-test-subj="itemC"]').should('be.focused'); cy.repeatRealPress('Tab', 3); + cy.get('[data-test-subj="itemC"]').should('be.focused'); + cy.repeatRealPress('Tab', 2); cy.get('[data-test-subj="euiFlyoutCloseButton"]').should('be.focused'); }); diff --git a/packages/eui/src/components/tool_tip/tool_tip.spec.tsx b/packages/eui/src/components/tool_tip/tool_tip.spec.tsx index 694584376c9..3308ccd26d4 100644 --- a/packages/eui/src/components/tool_tip/tool_tip.spec.tsx +++ b/packages/eui/src/components/tool_tip/tool_tip.spec.tsx @@ -114,7 +114,7 @@ describe('EuiToolTip', () => { cy.get('[data-test-subj="flyout"]').focus(); - cy.repeatRealPress('Tab', 2); + cy.repeatRealPress('Tab', 1); cy.get('[data-test-subj="tool_tip"]').should('exist'); cy.realPress('Escape'); From 86f35fdbaef3e99efe649c8825a06147418c4bbb Mon Sep 17 00:00:00 2001 From: Alexey Antonov Date: Fri, 14 Nov 2025 13:47:35 +0200 Subject: [PATCH 3/6] changelog --- packages/eui/changelogs/upcoming/9212.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 packages/eui/changelogs/upcoming/9212.md diff --git a/packages/eui/changelogs/upcoming/9212.md b/packages/eui/changelogs/upcoming/9212.md new file mode 100644 index 00000000000..3fa4f45a4e6 --- /dev/null +++ b/packages/eui/changelogs/upcoming/9212.md @@ -0,0 +1,3 @@ +**Accessibility** + +- Changed the close button position in `EuiFlyout` to allow for the modal title to be perceivable first From c311d632836cb69f3efe1dbbbefdc5526d94f368 Mon Sep 17 00:00:00 2001 From: Alexey Antonov Date: Fri, 21 Nov 2025 14:16:31 +0200 Subject: [PATCH 4/6] remove tabIndex --- packages/eui/src/components/flyout/flyout.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/eui/src/components/flyout/flyout.tsx b/packages/eui/src/components/flyout/flyout.tsx index 679a6a98ba9..5fb51e90719 100644 --- a/packages/eui/src/components/flyout/flyout.tsx +++ b/packages/eui/src/components/flyout/flyout.tsx @@ -561,7 +561,6 @@ export const EuiFlyout = forwardRef( {...(rest as ComponentPropsWithRef)} role={!isPushed ? 'dialog' : rest.role} aria-modal={!isPushed || undefined} - tabIndex={!isPushed ? 0 : rest.tabIndex} aria-describedby={!isPushed ? ariaDescribedBy : _ariaDescribedBy} data-autofocus={!isPushed || undefined} > From aa0f37ff222607a5f500f3a64d7abfdc8a5c0ee4 Mon Sep 17 00:00:00 2001 From: Alexey Antonov Date: Mon, 24 Nov 2025 12:35:01 +0200 Subject: [PATCH 5/6] try to remove data-autofocus --- packages/eui/src/components/flyout/flyout.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/eui/src/components/flyout/flyout.tsx b/packages/eui/src/components/flyout/flyout.tsx index 5fb51e90719..9504cba3aa3 100644 --- a/packages/eui/src/components/flyout/flyout.tsx +++ b/packages/eui/src/components/flyout/flyout.tsx @@ -562,7 +562,6 @@ export const EuiFlyout = forwardRef( role={!isPushed ? 'dialog' : rest.role} aria-modal={!isPushed || undefined} aria-describedby={!isPushed ? ariaDescribedBy : _ariaDescribedBy} - data-autofocus={!isPushed || undefined} > {contentToRender} {!isPushed && screenReaderDescription} From 9b9f615371ceb85ed9347b1ec27b38aed4155efb Mon Sep 17 00:00:00 2001 From: Alexey Antonov Date: Mon, 24 Nov 2025 13:09:52 +0200 Subject: [PATCH 6/6] add tabIndex to header --- packages/eui/src/components/flyout/flyout_header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/eui/src/components/flyout/flyout_header.tsx b/packages/eui/src/components/flyout/flyout_header.tsx index 298989fd9d7..cd16d8396f8 100644 --- a/packages/eui/src/components/flyout/flyout_header.tsx +++ b/packages/eui/src/components/flyout/flyout_header.tsx @@ -31,7 +31,7 @@ export const EuiFlyoutHeader: EuiFlyoutHeaderProps = ({ const cssStyles = [styles.euiFlyoutHeader, hasBorder && styles.hasBorder]; return ( -
+
{children}
);