Popup accessibility improved (#1041)

2022-07-04 06:37:46 +02:00 · 2022-07-04 06:37:46 +02:00 · f8d57b47e2
parent d23ab7b0e7
commit f8d57b47e2
5 changed files with 193 additions and 116 deletions
--- a/pages/popup/popup.css
+++ b/pages/popup/popup.css
@ -55,7 +55,7 @@ header {

 .subpanel:last-child {
    border-bottom: solid #d3d3d3 1px;
-    padding-bottom: 4px;
+    padding-bottom: 8px;
 }

 .content {
@ -267,79 +267,6 @@ footer {
    filter: contrast(0.5);
 }

-/**
- * Toggles
- */
-#protection-toggle, #manipulateDOM-toggle, #google-fonts-toggle {
-    cursor: pointer;
-    float: right;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    -webkit-user-select: none;
-    user-select: none;
-}
-
-.switch {
-    display: inline-block;
-    height: 18px;
-    position: relative;
-    width: 40px;
-}
-
-.switch input {
-    height: 0;
-    opacity: 0;
-    width: 0;
-}
-
-.slider, .slider-disabled {
-    background-color: #b40000;
-    border-radius: 34px;
-    bottom: 0;
-    cursor: pointer;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    -webkit-transition: 0.1s;
-    transition: 0.1s;
-}
-
-.slider::before, .slider-disabled::before {
-    background-color: #f9f9fa;
-    border-radius: 50%;
-    bottom: 2px;
-    content: "";
-    height: 14px;
-    left: 2px;
-    position: absolute;
-    -webkit-transition: 0.3s;
-    transition: 0.3s;
-    width: 14px;
-}
-
-input:checked + .slider {
-    background-color: #6bb798;
-}
-
-input:checked + .slider::before {
-    -webkit-transform: translateX(22px);
-    -ms-transform: translateX(22px);
-    transform: translateX(22px);
-}
-
-.slider-disabled {
-    background-color: lightgray;
-    cursor: not-allowed;
-}
-
-.slider:hover {
-    background-color: #7e0000;
-}
-
-input:checked + .slider:hover {
-    background-color: #4b806a;
-}

 /**
 * Miscellaneous
@ -384,7 +311,9 @@ input:checked + .slider:hover {
    color: #555;
    display: flex;
    font-style: italic;
+    height: 24px;
    overflow: hidden;
+    padding: 4px 0;
    white-space: nowrap;
 }

@ -405,6 +334,8 @@ input:checked + .slider:hover {
    width: 100%;
 }

+
+
 /**
 * Compatibility
 */
@ -497,27 +428,6 @@ input:checked + .slider:hover {
        background-image: url("../../icons/logging-light.svg");
    }

-    input:checked + .slider {
-        background-color: #6bb798;
-    }
-
-    .slider {
-        background-color: #b54b4b;
-    }
-
-    .slider::before {
-        background-color: #323232;
-    }
-
-    .slider-disabled {
-        background-color: #777;
-        cursor: not-allowed;
-    }
-
-    .slider-disabled::before {
-        background-color: #323232;
-    }
-
    #label-donate {
        background-color: #404040;
        color: #bbb;
--- a/pages/popup/popup.html
+++ b/pages/popup/popup.html
@ -5,6 +5,7 @@
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="popup.css">
+        <link rel="stylesheet" type="text/css" href="toggle.css">
        <link rel="stylesheet" type="text/css" href="../base.css">
    </head>
    <body>
@ -27,10 +28,17 @@
            <div id="website-context" class="panel hidden">
                <div class="subpanel">
                    <div id="protection-toggle">
-                        <label class="switch">
-                            <input type="checkbox" id="protection-toggle-switch">
-                            <span id="toggle-switch-domain" class="slider"></span>
-                        </label>
+                    <label class='toggle' for='protection-toggle-switch'>
+                        <input type='checkbox' name='protection-toggle-switch' id='protection-toggle-switch' class="toggle__input">
+                        <span class="toggle__display" hidden>
+                            <svg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="toggle__icon toggle__icon--checkmark">
+                                <path d='M6.08471 10.6237L2.29164 6.83059L1 8.11313L6.08471 13.1978L17 2.28255L15.7175 1L6.08471 10.6237Z' fill='currentcolor' stroke='currentcolor' />
+                            </svg>
+                            <svg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="toggle__icon toggle__icon--cross">
+                                <path d='M11.167 0L6.5 4.667L1.833 0L0 1.833L4.667 6.5L0 11.167L1.833 13L6.5 8.333L11.167 13L13 11.167L8.333 6.5L13 1.833L11.167 0Z' fill='currentcolor' />
+                            </svg>
+                        </span>
+                    </label>
                    </div>
                    <div class="label-domain">
                        <span id="domain-indicator"></span>
@ -38,9 +46,16 @@
                </div>
                <div class="subpanel" id="div-manipulateDOM">
                    <div id="manipulateDOM-toggle">
-                        <label class="switch">
-                            <input type="checkbox" id="manipulateDOM-toggle-switch">
-                            <span id="toggle-switch-manipulateDOM" class="slider"></span>
+                        <label class='toggle' for='manipulateDOM-toggle-switch'>
+                            <input type='checkbox' name='manipulateDOM-toggle-switch' id='manipulateDOM-toggle-switch' class="toggle__input">
+                            <span class="toggle__display" hidden>
+                                <svg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="toggle__icon toggle__icon--checkmark">
+                                    <path d='M6.08471 10.6237L2.29164 6.83059L1 8.11313L6.08471 13.1978L17 2.28255L15.7175 1L6.08471 10.6237Z' fill='currentcolor' stroke='currentcolor' />
+                                </svg>
+                                <svg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="toggle__icon toggle__icon--cross">
+                                    <path d='M11.167 0L6.5 4.667L1.833 0L0 1.833L4.667 6.5L0 11.167L1.833 13L6.5 8.333L11.167 13L13 11.167L8.333 6.5L13 1.833L11.167 0Z' fill='currentcolor' />
+                                </svg>
+                            </span>
                        </label>
                    </div>
                    <div id="label-manipulateDOM" class="label-domain">
@ -49,9 +64,16 @@
                </div>
                <div class="subpanel" id="div-google-fonts">
                    <div id="google-fonts-toggle">
-                        <label class="switch">
-                            <input type="checkbox" id="google-fonts-toggle-switch">
-                            <span id="toggle-switch-google-fonts" class="slider"></span>
+                        <label class='toggle' for='google-fonts-toggle-switch'>
+                            <input type='checkbox' name='google-fonts-toggle-switch' id='google-fonts-toggle-switch' class="toggle__input">
+                            <span class="toggle__display" hidden>
+                                <svg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="toggle__icon toggle__icon--checkmark">
+                                    <path d='M6.08471 10.6237L2.29164 6.83059L1 8.11313L6.08471 13.1978L17 2.28255L15.7175 1L6.08471 10.6237Z' fill='currentcolor' stroke='currentcolor' />
+                                </svg>
+                                <svg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="toggle__icon toggle__icon--cross">
+                                    <path d='M11.167 0L6.5 4.667L1.833 0L0 1.833L4.667 6.5L0 11.167L1.833 13L6.5 8.333L11.167 13L13 11.167L8.333 6.5L13 1.833L11.167 0Z' fill='currentcolor' />
+                                </svg>
+                            </span>
                        </label>
                    </div>
                    <div class="label-domain">
--- a/pages/popup/popup.js
+++ b/pages/popup/popup.js
@ -102,7 +102,7 @@ popup._renderContextualContents = function () {

 popup._renderDomainAllowlistPanel = function () {
    let websiteContextElement, protectionToggleElement, domainIndicatorElement,
-        manipulateDOMToggleElement, manipulateDOMToggleStyle, googleFontsToggleElement, googleFontsToggleStyle;
+        manipulateDOMToggleElement, googleFontsToggleElement;

    websiteContextElement = document.getElementById('website-context');
    websiteContextElement.setAttribute('class', 'panel');
@ -113,10 +113,8 @@ popup._renderDomainAllowlistPanel = function () {
    protectionToggleElement.setAttribute('dir', popup._scriptDirection);
    domainIndicatorElement.innerText = popup._domain;
    manipulateDOMToggleElement = document.getElementById('manipulateDOM-toggle-switch');
-    manipulateDOMToggleStyle = document.getElementById('toggle-switch-manipulateDOM');

    googleFontsToggleElement = document.getElementById('google-fonts-toggle-switch');
-    googleFontsToggleStyle = document.getElementById('toggle-switch-google-fonts');

    if (popup._blockGoogleFonts === false) {
        document.getElementById('div-google-fonts').hidden = true;
@ -124,17 +122,12 @@ popup._renderDomainAllowlistPanel = function () {

    if (popup._domainIsAllowlisted === true) {
        manipulateDOMToggleElement.disabled = true;
-        manipulateDOMToggleStyle.setAttribute('class', 'slider-disabled');
-
        googleFontsToggleElement.disabled = true;
-        googleFontsToggleStyle.setAttribute('class', 'slider-disabled');
-
        protectionToggleElement.checked = false;
        protectionToggleElement.addEventListener('click', popup._enableProtection);
        return;
    }

-    googleFontsToggleStyle.setAttribute('class', 'slider');
    googleFontsToggleElement.disabled = false;

    if (popup._domainGoogleFonts) {
@ -146,7 +139,6 @@ popup._renderDomainAllowlistPanel = function () {
    }

    manipulateDOMToggleElement.disabled = false;
-    manipulateDOMToggleStyle.setAttribute('class', 'slider');

    protectionToggleElement.checked = true;
    protectionToggleElement.addEventListener('click', popup._disableProtection);
@ -164,6 +156,8 @@ popup._renderDomainAllowlistPanel = function () {
        manipulateDOMToggleElement.checked = true;
        manipulateDOMToggleElement.addEventListener('click', popup._disableManipulateDOM);
    }
+
+    websiteContextElement.style.display = 'block';
 };

 popup._renderInjectionPanel = function (groupedInjections) {
--- a/pages/popup/toggle.css
+++ b/pages/popup/toggle.css
@ -0,0 +1,151 @@
+/**
+ * Toggles
+ */
+
+#protection-toggle, #manipulateDOM-toggle, #google-fonts-toggle {
+    cursor: pointer;
+    float: right;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+.toggle {
+    cursor: pointer;
+}
+
+button.toggle {
+    background-color: transparent;
+    border: 0;
+    font: inherit;
+    padding: 0;
+}
+
+.toggle__input {
+    opacity: 0;
+    position: absolute;
+}
+
+.toggle__display {
+    align-items: center;
+    background-color: #b54b4b;
+    border-radius: 100vw;
+    box-sizing: content-box;
+    display: inline-flex;
+    height: 24px;
+    justify-content: space-around;
+    position: relative;
+    transition: 0.1s;
+    width: 44px;
+}
+
+.toggle__display::before {
+    background-color: white;
+    border-radius: 50%;
+    box-sizing: border-box;
+    content: "";
+    height: 20px;
+    left: 2px;
+    position: absolute;
+    top: 50%;
+    transform: translate(0, -50%);
+    transition: inherit;
+    width: 20px;
+    will-change: transform;
+    z-index: 2;
+}
+
+.toggle__display:hover {
+    background-color: #7e0000;
+}
+
+
+.toggle:focus .toggle__display,
+.toggle__input:focus + .toggle__display {
+    outline: 1px dotted #212121;
+    outline: 1px auto -webkit-focus-ring-color;
+    outline-offset: 2px;
+}
+
+.toggle:focus,
+.toggle:focus:not(:focus-visible) .toggle__display,
+.toggle__input:focus:not(:focus-visible) + .toggle__display {
+    outline: 0;
+}
+
+.toggle[aria-pressed="true"] .toggle__display,
+.toggle__input:checked + .toggle__display {
+    background-color: #6bb798;
+}
+
+.toggle__input:checked + .toggle__display:hover {
+    background-color: #4b806a;
+}
+
+.toggle[aria-pressed="true"] .toggle__display::before,
+.toggle__input:checked + .toggle__display::before {
+    transform: translate(100%, -50%);
+}
+
+.toggle[disabled] .toggle__display,
+.toggle__input:disabled + .toggle__display {
+    background-color: lightgray;
+    cursor: not-allowed;
+}
+
+[dir="rtl"] .toggle__display::before {
+    left: auto;
+    right: 2px;
+}
+
+[dir="rtl"] .toggle[aria-pressed="true"] + .toggle__display::before,
+[dir="rtl"] .toggle__input:checked + .toggle__display::before {
+    transform: translate(-100%, -50%);
+}
+
+.toggle__icon {
+    color: inherit;
+    display: inline-block;
+    fill: currentcolor;
+    height: 1em;
+    overflow: hidden;
+    vertical-align: middle;
+    width: 1em;
+}
+
+.toggle__icon--cross {
+    color: #f0f0f0;
+    font-size: 85%;
+}
+
+.toggle__icon--checkmark {
+    color: #f0f0f0;
+}
+
+*,
+::before,
+::after {
+    box-sizing: border-box;
+}
+
+
+@media (prefers-color-scheme: dark) {
+    .toggle__icon--checkmark,
+    .toggle__icon--cross {
+        color: #323232;
+    }
+    .toggle__display::before {
+        background-color: #323232;
+    }
+
+    .toggle[disabled] .toggle__display,
+    .toggle__input:disabled + .toggle__display {
+        background-color: #777;
+        cursor: not-allowed;
+    }
+
+    .slider-disabled::before {
+        background-color: #323232;
+    }
+}
--- a/pages/updates/updates.html
+++ b/pages/updates/updates.html
@ -25,9 +25,9 @@
                        <h2>New in LocalCDN:</h2>
                    </div>
                    <div class="release-notes-area">
-                        <p></p>
+                        <p>Improved</p>
                        <ul>
-                            <li></li>
+                            <li>Popup accessibility improved (<a href="https://codeberg.org/nobody/LocalCDN/issues/1041">#1041</a>)</li>
                        </ul>
                    </div>
                    <div id="generator-section">