Improve accessibility

- Increase the constrast for links, per LightHouse analysis. - Add support for disabling syntax coloring in example text blocks. This can be controlled from the menu.
2019-03-09 11:55:06 -08:00 · 2019-03-09 11:55:06 -08:00 · 373916fcfa
parent bd68f64934
commit 373916fcfa
13 changed files with 74 additions and 19 deletions
--- a/generated/css/all.css
+++ b/generated/css/all.css
--- a/generated/js/all.min.js
+++ b/generated/js/all.min.js
--- a/generated/js/all.min.js.map
+++ b/generated/js/all.min.js.map
--- a/generated/js/themes_init.min.js
+++ b/generated/js/themes_init.min.js
@ -1,3 +1,3 @@
-"use strict";const darkThemeClass="dark-theme",darkTheme="Dark Theme",darkThemeItem="dark-theme-item",lightTheme="Light Theme",lightThemeItem="light-theme-item",styleCookie="style";function applyStyleSheet(a){a===darkTheme?document.body.classList.add(darkThemeClass):document.body.classList.remove(darkThemeClass);let b=document.getElementById(lightThemeItem);b&&(a===darkTheme?b.classList.remove(active):b.classList.add(active)),b=document.getElementById(darkThemeItem),b&&(a===darkTheme?b.classList.add(active):b.classList.remove(active))}function readCookie(a){const b=a+"=",d=document.cookie.split(";");for(let e,c=0;c<d.length;c++){for(e=d[c];" "===e.charAt(0);)e=e.substring(1,e.length);if(0===e.indexOf(b)){let a=e.substring(b.length,e.length);return"light"===a?a=lightTheme:"dark"===a&&(a=darkTheme),a}}return null}let cookieValue=readCookie(styleCookie);applyStyleSheet(cookieValue);
+"use strict";const darkThemeClass="dark-theme",darkTheme="Dark Theme",darkThemeItem="dark-theme-item",lightTheme="Light Theme",lightThemeItem="light-theme-item",styleCookie="style";function applyStyleSheet(a){"light"===a?a=lightTheme:"dark"===a&&(a=darkTheme),a===darkTheme?document.body.classList.add(darkThemeClass):document.body.classList.remove(darkThemeClass);let b=document.getElementById(lightThemeItem);b&&(a===darkTheme?b.classList.remove(active):b.classList.add(active)),b=document.getElementById(darkThemeItem),b&&(a===darkTheme?b.classList.add(active):b.classList.remove(active))}function readCookie(a){const b=a+"=",d=document.cookie.split(";");for(let e,c=0;c<d.length;c++){for(e=d[c];" "===e.charAt(0);)e=e.substring(1,e.length);if(0===e.indexOf(b))return e.substring(b.length,e.length)}return null}let cookieValue=readCookie(styleCookie);applyStyleSheet(cookieValue);

 //# sourceMappingURL=themes_init.min.js.map
