From e2842f69c33d2a39cc83d73f3f336e542e1dabef Mon Sep 17 00:00:00 2001 From: narcolepticinsomniac Date: Sat, 9 Dec 2017 10:03:18 +0300 Subject: [PATCH 1/8] Hide focus outlines without crippling a11y, plus active state change for buttons --- edit.html | 3 ++- edit/edit.css | 3 --- global.css | 22 +++++++++++++++++++--- images/button-active.png | Bin 0 -> 204 bytes install-usercss.html | 3 ++- manage.html | 1 + manage/manage.css | 3 --- options.html | 1 + options/onoffswitch.css | 16 +++++++++++++++- popup.html | 3 ++- vendor/focus/what-input.min.js | 7 +++++++ 11 files changed, 49 insertions(+), 13 deletions(-) create mode 100644 images/button-active.png create mode 100644 vendor/focus/what-input.min.js diff --git a/edit.html b/edit.html index d2afaaef..6723d658 100644 --- a/edit.html +++ b/edit.html @@ -358,6 +358,7 @@ - + + diff --git a/edit/edit.css b/edit/edit.css index 6f6645e1..7c9ee482 100644 --- a/edit/edit.css +++ b/edit/edit.css @@ -145,7 +145,6 @@ input:invalid { align-items: center; margin-left: -13px; cursor: pointer; - outline: none; margin-top: 8px; margin-bottom: 8px; } @@ -360,7 +359,6 @@ html:not(.usercss) .applies-to li:last-child .add-applies-to { } .regexp-report summary, .regexp-report div { cursor: pointer; - outline: none; } .regexp-report mark { background-color: rgba(255, 255, 0, .5); @@ -376,7 +374,6 @@ html:not(.usercss) .applies-to li:last-child .add-applies-to { font-weight: bold; margin-left: -1rem; margin-bottom: .5rem; - outline: none; cursor: default; overflow-wrap: break-word; } diff --git a/global.css b/global.css index 452ada4d..264c222a 100644 --- a/global.css +++ b/global.css @@ -1,3 +1,13 @@ +html:not([data-whatinput="keyboard"]) button, +html:not([data-whatinput="keyboard"]) input[type="checkbox"], +html:not([data-whatinput="keyboard"]) input[type="radio"], +html:not([data-whatinput="keyboard"]) #header summary, +html:not([data-whatinput="keyboard"]) .applies-to-extra-expander, +html:not([data-whatinput="keyboard"]) .regexp-report summary, +html:not([data-whatinput="keyboard"]) .regexp-report div { + outline: none; +} + button { -webkit-appearance: none; -moz-appearance: none; @@ -17,6 +27,13 @@ button:not(:disabled):hover { border-color: hsl(0, 0%, 52%); } +button:active { + background-color: hsl(0, 0%, 95%); + border-color: hsl(0, 0%, 52%); + background: url(../images/button-active.png)repeat-x; + background-size: 100% 100%; +} + /* For some odd reason these hovers appear lighter than all other button hovers in every browser */ #message-box-buttons button:not(:disabled):hover { background-color: hsl(0, 0%, 90%); @@ -60,12 +77,11 @@ input[type="checkbox"]:not(.slider) { display: inline-flex; border-radius: 2px; background-color: hsla(0, 0%, 0%, .1); - outline: none; margin: 0; transition: background-color .1s, border-color .1s; } -input[type="checkbox"]:not(.slider):not(:disabled):hover { +input[type="checkbox"]:not(.slider):hover { border-color: hsl(0, 0%, 32%); background-color: hsl(0, 0%, 82%); } @@ -128,7 +144,6 @@ select { input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; - outline: none; background: hsl(0, 0%, 88%); border-radius: 50%; border: 1px solid hsl(0, 0%, 60%); @@ -172,6 +187,7 @@ select[disabled] > option { @supports (-moz-appearance: none) { .moz-appearance-bug .svg-icon.checked, + .moz-appearance-bug .onoffswitch input, .moz-appearance-bug input[type="radio"]:after { display: none !important; } diff --git a/images/button-active.png b/images/button-active.png new file mode 100644 index 0000000000000000000000000000000000000000..32f40a68b961cd5136eecbeb36feeb39543e1a2a GIT binary patch literal 204 zcmeAS@N?(olHy`uVBq!ia0vp^j6f{M!3HGXPAxeOq}Y|gW!U_%O?XxI14-? ziy0WWg+Z8+Vb&Z8pdfpRr>`sfLmo~>Au*L}`8$C^vY8S|xv6<2KrRD=b5Uwy zNotBhd1gt5g1e`0K#E=}J5b!f)5S4_<9c#NMg~V(QbNLy(?<>*_|V_k*!a+X&R2fD pkMdK0_lq!{O)+7 - + + diff --git a/manage.html b/manage.html index a6ce6452..aa87da5e 100644 --- a/manage.html +++ b/manage.html @@ -337,6 +337,7 @@
+ diff --git a/manage/manage.css b/manage/manage.css index 984dc3ee..f7c00a7e 100644 --- a/manage/manage.css +++ b/manage/manage.css @@ -212,7 +212,6 @@ select { .applies-to-extra-expander { font-weight: bold; cursor: pointer; - outline: none; } .applies-to-extra-expander { @@ -284,7 +283,6 @@ select { align-items: center; margin-left: -13px; cursor: pointer; - outline: none; } #header summary h2 { @@ -363,7 +361,6 @@ select { .filter-selection select { height: 18px; - outline: none; border: none; max-width: 100%; padding-left: 4px; diff --git a/options.html b/options.html index 8b00b659..e800ff67 100644 --- a/options.html +++ b/options.html @@ -158,6 +158,7 @@ + diff --git a/options/onoffswitch.css b/options/onoffswitch.css index 72630602..c335c97e 100644 --- a/options/onoffswitch.css +++ b/options/onoffswitch.css @@ -9,7 +9,21 @@ } .onoffswitch input { - display: none; + -webkit-appearance: none; + -moz-appearance: none; + pointer-events: none; + position: absolute; + top: -8px; + bottom: -10px; + left: -10px; + width: calc(100% + 12px); +} + +#message-box .onoffswitch input { + top: -6px; + left: -6px; + bottom: 0; + height: calc(100% + 12px); } .onoffswitch span { diff --git a/popup.html b/popup.html index 6d403b61..1819fea0 100644 --- a/popup.html +++ b/popup.html @@ -245,6 +245,7 @@ - + + diff --git a/vendor/focus/what-input.min.js b/vendor/focus/what-input.min.js new file mode 100644 index 00000000..1ec408bc --- /dev/null +++ b/vendor/focus/what-input.min.js @@ -0,0 +1,7 @@ +/** + * what-input - A global utility for tracking the current input method (mouse, keyboard or touch). + * @version v5.0.3 + * @link https://github.com/ten1seven/what-input + * @license MIT + */ +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("whatInput",[],t):"object"==typeof exports?exports.whatInput=t():e.whatInput=t()}(this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var i=n[o]={exports:{},id:o,loaded:!1};return e[o].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t){"use strict";e.exports=function(){var e=document.documentElement,t=null,n="initial",o=n,i=null,r=["input","select","textarea"],u=[],d=[16,17,18,91,93],a={keydown:"keyboard",keyup:"keyboard",mousedown:"mouse",mousemove:"mouse",MSPointerDown:"pointer",MSPointerMove:"pointer",pointerdown:"pointer",pointermove:"pointer",touchstart:"touch"},s=!1,c=!1,w={x:null,y:null},p={2:"touch",3:"touch",4:"mouse"},f=!1;try{var l=Object.defineProperty({},"passive",{get:function(){f=!0}});window.addEventListener("test",null,l)}catch(e){}var v=function(){var e=!!f&&{passive:!0};window.PointerEvent?(window.addEventListener("pointerdown",m),window.addEventListener("pointermove",y)):window.MSPointerEvent?(window.addEventListener("MSPointerDown",m),window.addEventListener("MSPointerMove",y)):(window.addEventListener("mousedown",m),window.addEventListener("mousemove",y),"ontouchstart"in window&&(window.addEventListener("touchstart",x,e),window.addEventListener("touchend",m))),window.addEventListener(b(),y,e),window.addEventListener("keydown",x),window.addEventListener("keyup",x),window.addEventListener("focusin",E),window.addEventListener("focusout",L)},m=function(e){if(!s){var t=e.which,i=a[e.type];"pointer"===i&&(i=g(e));var u="keyboard"===i&&t&&-1===d.indexOf(t)||"mouse"===i||"touch"===i;if(n!==i&&u&&(n=i,h("input")),o!==i&&u){var c=document.activeElement;c&&c.nodeName&&-1===r.indexOf(c.nodeName.toLowerCase())&&(o=i,h("intent"))}}},h=function(t){e.setAttribute("data-what"+t,"input"===t?n:o),M(t)},y=function(e){if(O(e),!s&&!c){var t=a[e.type];"pointer"===t&&(t=g(e)),o!==t&&(o=t,h("intent"))}},E=function(n){t=n.target.nodeName.toLowerCase(),e.setAttribute("data-whatelement",t),n.target.classList&&n.target.classList.length&&e.setAttribute("data-whatclasses",n.target.classList.toString().replace(" ",","))},L=function(){t=null,e.removeAttribute("data-whatelement"),e.removeAttribute("data-whatclasses")},x=function(e){m(e),window.clearTimeout(i),s=!0,i=window.setTimeout(function(){s=!1},100)},g=function(e){return"number"==typeof e.pointerType?p[e.pointerType]:"pen"===e.pointerType?"touch":e.pointerType},b=function(){return"onwheel"in document.createElement("div")?"wheel":void 0!==document.onmousewheel?"mousewheel":"DOMMouseScroll"},M=function(e){for(var t=0,i=u.length;t Date: Sat, 9 Dec 2017 18:25:44 +0300 Subject: [PATCH 2/8] fixups Manage: Disable tabindex in nested buttons Manage: Fix homepage link alignment Manage: Make entry actions keyboard navigatable Manage: Add search help accessibility Msgbox: Save and restore focus Manage: Fix delete confirmation cancel Manage: Make history button accessible Manage: Make favicons dropdown accessible Manage: Prevent focus on hidden textarea Msgbox: Stop tabbing outside of msgbox Usercss: Make nondefault reset accessible Usercss: Make colorpicker accessible Edit: Disable tabindex in nested buttons Edit: Make info and config icons accessible Options: Cleanup HTML Options: Make advanced toggle accessible Edit: Fix issues popup Edit: Remove link underlines from icons --- edit.html | 39 +++++++++++++++------------- edit/edit.css | 15 ++++++++++- edit/edit.js | 3 ++- manage.html | 44 ++++++++++++++++--------------- manage/config-dialog.css | 19 +++++++++----- manage/config-dialog.js | 50 ++++++++++++++++++++++++------------ manage/filters.js | 3 ++- manage/incremental-search.js | 1 + manage/manage.css | 50 +++++++++++++++++++++++++++--------- manage/manage.js | 13 +++++++--- manage/updater-ui.js | 6 ++++- msgbox/msgbox.js | 26 ++++++++++++++++++- options.html | 6 ++--- options/options.js | 10 ++++++-- 14 files changed, 200 insertions(+), 85 deletions(-) diff --git a/edit.html b/edit.html index 6723d658..1c18e254 100644 --- a/edit.html +++ b/edit.html @@ -191,17 +191,19 @@ - - + + + + + +
- +

@@ -246,11 +248,11 @@ - - + + - +
- - - + + +
@@ -300,20 +302,21 @@
- - + + - + @@ -358,7 +361,7 @@ - + diff --git a/edit/edit.css b/edit/edit.css index 7c9ee482..236c97a4 100644 --- a/edit/edit.css +++ b/edit/edit.css @@ -76,6 +76,19 @@ label { min-height: 1.4rem; } +.svg-inline-wrapper { + outline: none; + text-decoration: none; +} + +.svg-inline-wrapper svg { + border-bottom: 1px dashed transparent; +} + +.svg-inline-wrapper:focus svg { + border-bottom-color: #AAA; +} + /* basic info */ #basic-info { margin-bottom: 1rem; @@ -802,4 +815,4 @@ html:not(.usercss) .usercss-only, flex-wrap: wrap; white-space: normal; } -} \ No newline at end of file +} diff --git a/edit/edit.js b/edit/edit.js index 78082854..e84c0fe4 100644 --- a/edit/edit.js +++ b/edit/edit.js @@ -512,7 +512,8 @@ function showToMozillaHelp() { showHelp(t('styleMozillaFormatHeading'), t('styleToMozillaFormatHelp')); } -function showToggleStyleHelp() { +function showToggleStyleHelp(event) { + event.preventDefault(); showHelp(t('helpAlt'), t('styleEnabledToggleHint')); } diff --git a/manage.html b/manage.html index aa87da5e..fc0bef30 100644 --- a/manage.html +++ b/manage.html @@ -41,7 +41,7 @@

- + @@ -64,16 +64,16 @@

- - + + - +

- ... + ...
@@ -92,27 +92,27 @@