Flyout Template Accessibility Tests - #290716
Draft
tsullivan wants to merge 4 commits into
Draft
Conversation
|
🤖 Jobs for this PR can be triggered through checkboxes. 🚧
ℹ️ To trigger the CI, please tick the checkbox below 👇
|
tsullivan
force-pushed
the
flyout/accessibility-fixes
branch
from
September 12, 2026 17:27
5966481 to
f37a721
Compare
Contributor
💛 Build succeeded, but was flaky
Failed CI StepsMetrics [docs]Module Count
Page load bundle
Unknown metric groupsESLint disabled line counts
shared async chunks total size
shared chunks total size
Total ESLint disabled count
total optimizer output size
History
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Automated functional UI tests for https://github.com/elastic/kibana-team/issues/3165
Tests Added
full_surface_a11y.spec.tsaxe-coreaccessibility scans on the full component and service widget flyouts. Validates that sections act as named regions, accordions correctly expose ARIA states, badges overflow into accessible popovers, and tabs adhere to the roving tabindex pattern.header_collapse_a11y.spec.tsPageDown,Home) and mouse wheel interactions. Ensures the header's collapsible region is removed from the tab order, focus is managed appropriately,aria-hidden/inertstates agree, and the footer is reachable at high zoom levels (WCAG 1.4.10 reflow).dialog_focus_a11y.spec.tsownFocustrueandfalse.resizable_a11y.spec.tsTab), resizable with arrow keys, has a descriptive accessible name, and strictly honors the configured minimum width boundary (minWidth).Bugs Fixed
<body>.scroller.focus()).visibility: hiddenis delayed, leaving elementsaria-hidden="true"but still focusable.inert=""to the wrapper when collapsed so the accessibility tree and tab order update instantly and in agreement.preventDefaulton wheel events in the header prevented this outer container from scrolling, blocking access to the footer (a WCAG 1.4.10 reflow failure).isAtScrollEdgeguard sopreventDefaultis bypassed when the internal scroller is already maxed out, allowing the browser to chain the scroll to the parent.TODOs Arisen
renderTitleIconis omitted from the compact title. This removes a focusable element and the tooltip's contents. Needs design review on whether to squeeze the icon into the compact row.EuiFlyoutResizeButtonacts like a slider but lacks slider value semantics (role="separator",aria-valuenow). Since the template can't pass arbitrary props to it, this requires an upstream fix in EUI.<dl>list structures or programmatic ARIA associations. Upgrading this requires changing DOM structure in@kbn/flyout-info-blocksand@kbn/flyout-meta-blocks.returnFocusToTriggertimeout hack in the examples once EUI adds internal support for returning focus to the trigger element on close (tracking elastic/eui#9365).Checklist
Check the PR satisfies following conditions.
Reviewers should verify this PR satisfies this list as well.
release_note:breakinglabel should be applied in these situations.release_note:*label is applied per the guidelinesbackport:*labels.Identify risks
Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss.
Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging.