Improve editor and toolbar accessibility - #2764
Open
putnokiabel wants to merge 5 commits into
Open
Conversation
Document the toolbar button tooltip/screen-reader fix alongside the existing text-field semantics entry so both accessibility fixes in this PR are reflected in the changelog. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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
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.
Description
Fixes #2531 .
This PR bundles two accessibility fixes for the editor and its toolbar.
1. Toolbar buttons not labeled for screen readers
The buttons in the toolbar are currently not accessible and not labeled correctly when using screen readers (e.g. VoiceOver). This is due to not using the
tooltipvalue on the underlyingIconButtonfrom Material.Changes:
tooltipvalue to the underlying button inToggleStyleButton(so it's accessible in semantics / VoiceOver)tooltipvalue inSelectHeaderStyleButtons. The current approach only allows for setting a single tooltip (same across all header style buttons) which is obviously useless for blind users. This PR fixes this by setting the tooltip to the value displayed on the button (N, H1, H2, etc).How to test:
Run an app with a toolbar via Xcode, then tap Xcode -> Open developer tool -> Accessibility, and verify that on
main, the toolbar buttons don't have tooltips (regardless of tooltips set inButtonOptions). With this PR, the user of the plugin can set tooltips via the variousButtonOptions.2. Typing broken on Flutter Web when semantics is enabled (#2531)
When semantics is enabled on the web — via
SemanticsBinding.instance.ensureSemantics(), a screen reader, or Tab navigation — the Flutter engine only creates and attaches its editable DOM element (<textarea>) to a semantics node that carries the text-field role and reports focus. The editor drives the IME as a customTextInputClientbut published only an emptySemantics()node, so there was no keyboard target and typing silently failed (onlyTabreached the shortcut handler). This makes the previous workaround (autoFocus: true) ineffective and blocks E2E tooling (Playwright/Appium/Maestro) that requires semantics.Changes:
RenderEditable:textField/multiline/enabled/focused/onFocusplusonSetText/onSetSelection, withexcludeSemanticsso it is the single leaf the engine attaches its editable element to.focusedflag stays in sync — the engine attaches (and DOM-focuses) the element only while the node reports focus, which is what makes keyboard/Tab-driven focus able to type.flutter/textinputpath and keep their existing content semantics unchanged.How to test:
Run the minimal reproduction from #2531 with
flutter run -d chrome(it callsSemanticsBinding.instance.ensureSemantics()inmain) and verify text can now be typed into the editor. Verified in a real Chrome that the editor exposes a single text-field semantics node whosefocusedflag tracks the editor'sFocusNode.Type of Change