Fix settings a11y

nbconvert_html5/pytest_axe.py

@@ -95,7 +95,7 @@ def from_violations(cls, data):
         for violation in (violations := data.get("violations")):
             for node in violation["nodes"]:
                 for exc in node["any"]:
-                    out.append(cls.new(**exc, target=["target"]))
+                    out.append(cls.new(**exc, target=node["target"]))
         return exceptiongroup.ExceptionGroup(f"{len(violations)} accessibility violations", out)
 
 

nbconvert_html5/templates/a11y/settings.html.j2

@@ -27,8 +27,8 @@
         </fieldset>
         <fieldset id="nb-table-font-group">
             <legend>font settings</legend>
-            <label aria-hidden="true" for="nb-table-font-size-group">font size</label>
-            <select name="font-size" id="nb-table-font-size-group">
+            <label aria-hidden="true" id="nb-table-font-size-group-label">font size</label>
+            <select name="font-size" id="nb-table-font-size-group" aria-labelledby="nb-table-font-size-group-label">
                 <option value="xx-small">xx-small</option>
                 <option value="x-small">x-small</option>
                 <option value="small">small</option>

nbconvert_html5/templates/a11y/settings.js

@@ -74,6 +74,7 @@ function setStyle(msg) {
     activityLog(msg);
 }
 function changeFont() {
+    document.forms.settings["font-size"].value;
     setStyle(`font size change`);
 }
 function changeFontFamily() {
@@ -127,7 +128,9 @@ document.querySelectorAll("table[role=grid]").forEach(
 document.forms.settings.elements["color-scheme"].forEach(
     (x) => { x.addEventListener("change", toggleColorScheme) }
 );
-document.forms.settings.elements["font-size"].addEventListener("change", changeFont);
+document.forms.settings.elements["font-size"].addEventListener("change", (x) => {
+    setStyle("change font size");
+});
 document.forms.settings.elements["font-family"].forEach(
     (x) => { x.addEventListener("change", changeFontFamily) }
 );

nbconvert_html5/templates/a11y/style.css

@@ -9,7 +9,7 @@
 }
 
 body {
-    font-size: --var(--nb-font-size);
+    font-size: var(--nb-font-size);
     overflow-x: hidden;
     accent-color: var(--nb-accent-color);
     margin-left: var(--nb-margin);

tests/test_axe.py

@@ -1,6 +1,9 @@
-import contextlib
-import dataclasses
-from json import dumps, loads
+"""axe accessibility testing on exported nbconvert scripts
+
+* test the accessibility of exported notebooks
+* test the accessibility of nbconvert-a11y dialogs
+"""
+
 from logging import getLogger
 from pathlib import Path
 
@@ -26,7 +29,7 @@
 NEEDS_WORK = "state needs work"
 
 
-aa_config_notebooks = mark.parametrize(
+config_notebooks_aa = mark.parametrize(
     "config,notebook",
     [
         param(
@@ -43,7 +46,7 @@
     ],
 )
 
-aaa_config_notebooks = mark.parametrize(
+config_notebooks_aaa = mark.parametrize(
     "config,notebook",
     [
         param(
@@ -72,14 +75,14 @@
 }
 
 
-@aa_config_notebooks
+@config_notebooks_aa
 def test_axe_aa(axe, config, notebook):
     target = get_target_html(config, notebook)
     audit = AUDIT / target.with_suffix(".json").name
     axe(Path.as_uri(target)).dump(audit).raises()
 
 
-@aaa_config_notebooks
+@config_notebooks_aaa
 def test_axe_aaa(axe, config, notebook):
     target = get_target_html(config, notebook)
     audit = AUDIT / target.with_suffix(".json").name
@@ -114,7 +117,7 @@ def go(url):
 @mark.parametrize(
     "dialog",
     [
-        param("[aria-controls=nb-settings]", marks=mark.xfail(reason=NEEDS_WORK)),
+        "[aria-controls=nb-settings]",
         "[aria-controls=nb-help]",
         "[aria-controls=nb-metadata]",
         "[aria-controls=nb-audit]",
@@ -124,6 +127,23 @@ def go(url):
     ],
 )
 def test_dialogs(axe_page, config, notebook, dialog):
+    """test the controls in dialogs"""
+    # dialogs are not tested in the baseline axe test. they need to be active to test.
+    # these tests activate the dialogs to assess their accessibility with the active dialogs.
+
     page = axe_page(get_target_html(config, notebook).absolute().as_uri())
     page.click(dialog)
     run_axe_test(page).raises()
+
+
+@config_notebooks_dialog
+def test_settings_font_size(axe_page, config, notebook):
+    """test that the settings make their expected changes"""
+    page = axe_page(get_target_html(config, notebook).absolute().as_uri())
+    font_size = lambda: page.evaluate(
+        """window.getComputedStyle(document.querySelector("body")).getPropertyValue("font-size")"""
+    )
+    assert font_size() == "16px"
+    page.click("[aria-controls=nb-settings]")
+    page.locator("#nb-table-font-size-group").select_option("xx-large")
+    assert font_size() == "32px", "font size not changed"