Changeset 288385 in webkit

Timestamp:

Jan 21, 2022 3:40:17 PM (6 months ago)

Author:

Nikita Vasilyev

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):

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/AlignmentEditor.css (modified) (1 diff)
• UserInterface/Views/AlignmentEditor.js (modified) (4 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2022-01-21  Nikita Vasilyev  <nvasilyev@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  <drousso@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.css

@@ -57 +57 @@
     rotate: -90deg;
 }
+
+.alignment-editor .glyph:focus {
+    outline-offset: var(--focus-ring-outline-offset);
+}

trunk/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.js

@@ -35 +35 @@
         this._element = document.createElement("div");
         this._element.className = "alignment-editor";
+        this._element.role = "radiogroup";
     }
 
@@ -100 +101 @@
             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);
@@ -123 +126 @@
         let previousGlyphElement = this._valueToGlyphElement.get(this._alignment.text);
         previousGlyphElement?.classList.remove("selected");
+        previousGlyphElement?.removeAttribute("aria-checked");
     }
 
@@ -129 +133 @@
         let glyphElement = this._valueToGlyphElement.get(this._alignment.text);
         glyphElement?.classList.add("selected");
+        glyphElement?.setAttribute("aria-checked", true);
     }
 };