WebAudio: Fix a11y web audio truncation at 200% zoom
Problem: The web audio container contents are truncated when the view
port is reduced, such as at 200% zoom.
Solution: Support scrolling if the content overflows. A container
was added to wrap the content of the web audio view so the remains
fixed at the top.
This meets WCAG 1.4.4 Resize Text success criteria
https://www.w3.org/WAI/WCAG21/quickref/#resize-text
- Additionally this changes fixes a visual defect where the web audio
toolbar background height reduces below the foreground height.
See: https://imgur.com/rCNXc6Q
Screenshot of bug: https://i.imgur.com/in6KqPJ.png
Screenshot of fix: https://i.imgur.com/AQb6lkn.png
Gifs with fix (all at 200% zoom)
Gif of height responsiveness: https://imgur.com/jYnWcWR
Gif of scrolling: https://imgur.com/hHdu7ZJ
Gif of zoom from 200% to 400%: https://imgur.com/1a4PkJk
Bug: 963183
Change-Id: I876040305a3e130b676916936079f308a9111af0
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2003390
Reviewed-by: Hongchan Choi <[email protected]>
Reviewed-by: Mike Jackson <[email protected]>
Reviewed-by: John Emau <[email protected]>
Reviewed-by: Robert Paveza <[email protected]>
Commit-Queue: John Emau <[email protected]>
diff --git a/front_end/web_audio/WebAudioView.js b/front_end/web_audio/WebAudioView.js
index 7dba4cc..f41113d 100644
--- a/front_end/web_audio/WebAudioView.js
+++ b/front_end/web_audio/WebAudioView.js
@@ -24,8 +24,11 @@
toolbar.appendSeparator();
toolbar.appendToolbarItem(this._contextSelector.toolbarItem());
+ // Create content container
+ this._contentContainer = this.contentElement.createChild('div', 'web-audio-content-container vbox flex-auto');
+
// Creates the detail view.
- this._detailViewContainer = this.contentElement.createChild('div', 'vbox flex-auto');
+ this._detailViewContainer = this._contentContainer.createChild('div', 'web-audio-details-container vbox flex-auto');
this._graphManager = new GraphManager();
@@ -40,7 +43,7 @@
this._landingPage.show(this._detailViewContainer);
// Creates the summary bar.
- this._summaryBarContainer = this.contentElement.createChild('div', 'web-audio-summary-container');
+ this._summaryBarContainer = this._contentContainer.createChild('div', 'web-audio-summary-container');
this._contextSelector.addEventListener(SelectorEvents.ContextSelected, event => {
const context =
