Title: [288526] branches/safari-613-branch/Source/WebInspectorUI
- Revision
- 288526
- Author
- [email protected]
- Date
- 2022-01-24 17:56:41 -0800 (Mon, 24 Jan 2022)
Log Message
Cherry-pick r288385. rdar://problem/87851989
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):
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@288385 268f45cc-cd09-0410-ab3c-d52691b4dbfc
Modified Paths
Diff
Modified: branches/safari-613-branch/Source/WebInspectorUI/ChangeLog (288525 => 288526)
--- branches/safari-613-branch/Source/WebInspectorUI/ChangeLog 2022-01-25 01:56:38 UTC (rev 288525)
+++ branches/safari-613-branch/Source/WebInspectorUI/ChangeLog 2022-01-25 01:56:41 UTC (rev 288526)
@@ -1,5 +1,48 @@
2022-01-24 Alan Coon <[email protected]>
+ Cherry-pick r288385. rdar://problem/87851989
+
+ 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):
+
+
+ git-svn-id: https://svn.webkit.org/repository/webkit/trunk@288385 268f45cc-cd09-0410-ab3c-d52691b4dbfc
+
+ 2022-01-21 Nikita Vasilyev <[email protected]>
+
+ 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-24 Alan Coon <[email protected]>
+
Cherry-pick r288266. rdar://problem/87804395
Web Inspector: fully blackboxed stack traces don't show the right top call frame
Modified: branches/safari-613-branch/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.css (288525 => 288526)
--- branches/safari-613-branch/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.css 2022-01-25 01:56:38 UTC (rev 288525)
+++ branches/safari-613-branch/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.css 2022-01-25 01:56:41 UTC (rev 288526)
@@ -56,3 +56,7 @@
.alignment-editor .glyph.rotate-left > svg {
rotate: -90deg;
}
+
+.alignment-editor .glyph:focus {
+ outline-offset: var(--focus-ring-outline-offset);
+}
Modified: branches/safari-613-branch/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.js (288525 => 288526)
--- branches/safari-613-branch/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.js 2022-01-25 01:56:38 UTC (rev 288525)
+++ branches/safari-613-branch/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.js 2022-01-25 01:56:41 UTC (rev 288526)
@@ -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
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
