pdf: Work around focus appearing for styled input elements
Bug: 902646
Change-Id: I9d8b18cbc95064367580d37dce9b1a48640f7706
Reviewed-on: https://chromium-review.googlesource.com/c/1462378
Auto-Submit: dstockwell <dstockwell@chromium.org>
Commit-Queue: dsinclair <dsinclair@chromium.org>
Reviewed-by: dsinclair <dsinclair@chromium.org>
Cr-Commit-Position: refs/heads/master@{#630752}
diff --git a/chrome/browser/resources/pdf/elements/viewer-pen-options/viewer-pen-options.html b/chrome/browser/resources/pdf/elements/viewer-pen-options/viewer-pen-options.html
index e582fdf..d7acee52 100644
--- a/chrome/browser/resources/pdf/elements/viewer-pen-options/viewer-pen-options.html
+++ b/chrome/browser/resources/pdf/elements/viewer-pen-options/viewer-pen-options.html
@@ -67,7 +67,8 @@
checked$="[[equal_(selectedColor, item.color)]]"
tabindex="1" style="--item-color: [[item.color]]"
title$="[[lookup_(strings, item.name)]]"
- aria-label$="[[lookup_(strings, item.name)]]">
+ aria-label$="[[lookup_(strings, item.name)]]"
+ on-pointerdown="blurOnPointerDown">
</template>
<paper-icon-button id="expand" icon="cr:expand-more"
tabindex="3"
@@ -83,10 +84,11 @@
checked$="[[equal_(selectedSize, item.size)]]"
tabindex="2" style="--item-size: [[item.size]]"
title$="{{lookup_(strings, item.name)}}"
- aria-label$="[[lookup_(strings, item.name)]]">
+ aria-label$="[[lookup_(strings, item.name)]]"
+ on-pointerdown="blurOnPointerDown">
</template>
</div>
</paper-icon-button>
</template>
<script src="viewer-pen-options.js"></script>
-</dom-module>
\ No newline at end of file
+</dom-module>
diff --git a/chrome/browser/resources/pdf/elements/viewer-pen-options/viewer-pen-options.js b/chrome/browser/resources/pdf/elements/viewer-pen-options/viewer-pen-options.js
index 68735f1..db202e5 100644
--- a/chrome/browser/resources/pdf/elements/viewer-pen-options/viewer-pen-options.js
+++ b/chrome/browser/resources/pdf/elements/viewer-pen-options/viewer-pen-options.js
@@ -172,7 +172,7 @@
* @param {*} a
* @param {*} b
*/
- equal_: function(a,b) {
+ equal_: function(a, b) {
return a == b;
},
@@ -185,5 +185,15 @@
*/
lookup_: function(strings, name) {
return strings ? strings[name] : '';
- }
-});
\ No newline at end of file
+ },
+
+ /**
+ * Used to remove focus when clicking or tapping on a styled input
+ * element. This is a workaround until we can use the :focus-visible
+ * pseudo selector.
+ */
+ blurOnPointerDown(e) {
+ const target = e.target;
+ setTimeout(() => target.blur(), 0);
+ },
+});