--- a/generated/js/themes_init.min.js.map
+++ b/generated/js/themes_init.min.js.map
@ -1 +1 @@
-{"version":3,"sources":["../../src/js/themes_init.js"],"names":[],"mappings":"AAAA,a,KAEM,CAAA,cAAc,CAAG,Y,CACjB,SAAS,CAAG,Y,CACZ,aAAa,CAAG,iB,CAChB,UAAU,CAAG,a,CACb,cAAc,CAAG,kB,CACjB,WAAW,CAAG,O,CAEpB,QAAS,CAAA,eAAT,CAAyB,CAAzB,CAAgC,CACxB,CAAK,GAAK,SADc,CAExB,QAAQ,CAAC,IAAT,CAAc,SAAd,CAAwB,GAAxB,CAA4B,cAA5B,CAFwB,CAIxB,QAAQ,CAAC,IAAT,CAAc,SAAd,CAAwB,MAAxB,CAA+B,cAA/B,CAJwB,CAS5B,GAAI,CAAA,CAAI,CAAG,QAAQ,CAAC,cAAT,CAAwB,cAAxB,CAAX,CACI,CAVwB,GAWpB,CAAK,GAAK,SAXU,CAYpB,CAAI,CAAC,SAAL,CAAe,MAAf,CAAsB,MAAtB,CAZoB,CAcpB,CAAI,CAAC,SAAL,CAAe,GAAf,CAAmB,MAAnB,CAdoB,EAkB5B,CAAI,CAAG,QAAQ,CAAC,cAAT,CAAwB,aAAxB,CAlBqB,CAmBxB,CAnBwB,GAoBpB,CAAK,GAAK,SApBU,CAqBpB,CAAI,CAAC,SAAL,CAAe,GAAf,CAAmB,MAAnB,CArBoB,CAuBpB,CAAI,CAAC,SAAL,CAAe,MAAf,CAAsB,MAAtB,CAvBoB,CA0B/B,CAED,QAAS,CAAA,UAAT,CAAoB,CAApB,CAA0B,MAChB,CAAA,CAAM,CAAG,CAAI,CAAG,GADA,CAEhB,CAAE,CAAG,QAAQ,CAAC,MAAT,CAAgB,KAAhB,CAAsB,GAAtB,CAFW,CAGtB,IAAK,GACG,CAAA,CADH,CAAI,CAAC,CAAG,CAAb,CAAgB,CAAC,CAAG,CAAE,CAAC,MAAvB,CAA+B,CAAC,EAAhC,CAAoC,KAC5B,CAD4B,CACxB,CAAE,CAAC,CAAD,CADsB,CAET,GAAhB,GAAA,CAAC,CAAC,MAAF,CAAS,CAAT,CAFyB,EAG5B,CAAC,CAAG,CAAC,CAAC,SAAF,CAAY,CAAZ,CAAe,CAAC,CAAC,MAAjB,CAAJ,CAGJ,GAA0B,CAAtB,GAAA,CAAC,CAAC,OAAF,CAAU,CAAV,CAAJ,CAA6B,CACzB,GAAI,CAAA,CAAM,CAAG,CAAC,CAAC,SAAF,CAAY,CAAM,CAAC,MAAnB,CAA2B,CAAC,CAAC,MAA7B,CAAb,CASA,MANe,OAAX,GAAA,CAMJ,CALI,CAAM,CAAG,UAKb,CAJsB,MAAX,GAAA,CAIX,GAHI,CAAM,CAAG,SAGb,EAAO,CACV,CACJ,CACD,MAAO,KACV,CAED,GAAI,CAAA,WAAW,CAAG,UAAU,CAAC,WAAD,CAA5B,CACA,eAAe,CAAC,WAAD,C","file":"themes_init.min.js","sourcesContent":["\"use strict\";\r\rconst darkThemeClass = 'dark-theme';\rconst darkTheme = 'Dark Theme';\rconst darkThemeItem = 'dark-theme-item';\rconst lightTheme = 'Light Theme';\rconst lightThemeItem = 'light-theme-item';\rconst styleCookie = 'style';\r\rfunction applyStyleSheet(title) {\r    if (title === darkTheme) {\r        document.body.classList.add(darkThemeClass);\r    } else {\r        document.body.classList.remove(darkThemeClass);\r    }\r\r    // set the active theme menu item\r\r    let item = document.getElementById(lightThemeItem);\r    if (item) {\r        if (title === darkTheme) {\r            item.classList.remove(active);\r        } else {\r            item.classList.add(active);\r        }\r    }\r\r    item = document.getElementById(darkThemeItem);\r    if (item) {\r        if (title === darkTheme) {\r            item.classList.add(active);\r        } else {\r            item.classList.remove(active);\r        }\r    }\r}\r\rfunction readCookie(name) {\r    const nameEQ = name + \"=\";\r    const ca = document.cookie.split(';');\r    for (let i = 0; i < ca.length; i++) {\r        let c = ca[i];\r        while (c.charAt(0) === ' ') {\r            c = c.substring(1, c.length);\r        }\r\r        if (c.indexOf(nameEQ) === 0) {\r            let result = c.substring(nameEQ.length, c.length);\r\r            // convert legacy cookie values\r            if (result === \"light\") {\r                result = lightTheme;\r            } else if (result === \"dark\") {\r                result = darkTheme;\r            }\r\r            return result;\r        }\r    }\r    return null;\r}\r\rlet cookieValue = readCookie(styleCookie);\rapplyStyleSheet(cookieValue);\r"]}
+{"version":3,"sources":["../../src/js/themes_init.js"],"names":[],"mappings":"AAAA,a,KAEM,CAAA,cAAc,CAAG,Y,CACjB,SAAS,CAAG,Y,CACZ,aAAa,CAAG,iB,CAChB,UAAU,CAAG,a,CACb,cAAc,CAAG,kB,CACjB,WAAW,CAAG,O,CAEpB,QAAS,CAAA,eAAT,CAAyB,CAAzB,CAAgC,CAEd,OAAV,GAAA,CAFwB,CAGxB,CAAK,CAAG,UAHgB,CAIP,MAAV,GAAA,CAJiB,GAKxB,CAAK,CAAG,SALgB,EAQxB,CAAK,GAAK,SARc,CASxB,QAAQ,CAAC,IAAT,CAAc,SAAd,CAAwB,GAAxB,CAA4B,cAA5B,CATwB,CAWxB,QAAQ,CAAC,IAAT,CAAc,SAAd,CAAwB,MAAxB,CAA+B,cAA/B,CAXwB,CAgB5B,GAAI,CAAA,CAAI,CAAG,QAAQ,CAAC,cAAT,CAAwB,cAAxB,CAAX,CACI,CAjBwB,GAkBpB,CAAK,GAAK,SAlBU,CAmBpB,CAAI,CAAC,SAAL,CAAe,MAAf,CAAsB,MAAtB,CAnBoB,CAqBpB,CAAI,CAAC,SAAL,CAAe,GAAf,CAAmB,MAAnB,CArBoB,EAyB5B,CAAI,CAAG,QAAQ,CAAC,cAAT,CAAwB,aAAxB,CAzBqB,CA0BxB,CA1BwB,GA2BpB,CAAK,GAAK,SA3BU,CA4BpB,CAAI,CAAC,SAAL,CAAe,GAAf,CAAmB,MAAnB,CA5BoB,CA8BpB,CAAI,CAAC,SAAL,CAAe,MAAf,CAAsB,MAAtB,CA9BoB,CAiC/B,CAED,QAAS,CAAA,UAAT,CAAoB,CAApB,CAA0B,MAChB,CAAA,CAAM,CAAG,CAAI,CAAG,GADA,CAEhB,CAAE,CAAG,QAAQ,CAAC,MAAT,CAAgB,KAAhB,CAAsB,GAAtB,CAFW,CAGtB,IAAK,GACG,CAAA,CADH,CAAI,CAAC,CAAG,CAAb,CAAgB,CAAC,CAAG,CAAE,CAAC,MAAvB,CAA+B,CAAC,EAAhC,CAAoC,KAC5B,CAD4B,CACxB,CAAE,CAAC,CAAD,CADsB,CAET,GAAhB,GAAA,CAAC,CAAC,MAAF,CAAS,CAAT,CAFyB,EAG5B,CAAC,CAAG,CAAC,CAAC,SAAF,CAAY,CAAZ,CAAe,CAAC,CAAC,MAAjB,CAAJ,CAGJ,GAA0B,CAAtB,GAAA,CAAC,CAAC,OAAF,CAAU,CAAV,CAAJ,CACI,MAAO,CAAA,CAAC,CAAC,SAAF,CAAY,CAAM,CAAC,MAAnB,CAA2B,CAAC,CAAC,MAA7B,CAEd,CACD,MAAO,KACV,CAED,GAAI,CAAA,WAAW,CAAG,UAAU,CAAC,WAAD,CAA5B,CACA,eAAe,CAAC,WAAD,C","file":"themes_init.min.js","sourcesContent":["\"use strict\";\r\rconst darkThemeClass = 'dark-theme';\rconst darkTheme = 'Dark Theme';\rconst darkThemeItem = 'dark-theme-item';\rconst lightTheme = 'Light Theme';\rconst lightThemeItem = 'light-theme-item';\rconst styleCookie = 'style';\r\rfunction applyStyleSheet(theme) {\r    // convert legacy cookie values\r    if (theme === \"light\") {\r        theme = lightTheme;\r    } else if (theme === \"dark\") {\r        theme = darkTheme;\r    }\r\r    if (theme === darkTheme) {\r        document.body.classList.add(darkThemeClass);\r    } else {\r        document.body.classList.remove(darkThemeClass);\r    }\r\r    // set the active theme menu item\r\r    let item = document.getElementById(lightThemeItem);\r    if (item) {\r        if (theme === darkTheme) {\r            item.classList.remove(active);\r        } else {\r            item.classList.add(active);\r        }\r    }\r\r    item = document.getElementById(darkThemeItem);\r    if (item) {\r        if (theme === darkTheme) {\r            item.classList.add(active);\r        } else {\r            item.classList.remove(active);\r        }\r    }\r}\r\rfunction readCookie(name) {\r    const nameEQ = name + \"=\";\r    const ca = document.cookie.split(';');\r    for (let i = 0; i < ca.length; i++) {\r        let c = ca[i];\r        while (c.charAt(0) === ' ') {\r            c = c.substring(1, c.length);\r        }\r\r        if (c.indexOf(nameEQ) === 0) {\r            return c.substring(nameEQ.length, c.length);\r        }\r    }\r    return null;\r}\r\rlet cookieValue = readCookie(styleCookie);\rapplyStyleSheet(cookieValue);\r"]}
--- a/i18n/en.toml
+++ b/i18n/en.toml
@ -177,3 +177,6 @@ other = "Switch to Chinese"

 [advisory]
 other = "-"
