DevTools: removing header 2 tag from EmptyWidget and BackgroundServiceView
Reason:
- EmptyWidget elements should not be headers as they do not meet the criteria (https://www.w3.org/TR/WCAG20-TECHS/G141.html)
- Marking a non-header as a header will impede SR accessibility for the affected tools
Changes:
- Replacing <h2> tag from UI.EmptyWidget with <div>
- Removing <h2> tag from _showPreview(...) function with <div> in BackgroundServiceView.js (supposed to mimic UI.EmptyWidget element)
- Adding 'empty-bold-text' css in emptyWidget.css that mimics <h2> styling and adding the class to the <div> tags to retain h2 styling
Examples of UI.EmptyWidget use cases:
https://imgur.com/a/qpJeB2Y
BackgroundServiceView.js unique case:
https://imgur.com/cAW8Nu0
Change-Id: Iff3356f12b3dd1906141de4cfe9980b7b1d9c929
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1693808
Reviewed-by: Joel Einbinder <[email protected]>
Commit-Queue: Michael Liao <[email protected]>
Cr-Original-Commit-Position: refs/heads/master@{#678026}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 58d8c299b23fad86a6fe7e2b489f9cdded704011
diff --git a/front_end/resources/BackgroundServiceView.js b/front_end/resources/BackgroundServiceView.js
index a1461d6..faf77f1 100644
--- a/front_end/resources/BackgroundServiceView.js
+++ b/front_end/resources/BackgroundServiceView.js
@@ -295,9 +295,10 @@
recordKey.textContent =
UI.shortcutRegistry.shortcutDescriptorsForAction('background-service.toggle-recording')[0].name;
- centered.createChild('h2').appendChild(UI.formatLocalized(
- 'Click the record button %s or hit %s to start recording.',
- [UI.createInlineButton(landingRecordButton), recordKey]));
+ centered.createChild('div', 'empty-bold-text')
+ .appendChild(UI.formatLocalized(
+ 'Click the record button %s or hit %s to start recording.',
+ [UI.createInlineButton(landingRecordButton), recordKey]));
}
this._preview.show(this._previewPanel.contentElement);
diff --git a/front_end/ui/EmptyWidget.js b/front_end/ui/EmptyWidget.js
index 9ac0493..4dee094 100644
--- a/front_end/ui/EmptyWidget.js
+++ b/front_end/ui/EmptyWidget.js
@@ -40,7 +40,7 @@
this.registerRequiredCSS('ui/emptyWidget.css');
this.element.classList.add('empty-view-scroller');
this._contentElement = this.element.createChild('div', 'empty-view');
- this._textElement = this._contentElement.createChild('h2');
+ this._textElement = this._contentElement.createChild('div', 'empty-bold-text');
this._textElement.textContent = text;
}
diff --git a/front_end/ui/emptyWidget.css b/front_end/ui/emptyWidget.css
index 3a25315..530bca8 100644
--- a/front_end/ui/emptyWidget.css
+++ b/front_end/ui/emptyWidget.css
@@ -4,6 +4,13 @@
* found in the LICENSE file.
*/
+ .empty-bold-text {
+ display: block;
+ font-size: 1.5em;
+ margin: .83em 0 .83em;
+ font-weight: bold;
+ }
+
.empty-view {
color: hsla(0, 0%, 43%, 1);
padding: 30px;
