Title: [288385] trunk/Source/WebInspectorUI
- Revision
- 288385
- Author
- nvasil...@apple.com
- Date
- 2022-01-21 15:40:17 -0800 (Fri, 21 Jan 2022)
Log Message
Web Inspector: Make alignment editor accessible
https://bugs.webkit.org/show_bug.cgi?id=235395
<rdar://problem/87851989>
Reviewed by Patrick Angle.
Make alignment editor icons focusable, and annotate elements so VoiceOver could correctly read what is selected.
* UserInterface/Views/AlignmentEditor.css:
(.alignment-editor .glyph:focus):
(.alignment-editor .glyph:not(:focus-visible)):
* UserInterface/Views/AlignmentEditor.js:
(WI.AlignmentEditor):
(WI.AlignmentEditor.prototype.set alignment):
(WI.AlignmentEditor.prototype._removePreviouslySelected):
(WI.AlignmentEditor.prototype._updateSelected):
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (288384 => 288385)
--- trunk/Source/WebInspectorUI/ChangeLog 2022-01-21 23:30:39 UTC (rev 288384)
+++ trunk/Source/WebInspectorUI/ChangeLog 2022-01-21 23:40:17 UTC (rev 288385)
@@ -1,3 +1,22 @@
+2022-01-21 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: Make alignment editor accessible
+ https://bugs.webkit.org/show_bug.cgi?id=235395
+ <rdar://problem/87851989>
+
+ Reviewed by Patrick Angle.
+
+ Make alignment editor icons focusable, and annotate elements so VoiceOver could correctly read what is selected.
+
+ * UserInterface/Views/AlignmentEditor.css:
+ (.alignment-editor .glyph:focus):
+ (.alignment-editor .glyph:not(:focus-visible)):
+ * UserInterface/Views/AlignmentEditor.js:
+ (WI.AlignmentEditor):
+ (WI.AlignmentEditor.prototype.set alignment):
+ (WI.AlignmentEditor.prototype._removePreviouslySelected):
+ (WI.AlignmentEditor.prototype._updateSelected):
+
2022-01-19 Devin Rousso <drou...@apple.com>
Web Inspector: fully blackboxed stack traces don't show the right top call frame
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.css (288384 => 288385)
--- trunk/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.css 2022-01-21 23:30:39 UTC (rev 288384)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.css 2022-01-21 23:40:17 UTC (rev 288385)
@@ -56,3 +56,7 @@
.alignment-editor .glyph.rotate-left > svg {
rotate: -90deg;
}
+
+.alignment-editor .glyph:focus {
+ outline-offset: var(--focus-ring-outline-offset);
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.js (288384 => 288385)
--- trunk/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.js 2022-01-21 23:30:39 UTC (rev 288384)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.js 2022-01-21 23:40:17 UTC (rev 288385)
@@ -34,6 +34,7 @@
this._element = document.createElement("div");
this._element.className = "alignment-editor";
+ this._element.role = "radiogroup";
}
// Static
@@ -99,6 +100,8 @@
for (let [value, path] of Object.entries(WI.AlignmentEditor._glyphsForType(alignment.type))) {
let glyphElement = WI.ImageUtilities.useSVGSymbol(path, "glyph", value);
+ glyphElement.role = "radio";
+ glyphElement.tabIndex = 0;
this._element.append(glyphElement);
glyphElement.classList.toggle("rotate-left", shouldRotate);
glyphElement.addEventListener("click", () => {
@@ -122,6 +125,7 @@
{
let previousGlyphElement = this._valueToGlyphElement.get(this._alignment.text);
previousGlyphElement?.classList.remove("selected");
+ previousGlyphElement?.removeAttribute("aria-checked");
}
_updateSelected()
@@ -128,6 +132,7 @@
{
let glyphElement = this._valueToGlyphElement.get(this._alignment.text);
glyphElement?.classList.add("selected");
+ glyphElement?.setAttribute("aria-checked", true);
}
};
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