+
+[syntax_coloring]
+other = "Color Examples"
--- a/i18n/zh.toml
+++ b/i18n/zh.toml
@ -177,3 +177,6 @@ other = "切换到英文版"

 [advisory]
 other = "中文内容由 ServiceMesher 社区维护，部分文档可能稍微滞后于英文版本，同步工作持续进行中"
+
+[syntax_coloring]
+other = "Color Examples"
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@ -21,7 +21,7 @@
    </div>

    <div class="info">
-        <p class="copyright" role="contentinfo">
+        <p class="copyright">
            {{ $advisory := (i18n "advisory") }}
            {{ if ne $advisory "-" }}
                {{ printf "%s" $advisory }}<br>
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@ -52,8 +52,8 @@
                {{ end }}
            {{ end }}

-            <div class="menu" id="gearDropdown" style="white-space: nowrap">
-                <button class="menu-trigger" title='{{ i18n "options_menu" }}' aria-label="Tools" aria-haspopup="true" aria-expanded="false">
+            <div class="menu">
+                <button id="gearDropdown" class="menu-trigger" title='{{ i18n "options_menu" }}' aria-label="Options and Settings" aria-haspopup="true" aria-expanded="false">
                    {{ partial "icon.html" "gear" }}
                </button>

@ -66,6 +66,10 @@
                    <a tabindex="0" class="active" id="light-theme-item">{{ i18n "light_theme" }}</a>
                    <a tabindex="0" id="dark-theme-item">{{ i18n "dark_theme" }}</a>

