Web Inspector: VoiceOver doesn't read selected panel tab
authornvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 14 Feb 2020 23:18:34 +0000 (23:18 +0000)
committernvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 14 Feb 2020 23:18:34 +0000 (23:18 +0000)
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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@256652 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/NavigationBar.js
Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.js

index 4d376d7..5c5d8d7 100644 (file)
@@ -1,5 +1,26 @@
 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>
+
         Web Inspector: Bezier editor popover should be strictly LTR
         https://bugs.webkit.org/show_bug.cgi?id=206968
         <rdar://problem/59007065>
index a269686..0784392 100644 (file)
@@ -30,7 +30,6 @@ WI.NavigationBar = class NavigationBar extends WI.View
         super(element);
 
         this.element.classList.add(this.constructor.StyleClassName || "navigation-bar");
-        this.element.tabIndex = 0;
 
         if (role)
             this.element.setAttribute("role", role);
@@ -312,7 +311,6 @@ WI.NavigationBar = class NavigationBar extends WI.View
         document.addEventListener("mousemove", this._mouseMovedEventListener, false);
         document.addEventListener("mouseup", this._mouseUpEventListener, false);
 
-        event.preventDefault();
         event.stopPropagation();
     }
 
@@ -362,9 +360,6 @@ WI.NavigationBar = class NavigationBar extends WI.View
         document.removeEventListener("mousemove", this._mouseMovedEventListener, false);
         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.
         if (this._previousSelectedNavigationItem !== this.selectedNavigationItem)
index 4f07a08..efca5f8 100644 (file)
@@ -27,7 +27,7 @@ WI.RadioButtonNavigationItem = class RadioButtonNavigationItem extends WI.Button
 {
     constructor(identifier, toolTip, image, imageWidth, imageHeight)
     {
-        super(identifier, toolTip, image, imageWidth, imageHeight, null, "tab");
+        super(identifier, toolTip, image, imageWidth, imageHeight, "tab");
     }
 
     // Public
@@ -42,9 +42,11 @@ WI.RadioButtonNavigationItem = class RadioButtonNavigationItem extends WI.Button
         if (flag) {
             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;
         }
     }