diff options
| author | Martin Fischer <martin@push-f.com> | 2021-12-26 20:17:51 +0100 |
|---|---|---|
| committer | Martin Fischer <martin@push-f.com> | 2021-12-26 21:56:35 +0100 |
| commit | 9cd171ec763b58e607f8daf8cda96cc9d6269ce4 (patch) | |
| tree | 674a257cbf7799886f6ed1f5aa69ac60a18078fd /doc | |
| parent | 971261c49b895f8b145f6d3e8b5f5c30e76a4ed8 (diff) | |
| download | pygments-git-9cd171ec763b58e607f8daf8cda96cc9d6269ce4.tar.gz | |
demo: display warning for styles with poor contrasts
Diffstat (limited to 'doc')
| -rw-r--r-- | doc/_static/demo.css | 4 | ||||
| -rw-r--r-- | doc/_static/demo.js | 7 | ||||
| -rw-r--r-- | doc/_templates/demo.html | 3 |
3 files changed, 13 insertions, 1 deletions
diff --git a/doc/_static/demo.css b/doc/_static/demo.css index 27751d68..ec4468b3 100644 --- a/doc/_static/demo.css +++ b/doc/_static/demo.css @@ -65,3 +65,7 @@ white-space: pre; background: #d9d9d9; } + +#contrast-warning { + color: darkred; +} diff --git a/doc/_static/demo.js b/doc/_static/demo.js index c81f7958..b9369878 100644 --- a/doc/_static/demo.js +++ b/doc/_static/demo.js @@ -13,6 +13,7 @@ const copyLink = document.getElementById("copylink"); const style = document.getElementById("css-style"); const textarea = document.getElementById("code"); const uriTooLongMsg = document.getElementById('uri-too-long'); +const contrastWarning = document.getElementById('contrast-warning'); const qvars = Object.fromEntries(new URLSearchParams(window.location.search)); if (qvars.lexer) { @@ -24,6 +25,7 @@ if (qvars.code !== undefined) { } if (qvars.style !== undefined) { styleSelect.value = qvars.style; + updateContrastWarning(); } if (qvars.formatter !== undefined) { formatterSelect.value = qvars.formatter; @@ -32,8 +34,13 @@ if (qvars.formatter !== undefined) { styleSelect.addEventListener('change', () => { style.textContent = styles[styleSelect.value]; updateCopyLink(); + updateContrastWarning(); }); +function updateContrastWarning() { + contrastWarning.hidden = styleSelect.selectedOptions[0].dataset.wcag == 'aa'; +} + let styles; const highlightWorker = new Worker("/_static/demo-worker.js"); diff --git a/doc/_templates/demo.html b/doc/_templates/demo.html index 9c90348f..9d35eda9 100644 --- a/doc/_templates/demo.html +++ b/doc/_templates/demo.html @@ -57,7 +57,7 @@ <select id="style"> <optgroup label="Good contrast"> {% for style in styles_aa %} - <option>{{style.name}}</option> + <option data-wcag=aa>{{style.name}}</option> {% endfor %} </optgroup> <optgroup label="Suboptimal contrast"> @@ -67,6 +67,7 @@ </optgroup> </select> </label> + <span id=contrast-warning hidden>style may have poor contrast</span> <div class=flex-grow-1></div> <button type="button" onclick="highlight()" id="hlbtn" disabled>Loading Python...</button> </div> |