AX: FKA: Buttons need a visible focus indicator
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 21 Apr 2017 23:58:51 +0000 (23:58 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 21 Apr 2017 23:58:51 +0000 (23:58 +0000)
https://bugs.webkit.org/show_bug.cgi?id=171040
<rdar://problem/30922548>

Patch by Aaron Chu <aaron_chu@apple.com> on 2017-04-21
Reviewed by Antoine Quint.

Source/WebCore:

Added a background color for the focus state of the icon buttons in modern media controls.

Test: media/modern-media-controls/icon-button/icon-button-focus-state.html

* Modules/modern-media-controls/controls/icon-button.css:
(button.icon:focus):

LayoutTests:

* TestExpectations:
* media/modern-media-controls/icon-button/icon-button-focus-state-expected.txt: Added.
* media/modern-media-controls/icon-button/icon-button-focus-state.html: Added.
* platform/mac/TestExpectations:

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

LayoutTests/ChangeLog
LayoutTests/TestExpectations
LayoutTests/media/modern-media-controls/icon-button/icon-button-focus-state-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/icon-button/icon-button-focus-state.html [new file with mode: 0644]
LayoutTests/platform/mac/TestExpectations
Source/WebCore/ChangeLog
Source/WebCore/Modules/modern-media-controls/controls/icon-button.css

index 1576011..cb8da1c 100644 (file)
@@ -1,3 +1,16 @@
+2017-04-21  Aaron Chu  <aaron_chu@apple.com>
+
+        AX: FKA: Buttons need a visible focus indicator
+        https://bugs.webkit.org/show_bug.cgi?id=171040
+        <rdar://problem/30922548>
+
+        Reviewed by Antoine Quint.
+
+        * TestExpectations:
+        * media/modern-media-controls/icon-button/icon-button-focus-state-expected.txt: Added.
+        * media/modern-media-controls/icon-button/icon-button-focus-state.html: Added.
+        * platform/mac/TestExpectations:
+
 2017-04-21  Ryan Haddad  <ryanhaddad@apple.com>
 
         Mark inspector/debugger/tail-deleted-frames-this-value.html as flaky.
index 34fc6ae..41ebc86 100644 (file)
@@ -103,6 +103,9 @@ http/tests/ssl/applepay/ [ Skip ]
 fast/visual-viewport/rubberbanding-viewport-rects.html [ Skip ]
 fast/visual-viewport/rubberbanding-viewport-rects-header-footer.html  [ Skip ]
 
+# FKA focus ring only make sense on Mac
+media/modern-media-controls/icon-button/icon-button-focus-state.html [ Skip ]
+
 #//////////////////////////////////////////////////////////////////////////////////////////
 # End platform-specific tests.
 #//////////////////////////////////////////////////////////////////////////////////////////
diff --git a/LayoutTests/media/modern-media-controls/icon-button/icon-button-focus-state-expected.txt b/LayoutTests/media/modern-media-controls/icon-button/icon-button-focus-state-expected.txt
new file mode 100644 (file)
index 0000000..8f898bb
--- /dev/null
@@ -0,0 +1,13 @@
+Testing an IconButton has a blue background-color when focused.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Confirm inital icon button color.
+PASS window.getComputedStyle(iconButton.element).backgroundColor is "rgb(192, 192, 192)"
+Confirm icon button color changed after focus.
+PASS window.getComputedStyle(iconButton.element).backgroundColor is not "rgb(192, 192, 192)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/media/modern-media-controls/icon-button/icon-button-focus-state.html b/LayoutTests/media/modern-media-controls/icon-button/icon-button-focus-state.html
new file mode 100644 (file)
index 0000000..38c0ad7
--- /dev/null
@@ -0,0 +1,25 @@
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+description("Testing an <code>IconButton</code> has a blue background-color when focused.");
+
+window.jsTestIsAsync = true;
+
+const iconButton = new IconButton({ layoutDelegate: { layoutTraits: LayoutTraits.macOS } });
+iconButton.iconName = Icons.Pause;
+document.body.appendChild(iconButton.element);
+
+debug("Confirm inital icon button color.");
+shouldBeEqualToString("window.getComputedStyle(iconButton.element).backgroundColor", "rgb(192, 192, 192)");
+
+iconButton.element.focus();
+
+debug("Confirm icon button color changed after focus.");
+shouldNotBeEqualToString("window.getComputedStyle(iconButton.element).backgroundColor", "rgb(192, 192, 192)");
+
+finishJSTest();
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
index c617665..fbced5b 100644 (file)
@@ -27,6 +27,8 @@ fast/attachment/attachment-subtitle-resize.html [ Pass ]
 
 fast/harness/uiscriptcontroller [ Pass ]
 
+media/modern-media-controls/icon-button/icon-button-focus-state.html [ Pass ]
+
 #//////////////////////////////////////////////////////////////////////////////////////////
 # End platform-specific directories.
 #//////////////////////////////////////////////////////////////////////////////////////////
index 7aaa792..6b34c01 100644 (file)
@@ -1,3 +1,18 @@
+2017-04-21  Aaron Chu  <aaron_chu@apple.com>
+
+        AX: FKA: Buttons need a visible focus indicator
+        https://bugs.webkit.org/show_bug.cgi?id=171040
+        <rdar://problem/30922548>
+
+        Reviewed by Antoine Quint.
+
+        Added a background color for the focus state of the icon buttons in modern media controls.
+
+        Test: media/modern-media-controls/icon-button/icon-button-focus-state.html
+
+        * Modules/modern-media-controls/controls/icon-button.css:
+        (button.icon:focus):
+
 2017-03-22  Matt Rajca  <mrajca@apple.com>
 
         Consider muting audio hardware a form of autoplay interference.
index 465f5d3..cf82e63 100644 (file)
@@ -31,3 +31,8 @@ button.icon:active,
 button.icon.on {
     background-color: white !important;
 }
+
+button.icon:focus {
+    background-color: -webkit-focus-ring-color !important;
+    mix-blend-mode: normal !important;
+}