Changeset 256652 in webkit

Timestamp:

Feb 14, 2020 3:18:34 PM (4 years ago)

Author:

Nikita Vasilyev

Message:

Web Inspector: VoiceOver doesn't read selected panel tab
​https://bugs.webkit.org/show_bug.cgi?id=207735
<rdar://problem/59445157>

Reviewed by Timothy Hatcher.

• UserInterface/Views/NavigationBar.js:

(WI.NavigationBar):
(WI.NavigationBar.prototype._mouseDown):
(WI.NavigationBar.prototype._mouseUp):
Navigation bar itself shouldn't receive focus - its items should.

• UserInterface/Views/RadioButtonNavigationItem.js:

(WI.RadioButtonNavigationItem):
"tab" was passed as a label by mistake. VoiceOver read every tab as "tab" instead of it's actual label.

(WI.RadioButtonNavigationItem.prototype.set selected):
When clicking on a tab, focus on it so VoiceOver could read it.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/NavigationBar.js (modified) (3 diffs)
• UserInterface/Views/RadioButtonNavigationItem.js (modified) (2 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2020-02-14  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: VoiceOver doesn't read selected panel tab
+        https://bugs.webkit.org/show_bug.cgi?id=207735
+        <rdar://problem/59445157>
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Views/NavigationBar.js:
+        (WI.NavigationBar):
+        (WI.NavigationBar.prototype._mouseDown):
+        (WI.NavigationBar.prototype._mouseUp):
+        Navigation bar itself shouldn't receive focus - its items should.
+
+        * UserInterface/Views/RadioButtonNavigationItem.js:
+        (WI.RadioButtonNavigationItem):
+        "tab" was passed as a label by mistake. VoiceOver read every tab as "tab" instead of it's actual label.
+
+        (WI.RadioButtonNavigationItem.prototype.set selected):
+        When clicking on a tab, focus on it so VoiceOver could read it.
+
 2020-02-14  Nikita Vasilyev  <nvasilyev@apple.com>
 

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

@@ -31 +31 @@
 
         this.element.classList.add(this.constructor.StyleClassName || "navigation-bar");
-        this.element.tabIndex = 0;
 
         if (role)
@@ -313 +312 @@
         document.addEventListener("mouseup", this._mouseUpEventListener, false);
 
-        event.preventDefault();
         event.stopPropagation();
     }
@@ -363 +361 @@
         document.removeEventListener("mouseup", this._mouseUpEventListener, false);
 
-        // Restore the tabIndex so the navigation bar can be in the keyboard tab loop.
-        this.element.tabIndex = 0;
-
         // Dispatch the selected event here since the selectedNavigationItem setter surpresses it
         // while the mouse is down to prevent sending it while scrubbing the bar.

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

@@ -28 +28 @@
     constructor(identifier, toolTip, image, imageWidth, imageHeight)
     {
-        super(identifier, toolTip, image, imageWidth, imageHeight, null, "tab");
+        super(identifier, toolTip, image, imageWidth, imageHeight, "tab");
     }
 
@@ -43 +43 @@
             this.element.classList.add(WI.RadioButtonNavigationItem.SelectedStyleClassName);
             this.element.setAttribute("aria-selected", "true");
+            this.element.tabIndex = 0;
         } else {
             this.element.classList.remove(WI.RadioButtonNavigationItem.SelectedStyleClassName);
             this.element.setAttribute("aria-selected", "false");
+            this.element.tabIndex = -1;
         }
     }