+                    <div></div>
+
+                    <a tabindex="0" id="syntax-coloring-item">{{ i18n "syntax_coloring" }}</a>
+
                    {{ if not .Site.Data.args.archive }}
                        <div></div>

--- a/layouts/partials/toc.html
+++ b/layouts/partials/toc.html
@ -56,7 +56,7 @@

                {{ if $page.Scratch.Get "seeAlso" }}
                    {{ with $related }}
-                        <li><a href="#see-also">{{ i18n "see_also" }}</a></li>
+                        <li role="none"><a role="treeitem" href="#see-also">{{ i18n "see_also" }}</a></li>
                    {{ end }}
                {{ end }}
            </ul>
--- a/src/js/codeBlocks.js
+++ b/src/js/codeBlocks.js
@ -1,8 +1,12 @@
 "use strict";

+let syntaxColoring = true;
+
 // All the voodoo needed to support our fancy code blocks
 function handleCodeBlocks() {
    const toolbarShow = 'toolbar-show';
+    const syntaxColoringCookie = 'syntax-coloring';
+    const syntaxColoringItem = 'syntax-coloring-item';

    // Add a toolbar to all PRE blocks
    function attachToolbar(pre) {
@ -142,7 +146,11 @@ function handleCodeBlocks() {

                if (line.startsWith("$ ")) {
                    if (tmp !== "") {
-                        cmd += "$ " + Prism.highlight(tmp, Prism.languages["bash"], "bash") + "\n";
+                        if (syntaxColoring) {
+                            cmd += "$ " + Prism.highlight(tmp, Prism.languages["bash"], "bash") + "\n";
+                        } else {
+                            cmd += "$ " + tmp + "\n";
+                        }
                    }

                    tmp = line.slice(2);
@ -171,7 +179,11 @@ function handleCodeBlocks() {
            }

            if (tmp !== "") {
-                cmd += "$ " + Prism.highlight(tmp, Prism.languages["bash"], "bash") + "\n";
+                if (syntaxColoring) {
+                    cmd += "$ " + Prism.highlight(tmp, Prism.languages["bash"], "bash") + "\n";
+                } else {
+                    cmd += "$ " + tmp + "\n";
+                }
            }

            if (cmd !== "") {
@ -194,7 +206,9 @@ function handleCodeBlocks() {
                    let prefix = "language-command-output-as-";
                    if (cl.startsWith(prefix)) {
                        let lang = cl.substr(prefix.length);
-                        output = Prism.highlight(output, Prism.languages[lang], lang);
+                        if (syntaxColoring) {
+                            output = Prism.highlight(output, Prism.languages[lang], lang);
+                        }
                    } else {
                        output = escapeHTML(output);
                    }
@ -206,12 +220,16 @@ function handleCodeBlocks() {
                code.classList.remove(cl);
                code.classList.add("command-output");
            } else {
-                // someone probably forgot to start a block with $, so let's just treat the whole thing as being a `bash` block
-                Prism.highlightElement(code, false);
+                if (syntaxColoring) {
+                    // someone probably forgot to start a block with $, so let's just treat the whole thing as being a `bash` block
+                    Prism.highlightElement(code, false);
+                }
            }
        } else {
-            // this isn't one of our special code blocks, so handle normally
-            Prism.highlightElement(code, false);
+            if (syntaxColoring) {
+                // this isn't one of our special code blocks, so handle normally
+                Prism.highlightElement(code, false);
+            }
        }
    }

@ -223,7 +241,9 @@ function handleCodeBlocks() {
                .then(response => response.text())
                .then(data => {
                    elem.firstChild.textContent = data;
-                    Prism.highlightElement(elem.firstChild, false);
+                    if (syntaxColoring) {
+                        Prism.highlightElement(elem.firstChild, false);
+                    }
                });
        }

@ -232,6 +252,31 @@ function handleCodeBlocks() {
        }
    }

+    function handleSyntaxColoring() {
+        const cookieValue = readCookie(syntaxColoringCookie);
+        if (cookieValue === 'true') {
+            syntaxColoring = true;
+        } else if (cookieValue === 'false') {
+            syntaxColoring = false;
+        }
+
+        let item = document.getElementById(syntaxColoringItem);
+        if (item) {
+            if (syntaxColoring) {
+                item.classList.add(active);
+            } else {
+                item.classList.remove(active);
+            }
+        }
+
+        listen(getById(syntaxColoringItem), click, () => {
+            createCookie(syntaxColoringCookie, !syntaxColoring);
+            location.reload();
+        });
+    }
+
+    handleSyntaxColoring();
+
    queryAll(document, 'pre').forEach(pre => {
        attachToolbar(pre);
        applySyntaxColoring(pre);
--- a/src/js/themes_init.js
+++ b/src/js/themes_init.js
@ -1 +1 @@
-"use strict";

const darkThemeClass = 'dark-theme';
const darkTheme = 'Dark Theme';
const darkThemeItem = 'dark-theme-item';
const lightTheme = 'Light Theme';
const lightThemeItem = 'light-theme-item';
const styleCookie = 'style';

function applyStyleSheet(title) {
    if (title === darkTheme) {
        document.body.classList.add(darkThemeClass);
    } else {
        document.body.classList.remove(darkThemeClass);
    }

    // set the active theme menu item

    let item = document.getElementById(lightThemeItem);
    if (item) {
itle) {
    if (title === darkTheme) {
            item.classList.remove(active);
        } else {
            item.classList.add(active);
        }
    }

    item = document.getElementById(darkThemeItem);
    if (item) {
itle) {
    if (title === darkTheme) {
            item.classList.add(active);
        } else {
            item.classList.remove(active);
        }
    }
}

function readCookie(name) {
    const nameEQ = name + "=";
    const ca = document.cookie.split(';');
    for (let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) === ' ') {
            c = c.substring(1, c.length);
        }

        if (c.indexOf(nameEQ) === 0) {
            let result = c.substring(nameEQ.length, c.length);

            // convert legacy cookie values
            if (result === "light") {
        document.body.classList.add(darkThemeClass);
            } else if (result === "dark") {
                result = darkTheme;
            }

            return result;
        }
    }
    return null;
}

let cookieValue = readCookie(styleCookie);
applyStyleSheet(cookieValue);
+"use strict";

const darkThemeClass = 'dark-theme';
const darkTheme = 'Dark Theme';
const darkThemeItem = 'dark-theme-item';
const lightTheme = 'Light Theme';
const lightThemeItem = 'light-theme-item';
const styleCookie = 'style';

function applyStyleSheet(theme) {
    // convert legacy cookie values
    if (theme === "light") {
        theme = lightTheme;
    } else if (theme === "dark") {
        theme = darkTheme;
    }

    if (theme === darkTheme) {
        document.body.classList.add(darkThemeClass);
    } else {
        document.body.classList.remove(darkThemeClass);
    }

    // set the active theme menu item

    let item = document.getElementById(lightThemeItem);
    if (item) {
    } else {
    if (title === darkTheme) {
            item.classList.remove(active);
        } else {
            item.classList.add(active);
        }
    }

    item = document.getElementById(darkThemeItem);
    if (item) {
    } else {
    if (title === darkTheme) {
            item.classList.add(active);
        } else {
            item.classList.remove(active);
        }
    }
}

function readCookie(name) {
    const nameEQ = name + "=";
    const ca = document.cookie.split(';');
    for (let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) === ' ') {
            c = c.substring(1, c.length);
        }

        if (c.indexOf(nameEQ) === 0) {
    } else {
        document.body.classList.add(darkThemeClass);
;
        }
    }
    return null;
}

let cookieValue = readCookie(styleCookie);
applyStyleSheet(cookieValue);
--- a/src/sass/themes/_light-theme.scss
+++ b/src/sass/themes/_light-theme.scss
@ -5,7 +5,7 @@ body {
    --textCodeColor: #d14;
    --disabledTextColor: #{lighten(#535f61, 50%)};

-    --linkColor: #469Bdd;
+    --linkColor: #306Bcc;
    --linkHoverColor: #1d67a0;
    --linkDisabledColor: #CCCCCC;
    --linkActiveColor: #b05464;