From 7aef2936ae483628af94f7312aee9c96eded2d4e Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Fri, 12 May 2023 17:59:34 -0700
Subject: [PATCH 01/36] add new accessible patterns

---
 .../templates/semantic-forms/base.html.j2     |  60 +++++-
 .../templates/semantic-forms/feed.html.j2     |  13 ++
 .../templates/semantic-forms/static/script.js |   2 +-
 .../templates/semantic-forms/static/style.css |  42 ++---
 .../templates/semantic-forms/table.html.j2    | 172 +++++-------------
 pyproject.toml                                |  11 +-
 6 files changed, 135 insertions(+), 165 deletions(-)
 create mode 100644 nbconvert_html5/templates/semantic-forms/feed.html.j2

diff --git a/nbconvert_html5/templates/semantic-forms/base.html.j2 b/nbconvert_html5/templates/semantic-forms/base.html.j2
index 35973bb6..59a540f6 100644
--- a/nbconvert_html5/templates/semantic-forms/base.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/base.html.j2
@@ -1,12 +1,6 @@
 {%- extends 'display_priority.j2' -%}
 {% from 'celltags.j2' import celltags %}
 
-{% block output %}
-<output form="{{ID}}" for="{{ID}}-source" role="document" class="output_area">
-{{ super() }}
-</output>
-{% endblock output %}
-
 {% block execute_result -%}
 {%- set extra_class="output_execute_result" -%}
 {% block data_priority scoped %}
@@ -178,3 +172,57 @@ var element = $('#{{ div_id }}');
 {%- endif %}
 {{ super() }}
 {%- endblock footer-%}
+
+
+
+{% macro cell_form(cell, nb) %}
+{% set count = nb["cells"].index(cell) +1%}
+{% set ID = "/cells/" + str(cell.id or count) %}
+<form id="{{ID}}" aria-label="Cell Source {{count}}">
+    {{cell_type_cell(cell)}}
+    <label>
+        <textarea name="source" id="{{ID}}/source" readonly>{{cell.source}}</textarea>
+    </label>
+</form>
+{{cell_toolbar(cell, ID)}}
+<output class="render" for="{{ID}}/source" form={{ID}} aria-hidden="{% if cell.cell_type == "markdown" %}false{% else %}true{% endif %}">
+    {% if cell.cell_type=="markdown" %}{{markdown(cell.source) | strip_files_prefix}}{% endif %}
+    {% if cell.cell_type=="code" %}{{ cell.source | highlight_code(metadata=cell.metadata) }}{% endif %}
+</output>
+<output form={{ID}} for="{{ID}}/source" name=execution_count id="{{ID}}/outputs">{{cell.execution_count or ""}}</output>
+<output form={{ID}} for="{{ID}}/source" name=outputs role=log>{{outputs_cell(cell, ID)}}</output>
+{% endmacro%}
+
+{% macro cell_type_cell(cell) %}
+{% set cell_type = cell.cell_type %}
+<label class="cell_type">
+    <select name="cell_type" disabled>
+        <option {% if cell_type=="code" %}selected{% endif %} value="code">code</option>
+        <option {% if cell_type=="markdown" %}selected{% endif %} value="markdown">markdown</option>
+        <option {% if cell_type=="raw" %}selected{% endif %} value="raw">raw</option>
+        <option {% if cell_type=="unknown" %}selected{% endif %} value="unknown">unknown</option>
+    </select>
+</label>
+{% endmacro %}
+
+{% macro outputs_cell(cell, ID) %}
+{% for i, output in enumerate(cell.outputs) %}
+{% block output scoped %}{% block output_prompt %}{% endblock %}{{super()}}{% endblock %}
+{% endfor %}
+{% endmacro %}
+
+
+{% macro cell_toolbar(cell, ID) %}
+<menu class="cell toolbar" hidden>
+    <input class="run" type="submit" form="{{ID}}" for="{{ID}}-source" value="run" title="run the cell"
+        tabindex="0">
+    <button onclick="document.querySelector('#{{ID}}-metadata').showModal()" title="show metadata">🛈</button>
+</menu>
+{% endmacro %}
+
+{% macro hide(x) %}{% if not x %}hidden{% endif %}{% endmacro %}
+
+
+{% macro highlight(body, type) %}
+{{markdown("```{{type}}\n" + json.dumps(nb.metadata, indent=2) + "\n```\n")}}
+{% endmacro %}
\ No newline at end of file
diff --git a/nbconvert_html5/templates/semantic-forms/feed.html.j2 b/nbconvert_html5/templates/semantic-forms/feed.html.j2
new file mode 100644
index 00000000..207282f9
--- /dev/null
+++ b/nbconvert_html5/templates/semantic-forms/feed.html.j2
@@ -0,0 +1,13 @@
+{%- extends 'semantic-forms/index.html.j2' -%}
+{% from 'mathjax.html.j2' import mathjax %}
+{% from 'jupyter_widgets.html.j2' import jupyter_widgets %}
+
+{% block body_loop %}
+<section role="feed">{{super()}}</section>
+{% endblock body_loop %}
+
+{% block any_cell %}
+<article class="cell {{cell.cell_type}} {{celltags(cell)}}">
+{{cell_form(cell, nb)}}
+</article>
+{% endblock any_cell %}
\ No newline at end of file
diff --git a/nbconvert_html5/templates/semantic-forms/static/script.js b/nbconvert_html5/templates/semantic-forms/static/script.js
index a05fe389..23a95e65 100644
--- a/nbconvert_html5/templates/semantic-forms/static/script.js
+++ b/nbconvert_html5/templates/semantic-forms/static/script.js
@@ -114,12 +114,12 @@ window.addEventListener('load', function () {
     slider.addEventListener("input", (event) => {
         var id = `#/cells/${event.target.value}`;
         event.target.nextElementSibling.value = event.target.value;
-        document.getElementById(id.substring(1)).scrollIntoView();
     });
 
     // the cell slider updates the page history
     slider.addEventListener("change", (event) => {
         var id = `#/cells/${event.target.value}`;
+        document.getElementById(id.substring(1)).scrollIntoView();
         history.replaceState({}, `Cell ${event.target.value}`, id);
     })
 
diff --git a/nbconvert_html5/templates/semantic-forms/static/style.css b/nbconvert_html5/templates/semantic-forms/static/style.css
index 39bc9e0a..d5f17be9 100644
--- a/nbconvert_html5/templates/semantic-forms/static/style.css
+++ b/nbconvert_html5/templates/semantic-forms/static/style.css
@@ -40,28 +40,25 @@ main>header details.nav {
 main>header {
     overflow: auto;
     opacity: .9;
-    position: sticky;
-    top: 0;
-    max-height: 100vh;
 }
 
-main > table.cells > thead {
+main > .cells > thead {
     display: none;
 }
 
-.static td.execution_count label:not(:empty):before {
+.static .execution_count label:not(:empty):before {
     content: "In: ";
 }
 
-table.cells {
+.cells {
     width: 100%;
 }
 
-tr.cell {
+.cell {
     display: grid;
 }
 
-tr.code.cell {
+.code.cell {
     grid-template-rows: 2rem 1rem auto auto;
     grid-template-columns: 5fr 95fr;
     justify-items: start;
@@ -71,22 +68,22 @@ tr.code.cell {
     width: 95vw;
 }
 
-tr.markdown.cell {
+.markdown.cell {
     grid-template-columns: 95fr 5fr;
     grid-template-areas: "source toolbar";
 }
 
-tr.cell>td.source {
+textarea.source {
     grid-area: source;
     width: 100%;
     overflow-x: auto;
 }
 
-tr.cell>td.cell_type {
+.cell>.cell_type {
     grid-area: cell_type;
 }
 
-tr.cell>td.outputs {
+.cell>.outputs {
     overflow-x: auto;
     grid-area: outputs;
     display: flex;
@@ -94,28 +91,29 @@ tr.cell>td.outputs {
     width: 100%;
 }
 
-tr.cell>td.toolbar {
+.cell>.toolbar {
     grid-area: toolbar;
 }
 
-tr.cell>td.execution_count {
+.cell>.execution_count {
     grid-area: execution_count;
 }
 
-td.source form textarea {
+textarea.source {
     width: 100%;
 }
 
-td.cell_type,
-tr.cell form label.cell_type,
-tr.markdown.cell td.outputs,
-tr.markdown.cell td.execution_count,
-.static td.toolbar,
+.cell_type,
+.cell label.cell_type,
+.markdown.cell .outputs,
+.markdown.cell .execution_count,
+.static .toolbar,
 .static input.run,
-.static tr.markdown.cell td.source form textarea {
+.static .markdown.cell textarea.source,
+.markdown fieldset.outputs {
     display: none;
 }
 
-td.source form textarea:focus~.render {
+.cell textarea.source:focus~.render {
     display: none;
 }
\ No newline at end of file
diff --git a/nbconvert_html5/templates/semantic-forms/table.html.j2 b/nbconvert_html5/templates/semantic-forms/table.html.j2
index f90c3c6c..3cd9d1fb 100644
--- a/nbconvert_html5/templates/semantic-forms/table.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/table.html.j2
@@ -1,136 +1,46 @@
-{%- extends 'semantic-forms/base.html.j2' -%}
+{%- extends 'semantic-forms/index.html.j2' -%}
 {% from 'mathjax.html.j2' import mathjax %}
 {% from 'jupyter_widgets.html.j2' import jupyter_widgets %}
 
-{%- block header -%}
-<!DOCTYPE html>
-<html lang="en">
 
-<head>
-    {%- block html_head -%}
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    {% set nb_title = nb.metadata.get('title', resources['metadata']['name']) | escape_html %}
-    <title>{{nb_title}}</title>
-    <meta name="color-scheme" content="light">
-    <meta name="description" content="">
-
-
-    {% block jupyter_widgets %}
-    {%- if "widgets" in nb.metadata -%}
-    <script src="{{ resources.require_js_url }}"></script>
-    {{ jupyter_widgets(resources.jupyter_widgets_base_url, resources.html_manager_semver_range,
-    resources.widget_renderer_url) }}
-    {%- endif -%}
-    {% endblock jupyter_widgets %}
-
-    {% block extra_css %}
-    {% endblock extra_css %}
-
-    {% for css in resources.inlining.css -%}
-    <style type="text/css">{{css}}</style>
-    {% endfor %}
-
-    {% block notebook_css %}
-    {{ resources.include_css("semantic-forms/static/style.css") }}
-    {% endblock notebook_css %}
-    
-    {%- block html_head_js_mathjax -%}
-    {{ mathjax(resources.mathjax_url) }}
-    {%- endblock html_head_js_mathjax -%}
-
-    {%- endblock html_head -%}
-</head>
-{%- endblock header -%}
-
-
-
-
-{%- block body_header -%}
-
-<body>
-    <header class="site">
-        <a class="visually-hidden" tabindex="0" href="#/cells">Skip to Main Content</a>
-        <a class="visually-hidden" tabindex="0" href="#site-settings-summary">Skip to Accessibility Settings</a>
-        <!-- search and site navigation would go here -->
-        <!-- links go to the original content -->
-    </header>
-    <main class="notebook static" aria-label="notebook" id="nb-main">
-        <header class="notebook" id="nb-header">
-            <details id="nb-nav" class="nav">
-                <summary id="nb-nav-summary"><span id="nb-nav-summary-name">{{resources.metadata.name}}.ipynb</span>
-                    Navigation</summary>
-                <form id="nb-nav-cells">
-                    <label for="nb-nav-cells-widget">Navigate to Cell</label>
-                    <input type="range" id="nb-nav-cells-widget" value="1" min="1" max="{{len(nb.cells)+1}}">
-                    <output></output>
-                </form>
-                <nav></nav>
-            </details>
-        </header>
-        <table class="notebook cells" aria-label="cells" aria-rowcount="{{len(nb.cells)}}">
-            <colgroup>
-                <col class="execution_count">
-                <col class="source">
-                <col class="outputs">
-                <col class="cell_type">
-                <col class="metadata">
-                <col class="toolbar">
-            </colgroup>
-            <thead>
-                <tr class="cell">
-                    <th scope="col">execution count</th>
-                    <th scope="col">source</th>
-                    <th scope="col">outputs</th>
-                    <th scope="col">cell type</th>
-                    <th scope="col">metadata</th>
-                    <th scope="col">toolbar</th>
-                </tr>
-            </thead>
-            <tbody id="/cells">
-                {%- endblock body_header -%}
-                {% block body_loop %}
-                {% for cell in nb.cells %}
-                {% block anycell scoped %}
-                {{cell_row(cell, nb, resources)}}
-                {% endblock anycell %}
-                {% endfor %}
-                {% endblock body_loop %}
-                {%- block body_footer -%}
-            </tbody>
-            <tfoot>
-                <td class="execution count"></td>
-                <td class="source"></td>
-                <td class="outputs"></td>
-                <td class="cell type"></td>
-                <td class="metadata"></td>
-                <td class="toolbar"></td>
-            </tfoot>
-        </table>
-        <footer id="nb-footer" class="notebook">
-            <details id="nb-metadata">
-                <summary>Metadata</summary>
-                <script id="/metadata" type="application/json">{{json.dumps(nb.metadata, indent=2)}}</script>
-            </details>
-        </footer>
-    </main>
-    <footer id="site-footer">
-        <!-- legal goes here -->
-        <details id="site-settings">
-            <summary id="site-settings-summary">Site Accessibility Settings</summary>
-        </details>
-    </footer>
-</body>
-{%- endblock body_footer -%}
-
-{% block footer %}
-{% block footer_js %}
-{{resources.include_js("semantic-forms/static/script.js")}}
-{% endblock footer_js %}
-{{ super() }}
-
-</html>
-{% endblock footer %}
+{% block body_loop %}
+<table class="notebook cells" aria-label="cells" aria-rowcount="{{len(nb.cells)}}">
+    <colgroup>
+        <col class="execution_count">
+        <col class="source">
+        <col class="outputs">
+        <col class="cell_type">
+        <col class="metadata">
+        <col class="toolbar">
+    </colgroup>
+    <thead>
+        <tr class="cell">
+            <th scope="col">execution count</th>
+            <th scope="col">source</th>
+            <th scope="col">outputs</th>
+            <th scope="col">cell type</th>
+            <th scope="col">metadata</th>
+            <th scope="col">toolbar</th>
+        </tr>
+    </thead>
+    <tbody id="/cells">
+    {{super()}}
+    </tbody>
+    <tfoot>
+        <td class="execution count"></td>
+        <td class="source"></td>
+        <td class="outputs"></td>
+        <td class="cell type"></td>
+        <td class="metadata"></td>
+        <td class="toolbar"></td>
+    </tfoot>
+</table>
+{% endblock body_loop %}
+
+
+{% block any_cell %}
+{{cell_row(cell, nb, resources)}}
+{% endblock any_cell %}
 
 {% macro highlight(body, type) %}
 {{markdown("```{{type}}\n" + json.dumps(nb.metadata, indent=2) + "\n```\n")}}
@@ -177,11 +87,11 @@
     <textarea readonly class="visually-hidden" name="source" id="{{ID}}-source" aria-hidden="false" autocomplete="off"
         autocorrect="off" placeholder="" spellcheck="default" rows="{{len(source.rstrip().splitlines())}}"
         aria-labelledby="{{ID}}-exec" wrap="soft">{{source}}</textarea>
-    <div class="render" role="document" aria-hidden="{% if cell.cell_type == "markdown" %}false{% else %}true{% endif
+    <output class="render" for="{{ID}}-source" aria-hidden="{% if cell.cell_type == "markdown" %}false{% else %}true{% endif
         %}">
         {% if cell.cell_type=="markdown" %}{{markdown(cell.source) | strip_files_prefix}}{% endif %}
         {% if cell.cell_type=="code" %}{{ cell.source | highlight_code(metadata=cell.metadata) }}{% endif %}
-    </div>
+    </output>
 </form>
 {% endmacro %}
 
diff --git a/pyproject.toml b/pyproject.toml
index 036bc44b..a2479072 100755
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -130,12 +130,13 @@ notebooks = [
     "user-tests/2-content/Imaging_Sky_Background_Estimation.ipynb",
 ]
 configurations = [
-    "tests/configurations/default.py",
-    "tests/configurations/contenteditable-code.py",
-    "tests/configurations/tabs-scroll-to-top.py",
-    "tests/configurations/tab-to-content-nav-high-contrast.py",
-    "tests/configurations/tab-to-code-nav-high-contrast.py",
+    # "tests/configurations/default.py",
+    # "tests/configurations/contenteditable-code.py",
+    # "tests/configurations/tabs-scroll-to-top.py",
+    # "tests/configurations/tab-to-content-nav-high-contrast.py",
+    # "tests/configurations/tab-to-code-nav-high-contrast.py",
     "tests/configurations/table-default.py",
+    # "tests/configurations/notebook-list.py",
 ]
 
 [tool.doit.tasks.convert]

From f9413fa93ebd63c6c5fde1f1a6a34237cc517be8 Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Fri, 12 May 2023 18:01:05 -0700
Subject: [PATCH 02/36] add templates for multiple conformations of notebooks

---
 .../templates/semantic-forms/forms.html.j2    | 61 +++++++++++++++++++
 .../templates/semantic-forms/index.html.j2    | 30 +++++++++
 .../templates/semantic-forms/ol.html.j2       | 13 ++++
 .../templates/semantic-forms/sections.html.j2 | 10 +++
 .../templates/semantic-forms/ul.html.j2       | 13 ++++
 5 files changed, 127 insertions(+)
 create mode 100644 nbconvert_html5/templates/semantic-forms/forms.html.j2
 create mode 100644 nbconvert_html5/templates/semantic-forms/index.html.j2
 create mode 100644 nbconvert_html5/templates/semantic-forms/ol.html.j2
 create mode 100644 nbconvert_html5/templates/semantic-forms/sections.html.j2
 create mode 100644 nbconvert_html5/templates/semantic-forms/ul.html.j2

diff --git a/nbconvert_html5/templates/semantic-forms/forms.html.j2 b/nbconvert_html5/templates/semantic-forms/forms.html.j2
new file mode 100644
index 00000000..33670a8d
--- /dev/null
+++ b/nbconvert_html5/templates/semantic-forms/forms.html.j2
@@ -0,0 +1,61 @@
+{%- extends 'semantic-forms/index.html.j2' -%}
+{% from 'mathjax.html.j2' import mathjax %}
+{% from 'jupyter_widgets.html.j2' import jupyter_widgets %}
+
+
+{% block any_cell %}
+{{cell_section(cell, nb, resources)}}
+{% endblock any_cell %}
+
+{% macro highlight(body, type) %}
+{{markdown("```{{type}}\n" + json.dumps(nb.metadata, indent=2) + "\n```\n")}}
+{% endmacro %}
+
+
+{% macro cell_section(cell, nb, resources={}) %}
+{% set count = nb.cells.index(cell) %}
+{% set ID = "/cells/" + str(cell.id or count) %}
+<form id="{{ID}}">
+    {{cell_type_cell(cell)}}
+    <label>
+        <textarea name="source" id="{{ID}}/source">{{cell.source}}</textarea>
+    </label>
+</form>
+{{cell_toolbar(cell, ID)}}
+<output class="render" for="{{ID}}/source" form={{ID}} aria-hidden="{% if cell.cell_type == "markdown" %}false{% else %}true{% endif %}">
+    {% if cell.cell_type=="markdown" %}{{markdown(cell.source) | strip_files_prefix}}{% endif %}
+    {% if cell.cell_type=="code" %}{{ cell.source | highlight_code(metadata=cell.metadata) }}{% endif %}
+</output>
+<output form={{ID}} for="{{ID}}/source" name=execution_count id="{{ID}}/outputs">{{cell.execution_count or ""}}</output>
+<output form={{ID}} for="{{ID}}/source" name=outputs role=log>{{outputs_cell(cell, ID)}}</output>
+{% endmacro %}
+
+
+{% macro cell_type_cell(cell) %}
+{% set cell_type = cell.cell_type %}
+<label class="cell_type">
+    <select name="cell_type" disabled>
+        <option {% if cell_type=="code" %}selected{% endif %} value="code">code</option>
+        <option {% if cell_type=="markdown" %}selected{% endif %} value="markdown">markdown</option>
+        <option {% if cell_type=="raw" %}selected{% endif %} value="raw">raw</option>
+        <option {% if cell_type=="unknown" %}selected{% endif %} value="unknown">unknown</option>
+    </select>
+</label>
+{% endmacro %}
+
+{% macro outputs_cell(cell, ID) %}
+{% for i, output in enumerate(cell.outputs) %}
+{% block output scoped %}{% block output_prompt %}{% endblock %}{{super()}}{% endblock %}
+{% endfor %}
+{% endmacro %}
+
+
+{% macro cell_toolbar(cell, ID) %}
+<menu class="cell toolbar">
+    <input class="run" type="submit" form="{{ID}}" for="{{ID}}-source" value="run" title="run the cell"
+        tabindex="0">
+    <button onclick="document.querySelector('#{{ID}}-metadata').showModal()" title="show metadata">🛈</button>
+</menu>
+{% endmacro %}
+
+{% macro hide(x) %}{% if not x %}hidden{% endif %}{% endmacro %}
\ No newline at end of file
diff --git a/nbconvert_html5/templates/semantic-forms/index.html.j2 b/nbconvert_html5/templates/semantic-forms/index.html.j2
new file mode 100644
index 00000000..55420c64
--- /dev/null
+++ b/nbconvert_html5/templates/semantic-forms/index.html.j2
@@ -0,0 +1,30 @@
+{%- extends 'semantic-forms/base.html.j2' -%}
+{% from 'mathjax.html.j2' import mathjax %}
+{% from 'jupyter_widgets.html.j2' import jupyter_widgets %}
+
+{% block body_header %}
+<body>
+    <header class="site">
+        {% block skip_links %}<a class="visually-hidden" tabindex="0" href="#/cells">Skip to Main Content</a>{% endblock skip_links %}
+        {% block site_header %}<nav id="toc"></nav>{% endblock site_header %}
+        <!-- search and site navigation would go here -->
+        <!-- links go to the original content -->
+    </header>
+    <main>
+        <header>{% block nb_header %}<nav id="toc"></nav>{% endblock nb_header %}</header>
+{% endblock body_header %}
+
+
+{% block body_footer %}
+        <footer>{% block site_footer %}<!-- site license -->{% endblock site_footer %}</footer>
+    </main>
+</body>
+{% endblock body_footer %}
+
+{% block footer %}
+{% block footer_js %}
+{% endblock footer_js %}
+{{ super() }}
+</html>
+{% endblock footer %}
+
diff --git a/nbconvert_html5/templates/semantic-forms/ol.html.j2 b/nbconvert_html5/templates/semantic-forms/ol.html.j2
new file mode 100644
index 00000000..6cbfba53
--- /dev/null
+++ b/nbconvert_html5/templates/semantic-forms/ol.html.j2
@@ -0,0 +1,13 @@
+{%- extends 'semantic-forms/index.html.j2' -%}
+{% from 'mathjax.html.j2' import mathjax %}
+{% from 'jupyter_widgets.html.j2' import jupyter_widgets %}
+
+{% block body_loop %}
+<ol>{{super()}}</ol>
+{% endblock body_loop %}
+
+{% block any_cell %}
+<li class="cell {{cell.cell_type}} {{celltags(cell)}}">
+{{cell_form(cell, nb)}}
+</li>
+{% endblock any_cell %}
\ No newline at end of file
diff --git a/nbconvert_html5/templates/semantic-forms/sections.html.j2 b/nbconvert_html5/templates/semantic-forms/sections.html.j2
new file mode 100644
index 00000000..b4bd15c7
--- /dev/null
+++ b/nbconvert_html5/templates/semantic-forms/sections.html.j2
@@ -0,0 +1,10 @@
+{%- extends 'semantic-forms/index.html.j2' -%}
+{% from 'mathjax.html.j2' import mathjax %}
+{% from 'jupyter_widgets.html.j2' import jupyter_widgets %}
+
+
+{% block any_cell %}
+<section aria-label="Cell {{count}}" class="cell {{cell.cell_type}} {{celltags(cell)}}" id="/cells/{{count}}">
+{{cell_form(cell, nb)}}
+</section>
+{% endblock any_cell %}
\ No newline at end of file
diff --git a/nbconvert_html5/templates/semantic-forms/ul.html.j2 b/nbconvert_html5/templates/semantic-forms/ul.html.j2
new file mode 100644
index 00000000..df3a0a8f
--- /dev/null
+++ b/nbconvert_html5/templates/semantic-forms/ul.html.j2
@@ -0,0 +1,13 @@
+{%- extends 'semantic-forms/index.html.j2' -%}
+{% from 'mathjax.html.j2' import mathjax %}
+{% from 'jupyter_widgets.html.j2' import jupyter_widgets %}
+
+{% block body_loop %}
+<ul>{{super()}}</ul>
+{% endblock body_loop %}
+
+{% block any_cell %}
+<li class="cell {{cell.cell_type}} {{celltags(cell)}}">
+{{cell_form(cell, nb)}}
+</li>
+{% endblock any_cell %}
\ No newline at end of file

From 8a11b2d3f3af3837fd603366661402395110fada Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Fri, 12 May 2023 18:10:18 -0700
Subject: [PATCH 03/36] add more configurations to test the extent

---
 pyproject.toml                   | 8 ++++++--
 tests/configurations/feed.py     | 6 ++++++
 tests/configurations/ol.py       | 6 ++++++
 tests/configurations/sections.py | 6 ++++++
 tests/configurations/ul.py       | 6 ++++++
 5 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 tests/configurations/feed.py
 create mode 100644 tests/configurations/ol.py
 create mode 100644 tests/configurations/sections.py
 create mode 100644 tests/configurations/ul.py

diff --git a/pyproject.toml b/pyproject.toml
index a2479072..e00ddec2 100755
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -130,12 +130,16 @@ notebooks = [
     "user-tests/2-content/Imaging_Sky_Background_Estimation.ipynb",
 ]
 configurations = [
-    # "tests/configurations/default.py",
+    "tests/configurations/default.py",
     # "tests/configurations/contenteditable-code.py",
-    # "tests/configurations/tabs-scroll-to-top.py",
+    "tests/configurations/tabs-scroll-to-top.py",
     # "tests/configurations/tab-to-content-nav-high-contrast.py",
     # "tests/configurations/tab-to-code-nav-high-contrast.py",
     "tests/configurations/table-default.py",
+    "tests/configurations/sections.py",
+    "tests/configurations/ol.py",
+    "tests/configurations/ul.py",
+    "tests/configurations/feed.py",
     # "tests/configurations/notebook-list.py",
 ]
 
diff --git a/tests/configurations/feed.py b/tests/configurations/feed.py
new file mode 100644
index 00000000..7db5a35d
--- /dev/null
+++ b/tests/configurations/feed.py
@@ -0,0 +1,6 @@
+"""export notebooks as a feed of articles"""
+
+c.CSSHTMLHeaderPreprocessor.style = "github-light-colorblind"
+c.NbConvertApp.export_format = "html5"
+c.CSSHTMLHeaderPreprocessor.style = "default"
+c.TemplateExporter.template_file = "semantic-forms/feed.html.j2"
\ No newline at end of file
diff --git a/tests/configurations/ol.py b/tests/configurations/ol.py
new file mode 100644
index 00000000..4308d87f
--- /dev/null
+++ b/tests/configurations/ol.py
@@ -0,0 +1,6 @@
+"""export notebooks as an order list of forms"""
+
+c.CSSHTMLHeaderPreprocessor.style = "github-light-colorblind"
+c.NbConvertApp.export_format = "html5"
+c.CSSHTMLHeaderPreprocessor.style = "default"
+c.TemplateExporter.template_file = "semantic-forms/ol.html.j2"
\ No newline at end of file
diff --git a/tests/configurations/sections.py b/tests/configurations/sections.py
new file mode 100644
index 00000000..662465cb
--- /dev/null
+++ b/tests/configurations/sections.py
@@ -0,0 +1,6 @@
+"""export notebooks as regions of forms"""
+
+c.CSSHTMLHeaderPreprocessor.style = "github-light-colorblind"
+c.NbConvertApp.export_format = "html5"
+c.CSSHTMLHeaderPreprocessor.style = "default"
+c.TemplateExporter.template_file = "semantic-forms/sections.html.j2"
\ No newline at end of file
diff --git a/tests/configurations/ul.py b/tests/configurations/ul.py
new file mode 100644
index 00000000..fd7e43c5
--- /dev/null
+++ b/tests/configurations/ul.py
@@ -0,0 +1,6 @@
+"""export notebooks as an unordered list of forms"""
+
+c.CSSHTMLHeaderPreprocessor.style = "github-light-colorblind"
+c.NbConvertApp.export_format = "html5"
+c.CSSHTMLHeaderPreprocessor.style = "default"
+c.TemplateExporter.template_file = "semantic-forms/ul.html.j2"
\ No newline at end of file

From 8548eefe3b0be370d0eec086cbecc4da3237a4c7 Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Fri, 12 May 2023 18:26:07 -0700
Subject: [PATCH 04/36] make template file configurable

---
 nbconvert_html5/form_exporter.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/nbconvert_html5/form_exporter.py b/nbconvert_html5/form_exporter.py
index d7d53cd9..606487ef 100644
--- a/nbconvert_html5/form_exporter.py
+++ b/nbconvert_html5/form_exporter.py
@@ -15,6 +15,7 @@
 import builtins
 import bs4
 import pygments
+from traitlets import Unicode
 import nbconvert_html5
 import pydantic
 import nbformat.v4
@@ -289,7 +290,7 @@ def post_process_code_cell(self, cell):
         pass
     A/B testing with out requiring `nbconvert` or notebook knowleldge."""
 
-    template_file = "semantic-forms/table.html.j2"
+    template_file = Unicode("semantic-forms/table.html.j2").tag(config=True)
     exclude_anchor_links = True
 
     def __init__(self, *args, **kwargs):

From 5ea6c415b7c44ebcdd484b1695e5fb96e9f0b757 Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Fri, 26 May 2023 12:05:10 -0700
Subject: [PATCH 05/36] cleaner sections template

---
 .../templates/semantic-forms/base.html.j2     | 100 +++++++++---------
 .../templates/semantic-forms/index.html.j2    |  25 +++--
 .../templates/semantic-forms/sections.html.j2 |  28 ++++-
 3 files changed, 93 insertions(+), 60 deletions(-)

diff --git a/nbconvert_html5/templates/semantic-forms/base.html.j2 b/nbconvert_html5/templates/semantic-forms/base.html.j2
index 59a540f6..6a761914 100644
--- a/nbconvert_html5/templates/semantic-forms/base.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/base.html.j2
@@ -175,54 +175,54 @@ var element = $('#{{ div_id }}');
 
 
 
-{% macro cell_form(cell, nb) %}
-{% set count = nb["cells"].index(cell) +1%}
-{% set ID = "/cells/" + str(cell.id or count) %}
-<form id="{{ID}}" aria-label="Cell Source {{count}}">
-    {{cell_type_cell(cell)}}
-    <label>
-        <textarea name="source" id="{{ID}}/source" readonly>{{cell.source}}</textarea>
+    {% macro cell_form(cell, nb) %}
+    {% set count = nb["cells"].index(cell) +1%}
+    {% set ID = "/cells/" + str(cell.id or count) %}
+    <form id="{{ID}}" aria-label="Cell Source {{count}}">
+        {{cell_type_cell(cell)}}
+        <label>
+            <textarea name="source" id="{{ID}}/source" readonly>{{cell.source}}</textarea>
+        </label>
+    </form>
+    {{cell_toolbar(cell, ID)}}
+    <output class="render" for="{{ID}}/source" form={{ID}} aria-hidden="{% if cell.cell_type == "markdown" %}false{% else %}true{% endif %}">
+        {% if cell.cell_type=="markdown" %}{{markdown(cell.source) | strip_files_prefix}}{% endif %}
+        {% if cell.cell_type=="code" %}{{ cell.source | highlight_code(metadata=cell.metadata) }}{% endif %}
+    </output>
+    <output form={{ID}} for="{{ID}}/source" name=execution_count id="{{ID}}/outputs">{{cell.execution_count or ""}}</output>
+    <output form={{ID}} for="{{ID}}/source" name=outputs role=log>{{outputs_cell(cell, ID)}}</output>
+    {% endmacro%}
+
+    {% macro cell_type_cell(cell) %}
+    {% set cell_type = cell.cell_type %}
+    <label class="cell_type">
+        <select name="cell_type" disabled>
+            <option {% if cell_type=="code" %}selected{% endif %} value="code">code</option>
+            <option {% if cell_type=="markdown" %}selected{% endif %} value="markdown">markdown</option>
+            <option {% if cell_type=="raw" %}selected{% endif %} value="raw">raw</option>
+            <option {% if cell_type=="unknown" %}selected{% endif %} value="unknown">unknown</option>
+        </select>
     </label>
-</form>
-{{cell_toolbar(cell, ID)}}
-<output class="render" for="{{ID}}/source" form={{ID}} aria-hidden="{% if cell.cell_type == "markdown" %}false{% else %}true{% endif %}">
-    {% if cell.cell_type=="markdown" %}{{markdown(cell.source) | strip_files_prefix}}{% endif %}
-    {% if cell.cell_type=="code" %}{{ cell.source | highlight_code(metadata=cell.metadata) }}{% endif %}
-</output>
-<output form={{ID}} for="{{ID}}/source" name=execution_count id="{{ID}}/outputs">{{cell.execution_count or ""}}</output>
-<output form={{ID}} for="{{ID}}/source" name=outputs role=log>{{outputs_cell(cell, ID)}}</output>
-{% endmacro%}
-
-{% macro cell_type_cell(cell) %}
-{% set cell_type = cell.cell_type %}
-<label class="cell_type">
-    <select name="cell_type" disabled>
-        <option {% if cell_type=="code" %}selected{% endif %} value="code">code</option>
-        <option {% if cell_type=="markdown" %}selected{% endif %} value="markdown">markdown</option>
-        <option {% if cell_type=="raw" %}selected{% endif %} value="raw">raw</option>
-        <option {% if cell_type=="unknown" %}selected{% endif %} value="unknown">unknown</option>
-    </select>
-</label>
-{% endmacro %}
-
-{% macro outputs_cell(cell, ID) %}
-{% for i, output in enumerate(cell.outputs) %}
-{% block output scoped %}{% block output_prompt %}{% endblock %}{{super()}}{% endblock %}
-{% endfor %}
-{% endmacro %}
-
-
-{% macro cell_toolbar(cell, ID) %}
-<menu class="cell toolbar" hidden>
-    <input class="run" type="submit" form="{{ID}}" for="{{ID}}-source" value="run" title="run the cell"
-        tabindex="0">
-    <button onclick="document.querySelector('#{{ID}}-metadata').showModal()" title="show metadata">🛈</button>
-</menu>
-{% endmacro %}
-
-{% macro hide(x) %}{% if not x %}hidden{% endif %}{% endmacro %}
-
-
-{% macro highlight(body, type) %}
-{{markdown("```{{type}}\n" + json.dumps(nb.metadata, indent=2) + "\n```\n")}}
-{% endmacro %}
\ No newline at end of file
+    {% endmacro %}
+
+    {% macro outputs_cell(cell, ID) %}
+    {% for i, output in enumerate(cell.outputs) %}
+    {% block output scoped %}{% block output_prompt %}{% endblock %}{{super()}}{% endblock %}
+    {% endfor %}
+    {% endmacro %}
+
+
+    {% macro cell_toolbar(cell, ID) %}
+    <menu class="cell toolbar" hidden>
+        <input class="run" type="submit" form="{{ID}}" for="{{ID}}-source" value="run" title="run the cell"
+            tabindex="0">
+        <button onclick="document.querySelector('#{{ID}}-metadata').showModal()" title="show metadata">🛈</button>
+    </menu>
+    {% endmacro %}
+
+    {% macro hide(x) %}{% if not x %}hidden{% endif %}{% endmacro %}
+
+
+    {% macro highlight(body, type) %}
+    {{markdown("```{{type}}\n" + json.dumps(nb.metadata, indent=2) + "\n```\n")}}
+    {% endmacro %}
\ No newline at end of file
diff --git a/nbconvert_html5/templates/semantic-forms/index.html.j2 b/nbconvert_html5/templates/semantic-forms/index.html.j2
index 55420c64..ab1d6c4b 100644
--- a/nbconvert_html5/templates/semantic-forms/index.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/index.html.j2
@@ -2,22 +2,33 @@
 {% from 'mathjax.html.j2' import mathjax %}
 {% from 'jupyter_widgets.html.j2' import jupyter_widgets %}
 
+{%- block header -%}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+{%- block html_head -%}
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+{% set nb_title = nb.metadata.get('title', resources['metadata']['name']) | escape_html_keep_quotes %}
+<title>{{nb_title}}</title>
+{% block css %}{% endblock css %}
+{%- endblock html_head -%}
+</head>
+{%- endblock  -%}
+
+
 {% block body_header %}
 <body>
     <header class="site">
-        {% block skip_links %}<a class="visually-hidden" tabindex="0" href="#/cells">Skip to Main Content</a>{% endblock skip_links %}
-        {% block site_header %}<nav id="toc"></nav>{% endblock site_header %}
-        <!-- search and site navigation would go here -->
-        <!-- links go to the original content -->
+        {% block skip_links %}<a class="visually-hidden" tabindex="0" href="#/cells">Skip to content</a>{% endblock skip_links %}
     </header>
-    <main>
-        <header>{% block nb_header %}<nav id="toc"></nav>{% endblock nb_header %}</header>
+    <main id="/">
 {% endblock body_header %}
 
 
 {% block body_footer %}
-        <footer>{% block site_footer %}<!-- site license -->{% endblock site_footer %}</footer>
     </main>
+    <footer><a class="scroll-top" href="#/">Scroll to top.</a></footer>
 </body>
 {% endblock body_footer %}
 
diff --git a/nbconvert_html5/templates/semantic-forms/sections.html.j2 b/nbconvert_html5/templates/semantic-forms/sections.html.j2
index b4bd15c7..cfb91b83 100644
--- a/nbconvert_html5/templates/semantic-forms/sections.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/sections.html.j2
@@ -1,10 +1,32 @@
-{%- extends 'semantic-forms/index.html.j2' -%}
+{%- extends 'semantic-forms/cell.html.j2' -%}
 {% from 'mathjax.html.j2' import mathjax %}
 {% from 'jupyter_widgets.html.j2' import jupyter_widgets %}
 
 
+{% block css %}
+<style>
+section.cell [role=toolbar]:has(button[type="submit"]:disabled),
+section.cell :is(fieldset:empty, textarea:read-only),
+section.markdown [name="execution_count"] {
+    display: none;
+}
+[name=execution_count] {
+    font-family: monospace;
+}
+section.cell > fieldset {
+   border: none;
+}
+</style>{% endblock css %}
+
 {% block any_cell %}
-<section aria-label="Cell {{count}}" class="cell {{cell.cell_type}} {{celltags(cell)}}" id="/cells/{{count}}">
-{{cell_form(cell, nb)}}
+{%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
+{%- set CODE = cell.cell_type == "code" -%}
+
+<section {% if CODE %}aria-labelledby="{{ID}}/execution_count"{% endif %} class="cell {{cell.cell_type}} {{celltags(cell)}}" id="{{count}}">
+{{ cell_execution_count(cell, nb) }}
+{{ cell_forms(cell, nb, cell_textarea(cell, nb))}}
+{{ cell_render(cell, nb) }}
+{{ cell_toolbars(cell, nb, [cell_submit(cell, nb), cell_type(cell, nb)]) }}
+{{ cell_outputs(cell, nb) }}
 </section>
 {% endblock any_cell %}
\ No newline at end of file

From bb0e7989489f250160f5e683181161bdf95677ae Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Fri, 26 May 2023 12:08:15 -0700
Subject: [PATCH 06/36] add cell tempalte

---
 .../templates/semantic-forms/cell.html.j2     | 68 +++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 nbconvert_html5/templates/semantic-forms/cell.html.j2

diff --git a/nbconvert_html5/templates/semantic-forms/cell.html.j2 b/nbconvert_html5/templates/semantic-forms/cell.html.j2
new file mode 100644
index 00000000..fa27e77c
--- /dev/null
+++ b/nbconvert_html5/templates/semantic-forms/cell.html.j2
@@ -0,0 +1,68 @@
+{%- extends 'semantic-forms/index.html.j2' -%}
+
+{%- macro cell_textarea(cell, nb) -%}
+{%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
+<textarea name="source" id="{{ID}}/source" readonly aria-label="{{cell.cell_type}} source">{{cell.source}}</textarea>
+{%- endmacro -%}
+
+
+{%- macro cell_forms(cell, nb, body) -%}
+{%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
+<form id="{{ID}}" name="{{ID}}" method="POST">
+{{body}}
+</form>
+{%- endmacro -%}
+
+{%- macro cell_submit(cell, nb) -%}
+{%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
+<button form="{{ID}}" type="submit" disabled>Run</button>
+{%- endmacro -%}
+
+{%- macro cell_toolbars(cell, nb, body) -%}
+{%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
+<ul role="toolbar" aria-labelledby="{{ID}}/execution_count">{%- for part in body -%}<li>{{part}}</li>{%- endfor -%}</ul>
+{%- endmacro -%}
+
+{%- macro cell_type(cell, nb) -%}
+{%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
+{%- set cell_type = cell.cell_type -%}
+<select name="cell_type" aria-label="Cell Type" form="{{ID}}" disabled>
+    <option {% if cell_type=="code" %}selected{% endif %} value="code">code</option>
+    <option {% if cell_type=="markdown" %}selected{% endif %} value="markdown">markdown</option>
+    <option {% if cell_type=="raw" %}selected{% endif %} value="raw">raw</option>
+    <option {% if cell_type=="unknown" %}selected{% endif %} value="unknown">unknown</option>
+</select>
+{%- endmacro -%}
+
+{%- macro cell_execution_count(cell, nb, body) -%}
+{%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
+{% if cell.cell_type == "code" %}
+<output form={{ID}} for="{{ID}}/source" name=execution_count id="{{ID}}/execution_count" title="Execution count">Out: {{cell.execution_count or ""}}</output>
+{% else %}
+<output form={{ID}} for="{{ID}}/source" name=execution_count id="{{ID}}/execution_count" title="Execution count">Cell {{count}}</output>
+{% endif %}
+{%- endmacro -%}
+
+{%- macro cell_outputs(cell, nb, parts) -%}
+{%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
+<fieldset name="outputs" id="{{ID}}/outputs">{{cell_display_priority(cell, ID)}}</fieldset>
+{%- endmacro -%}
+
+{%- macro cell_render(cell, nb, parts) -%}
+{%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
+{% set CODE = cell.cell_type=="code" %}
+<output class="render" for="{{ID}}/source" form={{ID}} aria-labelledby="{{ID}}/execution_count">
+{%- if CODE -%}{{ cell.source | highlight_code(metadata=cell.metadata) }}{% else %}{{markdown(cell.source) | strip_files_prefix}}{%- endif -%}
+</output>
+{%- endmacro -%}
+
+{%- macro cell_display_priority(cell, ID) -%}
+{%- for i, output in enumerate(cell.outputs) -%}
+{%- block output scoped -%}<output name="outputs/{{i}}" id="{{ID}}/outputs/{{i}}" form="{{ID}}" for="{{ID}}/source" aria-labelledby="{{ID}}/execution_count">{%- block output_prompt -%}{%- endblock -%}{{super()}}</output>{%- endblock -%}
+{%- endfor -%}
+{%- endmacro -%}
+
+
+{%- macro highlight(body, type) -%}
+{{markdown("```{{type}}\n" + json.dumps(nb.metadata, indent=2) + "\n```\n")}}
+{%- endmacro -%}

From 2e1151e7dd02349f7cc6880c668f9b65d543d1a6 Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Fri, 26 May 2023 22:09:50 -0700
Subject: [PATCH 07/36] add labels

---
 nbconvert_html5/templates/semantic-forms/cell.html.j2     | 4 ++--
 nbconvert_html5/templates/semantic-forms/sections.html.j2 | 6 ++----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/nbconvert_html5/templates/semantic-forms/cell.html.j2 b/nbconvert_html5/templates/semantic-forms/cell.html.j2
index fa27e77c..d0d00588 100644
--- a/nbconvert_html5/templates/semantic-forms/cell.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/cell.html.j2
@@ -37,9 +37,9 @@
 {%- macro cell_execution_count(cell, nb, body) -%}
 {%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
 {% if cell.cell_type == "code" %}
-<output form={{ID}} for="{{ID}}/source" name=execution_count id="{{ID}}/execution_count" title="Execution count">Out: {{cell.execution_count or ""}}</output>
+<label for="{{ID}}/source" name=execution_count id="{{ID}}/execution_count">Out: {{cell.execution_count or ""}}</label>
 {% else %}
-<output form={{ID}} for="{{ID}}/source" name=execution_count id="{{ID}}/execution_count" title="Execution count">Cell {{count}}</output>
+<label for="{{ID}}/source" name=execution_count id="{{ID}}/execution_count">Cell {{count}}</label>
 {% endif %}
 {%- endmacro -%}
 
diff --git a/nbconvert_html5/templates/semantic-forms/sections.html.j2 b/nbconvert_html5/templates/semantic-forms/sections.html.j2
index cfb91b83..2c1a5433 100644
--- a/nbconvert_html5/templates/semantic-forms/sections.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/sections.html.j2
@@ -6,16 +6,14 @@
 {% block css %}
 <style>
 section.cell [role=toolbar]:has(button[type="submit"]:disabled),
-section.cell :is(fieldset:empty, textarea:read-only),
+section.cell fieldset:empty, 
+section.cell textarea:read-only,
 section.markdown [name="execution_count"] {
     display: none;
 }
 [name=execution_count] {
     font-family: monospace;
 }
-section.cell > fieldset {
-   border: none;
-}
 </style>{% endblock css %}
 
 {% block any_cell %}

From 83306a94949d0fb3c5370ea43c89c7a22f27f005 Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Tue, 30 May 2023 17:30:17 -0700
Subject: [PATCH 08/36] more accessibility revisions

---
 .../templates/semantic-forms/cell.html.j2     | 41 +++++++++++++---
 .../templates/semantic-forms/sections.html.j2 | 48 ++++++++++++++++---
 2 files changed, 76 insertions(+), 13 deletions(-)

diff --git a/nbconvert_html5/templates/semantic-forms/cell.html.j2 b/nbconvert_html5/templates/semantic-forms/cell.html.j2
index d0d00588..77232cdb 100644
--- a/nbconvert_html5/templates/semantic-forms/cell.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/cell.html.j2
@@ -1,8 +1,18 @@
 {%- extends 'semantic-forms/index.html.j2' -%}
 
+{# cell is a tough analogy, it is an ambiguous signifier dependent on context. 
+the analogy to a biologic cell asks "what is the nucleus?" or "what encodes the objective?".
+the source input feels like it is the irreducible element of our computational cells.
+lines of text evolve over time. like dna they replicate, mutate, evolve, and cooperate.
+
+allied alphabets dancing on carefully organized sand emitting waves of sound, light, and hope.
+the lines in the source, the nucleus, freeze a sliver of a movement in hypermedia. 
+
+#}
 {%- macro cell_textarea(cell, nb) -%}
 {%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
-<textarea name="source" id="{{ID}}/source" readonly aria-label="{{cell.cell_type}} source">{{cell.source}}</textarea>
+<label for="{{ID}}/source"></label>{# https://www.w3.org/WAI/WCAG21/Techniques/general/G208 #}
+<textarea name="source" id="{{ID}}/source" readonly>{{cell.source}}</textarea>
 {%- endmacro -%}
 
 
@@ -15,7 +25,8 @@
 
 {%- macro cell_submit(cell, nb) -%}
 {%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
-<button form="{{ID}}" type="submit" disabled>Run</button>
+{# https://www.w3.org/TR/WCAG20-TECHS/H32.html #}
+<button form="{{ID}}" type="submit" disabled aria-label="Run Cell"></button>
 {%- endmacro -%}
 
 {%- macro cell_toolbars(cell, nb, body) -%}
@@ -34,7 +45,13 @@
 </select>
 {%- endmacro -%}
 
-{%- macro cell_execution_count(cell, nb, body) -%}
+{# the execution count has been one of the most confusing aspects of this journey. 
+it's meaning wasn't revealed until the very end of this rigorous study. 
+the result discovered labelable, interactive elements that describe the components of the cell.
+assistive technology requires labels for interactive objects and the semantic representation allows the re-use
+of the execution count label on different elements with different roles.
+ #}
+{%- macro cell_execution_count_out(cell, nb, body) -%}
 {%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
 {% if cell.cell_type == "code" %}
 <label for="{{ID}}/source" name=execution_count id="{{ID}}/execution_count">Out: {{cell.execution_count or ""}}</label>
@@ -43,22 +60,34 @@
 {% endif %}
 {%- endmacro -%}
 
+{%- macro cell_execution_count_in(cell, nb, body) -%}
+{%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
+{% if cell.cell_type == "code" %}
+<label for="{{ID}}/source" name=execution_count id="{{ID}}/execution_count">In: {{cell.execution_count or ""}}</label>
+{% else %}
+<label for="{{ID}}/source" name=execution_count id="{{ID}}/execution_count">Cell {{count}}</label>
+{% endif %}
+{%- endmacro -%}
+
 {%- macro cell_outputs(cell, nb, parts) -%}
 {%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
-<fieldset name="outputs" id="{{ID}}/outputs">{{cell_display_priority(cell, ID)}}</fieldset>
+<fieldset name="outputs" id="{{ID}}/outputs" {%- if not cell.outputs %}hidden{% endif %}>
+    <legend>{{ cell_execution_count_out(cell, nb) }}</legend>
+    {{cell_display_priority(cell, ID)}}
+</fieldset>
 {%- endmacro -%}
 
 {%- macro cell_render(cell, nb, parts) -%}
 {%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
 {% set CODE = cell.cell_type=="code" %}
-<output class="render" for="{{ID}}/source" form={{ID}} aria-labelledby="{{ID}}/execution_count">
+<output role="presentation" class="render" for="{{ID}}/source" form={{ID}} aria-labelledby="{{ID}}/execution_count">
 {%- if CODE -%}{{ cell.source | highlight_code(metadata=cell.metadata) }}{% else %}{{markdown(cell.source) | strip_files_prefix}}{%- endif -%}
 </output>
 {%- endmacro -%}
 
 {%- macro cell_display_priority(cell, ID) -%}
 {%- for i, output in enumerate(cell.outputs) -%}
-{%- block output scoped -%}<output name="outputs/{{i}}" id="{{ID}}/outputs/{{i}}" form="{{ID}}" for="{{ID}}/source" aria-labelledby="{{ID}}/execution_count">{%- block output_prompt -%}{%- endblock -%}{{super()}}</output>{%- endblock -%}
+{%- block output scoped -%}<output role="presentation" name="outputs/{{i}}" id="{{ID}}/outputs/{{i}}" form="{{ID}}" for="{{ID}}/source" aria-labelledby="{{ID}}/execution_count">{%- block output_prompt -%}{%- endblock -%}{{super()}}</output>{%- endblock -%}
 {%- endfor -%}
 {%- endmacro -%}
 
diff --git a/nbconvert_html5/templates/semantic-forms/sections.html.j2 b/nbconvert_html5/templates/semantic-forms/sections.html.j2
index 2c1a5433..8405398d 100644
--- a/nbconvert_html5/templates/semantic-forms/sections.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/sections.html.j2
@@ -5,25 +5,59 @@
 
 {% block css %}
 <style>
-section.cell [role=toolbar]:has(button[type="submit"]:disabled),
-section.cell fieldset:empty, 
-section.cell textarea:read-only,
-section.markdown [name="execution_count"] {
+main {
+    display: flex;
+    overflow-x: hidden;
+    flex-direction: column;
+    flex-wrap: nowrap;
+}
+section.cell [role=toolbar],
+section.cell textarea[name=source]:read-only,
+section.markdown > fieldset[name=outputs],
+section.markdown > fieldset[name=input] > legend {
     display: none;
 }
 [name=execution_count] {
     font-family: monospace;
 }
+main > section {
+    display: flex;
+    flex-direction: column;
+    align-content: stretch;
+}
+
+main > section > fieldset[name=input] {
+    border: none;
+    display: flex;
+    flex-direction: row;
+
+}
+
+main > section > fieldset[name=input] legend {
+    display: inherit;
+
+}
+
+main > section {
+    overflow-x: auto;
+}
 </style>{% endblock css %}
 
+{% macro input_group(cell, nb) %}
+{%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
+<fieldset for="{{ID}}" name="input">
+    <legend {% if cell.cell_type!="code" %}aria-hidden="true"{% endif %}>{{ cell_execution_count_in(cell, nb) }}</legend>
+    {{ cell_forms(cell, nb, cell_textarea(cell, nb))}}
+    {{ cell_render(cell, nb) }}
+</fieldset>
+{% endmacro %}
+
 {% block any_cell %}
 {%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
 {%- set CODE = cell.cell_type == "code" -%}
 
 <section {% if CODE %}aria-labelledby="{{ID}}/execution_count"{% endif %} class="cell {{cell.cell_type}} {{celltags(cell)}}" id="{{count}}">
-{{ cell_execution_count(cell, nb) }}
-{{ cell_forms(cell, nb, cell_textarea(cell, nb))}}
-{{ cell_render(cell, nb) }}
+{{ input_group(cell, nb) }}
 {{ cell_toolbars(cell, nb, [cell_submit(cell, nb), cell_type(cell, nb)]) }}
 {{ cell_outputs(cell, nb) }}
 </section>

From 23feb329549256e2e441738c237656597db36314 Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Tue, 30 May 2023 19:42:39 -0700
Subject: [PATCH 09/36] fix skip link class. separate cell and for. adapt css.

---
 .../templates/semantic-forms/cell.html.j2     | 34 ++++---
 .../templates/semantic-forms/index.html.j2    |  2 +-
 .../templates/semantic-forms/sections.html.j2 | 91 +++++++++++--------
 3 files changed, 75 insertions(+), 52 deletions(-)

diff --git a/nbconvert_html5/templates/semantic-forms/cell.html.j2 b/nbconvert_html5/templates/semantic-forms/cell.html.j2
index 77232cdb..8438842a 100644
--- a/nbconvert_html5/templates/semantic-forms/cell.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/cell.html.j2
@@ -1,28 +1,35 @@
 {%- extends 'semantic-forms/index.html.j2' -%}
 
-{# cell is a tough analogy, it is an ambiguous signifier dependent on context. 
+{# cell is a tough analogy, it is an ambiguous signifier dependent on context.
 the analogy to a biologic cell asks "what is the nucleus?" or "what encodes the objective?".
 the source input feels like it is the irreducible element of our computational cells.
 lines of text evolve over time. like dna they replicate, mutate, evolve, and cooperate.
 
 allied alphabets dancing on carefully organized sand emitting waves of sound, light, and hope.
-the lines in the source, the nucleus, freeze a sliver of a movement in hypermedia. 
+the lines in the source, the nucleus, freeze a sliver of a movement in hypermedia.
 
 #}
 {%- macro cell_textarea(cell, nb) -%}
 {%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
-<label for="{{ID}}/source"></label>{# https://www.w3.org/WAI/WCAG21/Techniques/general/G208 #}
-<textarea name="source" id="{{ID}}/source" readonly>{{cell.source}}</textarea>
+<label for="{{ID}}/source">{# https://www.w3.org/WAI/WCAG21/Techniques/general/G208 #}
+    <textarea name="source" id="{{ID}}/source" form="{{ID}}" readonly>{{cell.source}}</textarea>
+</label>
 {%- endmacro -%}
 
 
 {%- macro cell_forms(cell, nb, body) -%}
 {%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
-<form id="{{ID}}" name="{{ID}}" method="POST">
-{{body}}
+<form id="{{ID}}" name="{{ID}}" method="POST" aria-labelledby="{{ID}}/execution_count">
+    {{body}}
 </form>
 {%- endmacro -%}
 
+
+{%- macro cell_form_element(cell, nb) -%}
+{%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
+<form id="{{ID}}" name="{{ID}}" method="POST"></form>
+{%- endmacro -%}
+
 {%- macro cell_submit(cell, nb) -%}
 {%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
 {# https://www.w3.org/TR/WCAG20-TECHS/H32.html #}
@@ -45,12 +52,12 @@ the lines in the source, the nucleus, freeze a sliver of a movement in hypermedi
 </select>
 {%- endmacro -%}
 
-{# the execution count has been one of the most confusing aspects of this journey. 
-it's meaning wasn't revealed until the very end of this rigorous study. 
+{# the execution count has been one of the most confusing aspects of this journey.
+it's meaning wasn't revealed until the very end of this rigorous study.
 the result discovered labelable, interactive elements that describe the components of the cell.
 assistive technology requires labels for interactive objects and the semantic representation allows the re-use
 of the execution count label on different elements with different roles.
- #}
+#}
 {%- macro cell_execution_count_out(cell, nb, body) -%}
 {%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
 {% if cell.cell_type == "code" %}
@@ -81,17 +88,20 @@ of the execution count label on different elements with different roles.
 {%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
 {% set CODE = cell.cell_type=="code" %}
 <output role="presentation" class="render" for="{{ID}}/source" form={{ID}} aria-labelledby="{{ID}}/execution_count">
-{%- if CODE -%}{{ cell.source | highlight_code(metadata=cell.metadata) }}{% else %}{{markdown(cell.source) | strip_files_prefix}}{%- endif -%}
+    {%- if CODE -%}{{ cell.source | highlight_code(metadata=cell.metadata) }}{% else %}{{markdown(cell.source) |
+    strip_files_prefix}}{%- endif -%}
 </output>
 {%- endmacro -%}
 
 {%- macro cell_display_priority(cell, ID) -%}
 {%- for i, output in enumerate(cell.outputs) -%}
-{%- block output scoped -%}<output role="presentation" name="outputs/{{i}}" id="{{ID}}/outputs/{{i}}" form="{{ID}}" for="{{ID}}/source" aria-labelledby="{{ID}}/execution_count">{%- block output_prompt -%}{%- endblock -%}{{super()}}</output>{%- endblock -%}
+{%- block output scoped -%}<output role="presentation" name="outputs/{{i}}" id="{{ID}}/outputs/{{i}}" form="{{ID}}"
+    for="{{ID}}/source" aria-labelledby="{{ID}}/execution_count">{%- block output_prompt -%}{%- endblock
+    -%}{{super()}}</output>{%- endblock -%}
 {%- endfor -%}
 {%- endmacro -%}
 
 
 {%- macro highlight(body, type) -%}
 {{markdown("```{{type}}\n" + json.dumps(nb.metadata, indent=2) + "\n```\n")}}
-{%- endmacro -%}
+{%- endmacro -%}
\ No newline at end of file
diff --git a/nbconvert_html5/templates/semantic-forms/index.html.j2 b/nbconvert_html5/templates/semantic-forms/index.html.j2
index ab1d6c4b..9c36ba4f 100644
--- a/nbconvert_html5/templates/semantic-forms/index.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/index.html.j2
@@ -20,7 +20,7 @@
 {% block body_header %}
 <body>
     <header class="site">
-        {% block skip_links %}<a class="visually-hidden" tabindex="0" href="#/cells">Skip to content</a>{% endblock skip_links %}
+        {% block skip_links %}<a class="visually-hidden" tabindex="0" href="#/">Skip to content</a>{% endblock skip_links %}
     </header>
     <main id="/">
 {% endblock body_header %}
diff --git a/nbconvert_html5/templates/semantic-forms/sections.html.j2 b/nbconvert_html5/templates/semantic-forms/sections.html.j2
index 8405398d..3ba2d4f5 100644
--- a/nbconvert_html5/templates/semantic-forms/sections.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/sections.html.j2
@@ -5,60 +5,73 @@
 
 {% block css %}
 <style>
-main {
-    display: flex;
-    overflow-x: hidden;
-    flex-direction: column;
-    flex-wrap: nowrap;
-}
-section.cell [role=toolbar],
-section.cell textarea[name=source]:read-only,
-section.markdown > fieldset[name=outputs],
-section.markdown > fieldset[name=input] > legend {
-    display: none;
-}
-[name=execution_count] {
-    font-family: monospace;
-}
-main > section {
-    display: flex;
-    flex-direction: column;
-    align-content: stretch;
-}
+    body {
+        font-size: larger;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    }
 
-main > section > fieldset[name=input] {
-    border: none;
-    display: flex;
-    flex-direction: row;
+    main {
+        display: flex;
+        overflow-x: hidden;
+        flex-direction: column;
+    }
 
-}
+    fieldset[name=input]:disabled~form,
+    fieldset[name=input]:disabled~ul[role=toolbar],
+    fieldset[name=input]:disabled>label[for$="\/source"],
+    section.markdown>fieldset[name=input]>legend,
+    section.markdown>fieldset[name=outputs] {
+        display: none;
+    }
 
-main > section > fieldset[name=input] legend {
-    display: inherit;
+    [name=execution_count] {
+        font-family: monospace;
+    }
 
-}
+    main>section {
+        display: flex;
+        flex-direction: column;
+    }
 
-main > section {
-    overflow-x: auto;
-}
+    main>section>fieldset[name=input] {
+        border: none;
+        display: flex;
+        flex-direction: row;
+    }
+
+    main>section {
+        overflow-x: auto;
+    }
+
+    .visually-hidden:not(:focus):not(:active) {
+        clip: rect(0 0 0 0);
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
 </style>{% endblock css %}
 
 {% macro input_group(cell, nb) %}
 {%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
-<fieldset for="{{ID}}" name="input">
-    <legend {% if cell.cell_type!="code" %}aria-hidden="true"{% endif %}>{{ cell_execution_count_in(cell, nb) }}</legend>
-    {{ cell_forms(cell, nb, cell_textarea(cell, nb))}}
+{{ cell_form_element(cell, nb)}}
+<fieldset for="{{ID}}" name="input" disabled>
+    <legend aria-hidden="true">{{ cell_execution_count_in(cell, nb) }}</legend>
+    {{ cell_textarea(cell, nb) }}
     {{ cell_render(cell, nb) }}
 </fieldset>
 {% endmacro %}
 
-{% block any_cell %}
+{% block any_cell scoped %}
 {%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
 {%- set CODE = cell.cell_type == "code" -%}
 
-<section {% if CODE %}aria-labelledby="{{ID}}/execution_count"{% endif %} class="cell {{cell.cell_type}} {{celltags(cell)}}" id="{{count}}">
-{{ input_group(cell, nb) }}
-{{ cell_toolbars(cell, nb, [cell_submit(cell, nb), cell_type(cell, nb)]) }}
-{{ cell_outputs(cell, nb) }}
+<section {% if CODE %}aria-labelledby="{{ID}}/execution_count" {% endif %}
+    class="cell {{cell.cell_type}} {{celltags(cell)}}" id="{{count}}">
+    {{ input_group(cell, nb) }}
+    {{ cell_toolbars(cell, nb, [cell_submit(cell, nb), cell_type(cell, nb)]) }}
+    {{ cell_outputs(cell, nb) }}
 </section>
 {% endblock any_cell %}
\ No newline at end of file

From 27b4490a237089059ee2e98f84a15c085700b00a Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Tue, 30 May 2023 19:58:16 -0700
Subject: [PATCH 10/36] rm aria hidden opinion

---
 nbconvert_html5/templates/semantic-forms/sections.html.j2 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nbconvert_html5/templates/semantic-forms/sections.html.j2 b/nbconvert_html5/templates/semantic-forms/sections.html.j2
index 3ba2d4f5..3f7cf439 100644
--- a/nbconvert_html5/templates/semantic-forms/sections.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/sections.html.j2
@@ -58,7 +58,7 @@
 {%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
 {{ cell_form_element(cell, nb)}}
 <fieldset for="{{ID}}" name="input" disabled>
-    <legend aria-hidden="true">{{ cell_execution_count_in(cell, nb) }}</legend>
+    <legend>{{ cell_execution_count_in(cell, nb) }}</legend>
     {{ cell_textarea(cell, nb) }}
     {{ cell_render(cell, nb) }}
 </fieldset>

From 58a67be0e4eee6642435a0e8a027c74784c24958 Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Tue, 30 May 2023 20:57:24 -0700
Subject: [PATCH 11/36] remove screen reader verbosity

---
 nbconvert_html5/templates/semantic-forms/cell.html.j2 | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/nbconvert_html5/templates/semantic-forms/cell.html.j2 b/nbconvert_html5/templates/semantic-forms/cell.html.j2
index 8438842a..ba5d9323 100644
--- a/nbconvert_html5/templates/semantic-forms/cell.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/cell.html.j2
@@ -87,7 +87,7 @@ of the execution count label on different elements with different roles.
 {%- macro cell_render(cell, nb, parts) -%}
 {%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
 {% set CODE = cell.cell_type=="code" %}
-<output role="presentation" class="render" for="{{ID}}/source" form={{ID}} aria-labelledby="{{ID}}/execution_count">
+<output role="presentation" class="render" form={{ID}} aria-labelledby="{{ID}}/execution_count">
     {%- if CODE -%}{{ cell.source | highlight_code(metadata=cell.metadata) }}{% else %}{{markdown(cell.source) |
     strip_files_prefix}}{%- endif -%}
 </output>
@@ -95,8 +95,7 @@ of the execution count label on different elements with different roles.
 
 {%- macro cell_display_priority(cell, ID) -%}
 {%- for i, output in enumerate(cell.outputs) -%}
-{%- block output scoped -%}<output role="presentation" name="outputs/{{i}}" id="{{ID}}/outputs/{{i}}" form="{{ID}}"
-    for="{{ID}}/source" aria-labelledby="{{ID}}/execution_count">{%- block output_prompt -%}{%- endblock
+{%- block output scoped -%}<output role="presentation" name="outputs/{{i}}" id="{{ID}}/outputs/{{i}}" form="{{ID}}" aria-labelledby="{{ID}}/execution_count">{%- block output_prompt -%}{%- endblock
     -%}{{super()}}</output>{%- endblock -%}
 {%- endfor -%}
 {%- endmacro -%}

From e896f7751604c13a42eb225b2a5a789f3e3a7295 Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Tue, 30 May 2023 21:29:48 -0700
Subject: [PATCH 12/36] expose pygments to the template

---
 nbconvert_html5/form_exporter.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/nbconvert_html5/form_exporter.py b/nbconvert_html5/form_exporter.py
index 606487ef..c5f68ff2 100644
--- a/nbconvert_html5/form_exporter.py
+++ b/nbconvert_html5/form_exporter.py
@@ -307,6 +307,7 @@ def __init__(self, *args, **kwargs):
         import html
         self.environment.globals.update(json=json, markdown=markdown)
         self.environment.filters.update(escape_html=html.escape)
+        self.environment.globals.update(formatter=pygments.formatters)
 
 
     def from_notebook_node(self, nb, resources=None, **kw):

From 48c8775d61a98ee71f68853da7afb44547eb62a5 Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Tue, 30 May 2023 21:30:00 -0700
Subject: [PATCH 13/36] add light dark support

---
 nbconvert_html5/templates/semantic-forms/sections.html.j2 | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/nbconvert_html5/templates/semantic-forms/sections.html.j2 b/nbconvert_html5/templates/semantic-forms/sections.html.j2
index 3f7cf439..50d335cc 100644
--- a/nbconvert_html5/templates/semantic-forms/sections.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/sections.html.j2
@@ -2,8 +2,8 @@
 {% from 'mathjax.html.j2' import mathjax %}
 {% from 'jupyter_widgets.html.j2' import jupyter_widgets %}
 
-
 {% block css %}
+<meta name="color-scheme" content="dark light">
 <style>
     body {
         font-size: larger;
@@ -52,6 +52,12 @@
         white-space: nowrap;
         width: 1px;
     }
+
+{{formatter.get_formatter_by_name("html", style="github-light").get_style_defs(".highlight")}}
+@media (prefers-color-scheme: dark) { 
+    {{formatter.get_formatter_by_name("html", style="github-dark").get_style_defs(".highlight")}}
+ }
+
 </style>{% endblock css %}
 
 {% macro input_group(cell, nb) %}

From 58d9f4ec85e7349a58b30805815b0d69eca9d441 Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Tue, 30 May 2023 21:53:53 -0700
Subject: [PATCH 14/36] add width to output

---
 .../templates/semantic-forms/sections.html.j2            | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/nbconvert_html5/templates/semantic-forms/sections.html.j2 b/nbconvert_html5/templates/semantic-forms/sections.html.j2
index 50d335cc..ee04a8c7 100644
--- a/nbconvert_html5/templates/semantic-forms/sections.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/sections.html.j2
@@ -24,6 +24,10 @@
         display: none;
     }
 
+    fieldset[name$=put] > output {
+        width: 100%
+    }
+
     [name=execution_count] {
         font-family: monospace;
     }
@@ -31,6 +35,7 @@
     main>section {
         display: flex;
         flex-direction: column;
+        align-items: stretch;
     }
 
     main>section>fieldset[name=input] {
@@ -73,9 +78,7 @@
 {% block any_cell scoped %}
 {%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
 {%- set CODE = cell.cell_type == "code" -%}
-
-<section {% if CODE %}aria-labelledby="{{ID}}/execution_count" {% endif %}
-    class="cell {{cell.cell_type}} {{celltags(cell)}}" id="{{count}}">
+<section {% if CODE %}aria-labelledby="{{ID}}/execution_count" {% endif %} class="cell {{cell.cell_type}} {{celltags(cell)}}" id="{{count}}">
     {{ input_group(cell, nb) }}
     {{ cell_toolbars(cell, nb, [cell_submit(cell, nb), cell_type(cell, nb)]) }}
     {{ cell_outputs(cell, nb) }}

From 18f8e312f4b235217e16d205ac0cf501caeb7cf8 Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Thu, 1 Jun 2023 23:04:18 -0700
Subject: [PATCH 15/36] add presentation role markdown input fieldset and all
 output fieldsets

---
 nbconvert_html5/templates/semantic-forms/cell.html.j2     | 2 +-
 nbconvert_html5/templates/semantic-forms/sections.html.j2 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/nbconvert_html5/templates/semantic-forms/cell.html.j2 b/nbconvert_html5/templates/semantic-forms/cell.html.j2
index ba5d9323..caaff9d2 100644
--- a/nbconvert_html5/templates/semantic-forms/cell.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/cell.html.j2
@@ -78,7 +78,7 @@ of the execution count label on different elements with different roles.
 
 {%- macro cell_outputs(cell, nb, parts) -%}
 {%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
-<fieldset name="outputs" id="{{ID}}/outputs" {%- if not cell.outputs %}hidden{% endif %}>
+<fieldset name="outputs" id="{{ID}}/outputs" role="presentation" {%- if not cell.outputs %}hidden{% endif %}>
     <legend>{{ cell_execution_count_out(cell, nb) }}</legend>
     {{cell_display_priority(cell, ID)}}
 </fieldset>
diff --git a/nbconvert_html5/templates/semantic-forms/sections.html.j2 b/nbconvert_html5/templates/semantic-forms/sections.html.j2
index ee04a8c7..ca2068bf 100644
--- a/nbconvert_html5/templates/semantic-forms/sections.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/sections.html.j2
@@ -68,7 +68,7 @@
 {% macro input_group(cell, nb) %}
 {%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
 {{ cell_form_element(cell, nb)}}
-<fieldset for="{{ID}}" name="input" disabled>
+<fieldset for="{{ID}}" name="input" disabled {% if cell.cell_type == "markdown" %}role="presentation"{% endif %}>
     <legend>{{ cell_execution_count_in(cell, nb) }}</legend>
     {{ cell_textarea(cell, nb) }}
     {{ cell_render(cell, nb) }}

From 3a453caac76f3cdbcbd58fd40ef8b2d84bb3f942 Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Sat, 3 Jun 2023 13:15:18 -0700
Subject: [PATCH 16/36] add the smol variant as the minimum interface

---
 .../templates/semantic-forms/smol.html.j2     | 190 ++++++++++++++++++
 pyproject.toml                                |   1 +
 tests/configurations/smol.py                  |   6 +
 3 files changed, 197 insertions(+)
 create mode 100644 nbconvert_html5/templates/semantic-forms/smol.html.j2
 create mode 100644 tests/configurations/smol.py

diff --git a/nbconvert_html5/templates/semantic-forms/smol.html.j2 b/nbconvert_html5/templates/semantic-forms/smol.html.j2
new file mode 100644
index 00000000..6135ab14
--- /dev/null
+++ b/nbconvert_html5/templates/semantic-forms/smol.html.j2
@@ -0,0 +1,190 @@
+{%- extends 'semantic-forms/cell.html.j2' -%}
+
+
+
+{# cell is a tough analogy, it is an ambiguous signifier dependent on context.
+the analogy to a biologic cell asks "what is the nucleus?" or "what encodes the objective?".
+the source input feels like it is the irreducible element of our computational cells.
+lines of text evolve over time. like dna they replicate, mutate, evolve, and cooperate.
+
+allied alphabets dancing on carefully organized sand emitting waves of sound, light, and hope.
+the lines in the source, the nucleus, freeze a sliver of a movement in hypermedia.
+
+#}
+{% from 'mathjax.html.j2' import mathjax %}
+{% from 'jupyter_widgets.html.j2' import jupyter_widgets %}
+
+{% block css %}
+<meta name="color-scheme" content="dark light">
+<style>
+    body {
+        font-size: larger;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    }
+
+    main {
+        display: flex;
+        overflow-x: hidden;
+        flex-direction: column;
+    }
+
+    output[name=cell_count]:before {
+        content: "Cell ";
+    }
+    output[name=execution_count]:before {
+        content: "Out ";
+    }
+
+    textarea[name=source]:read-only~ul[role=toolbar],
+    textarea[name=source]:read-only>label[for$="\/source"],
+    section.markdown>textarea[name=source],
+    section.markdown>fieldset[name=outputs] legend,
+    section.markdown output[name$=_count] {
+        display: none;
+    }
+
+    fieldset[name$=put]>output {
+        width: 100%
+    }
+
+    output[name$=_count] {
+        font-family: monospace;
+    }
+
+    main>section {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    main>section>fieldset[name=input],
+    main>section.markdown>fieldset[name=outputs] {
+        border: none;
+        display: flex;
+        flex-direction: row;
+    }
+
+    main>section {
+        overflow-x: auto;
+    }
+
+    .visually-hidden:not(:focus):not(:active) {
+        clip: rect(0 0 0 0);
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+</style>{% endblock css %}
+
+{% macro input(cell, nb) %}
+{%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
+{{ cell_form_element(cell, nb)}}
+{{ cell_in(cell, nb) }}
+{{ cell_textarea(cell, nb) }}
+{% endmacro %}
+
+{% block any_cell scoped %}
+{%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
+{%- set CODE = cell.cell_type == "code" -%}
+{%- set tags = celltags(cell) -%}
+<section {% if CODE %}aria-labelledby="{{ID}}/execution_count" {% endif %}
+    class="cell {{cell.cell_type}}{% if tags %} {{tags}}{% endif %}" id="{{count}}">
+    {{ input(cell, nb) }}
+    {{ cell_toolbars(cell, nb, [cell_submit(cell, nb), cell_type(cell, nb)]) }}
+    {{ cell_output(cell, nb) }}
+</section>
+{% endblock any_cell %}
+
+
+{# cell is a tough analogy, it is an ambiguous signifier dependent on context.
+the analogy to a biologic cell asks "what is the nucleus?" or "what encodes the objective?".
+the source input feels like it is the irreducible element of our computational cells.
+lines of text evolve over time. like dna they replicate, mutate, evolve, and cooperate.
+
+allied alphabets dancing on carefully organized sand emitting waves of sound, light, and hope.
+the lines in the source, the nucleus, freeze a sliver of a movement in hypermedia.
+
+#}
+{%- macro cell_textarea(cell, nb) -%}
+{%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
+<label for="{{ID}}/source">{# https://www.w3.org/WAI/WCAG21/Techniques/general/G208 #}
+</label>
+<textarea name="source" id="{{ID}}/source" form="{{ID}}" readonly>{{cell.source}}</textarea>
+{%- endmacro -%}
+
+{%- macro cell_form_element(cell, nb) -%}
+{%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
+<form id="{{ID}}" name="{{ID}}" method="POST"></form>
+{%- endmacro -%}
+
+{%- macro cell_submit(cell, nb) -%}
+{%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
+{# https://www.w3.org/TR/WCAG20-TECHS/H32.html #}
+<button form="{{ID}}" type="submit" disabled aria-label="Run Cell"></button>
+{%- endmacro -%}
+
+{%- macro cell_toolbars(cell, nb, body) -%}
+{%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
+<ul role="toolbar" aria-labelledby="{{ID}}/execution_count">{%- for part in body -%}<li>{{part}}</li>{%- endfor -%}</ul>
+{%- endmacro -%}
+
+{%- macro cell_type(cell, nb) -%}
+{%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
+{%- set cell_type = cell.cell_type -%}
+<select name="cell_type" aria-label="Cell Type" form="{{ID}}" disabled>
+    <option {% if cell_type=="code" %}selected{% endif %} value="code">code</option>
+    <option {% if cell_type=="markdown" %}selected{% endif %} value="markdown">markdown</option>
+    <option {% if cell_type=="raw" %}selected{% endif %} value="raw">raw</option>
+    <option {% if cell_type=="unknown" %}selected{% endif %} value="unknown">unknown</option>
+</select>
+{%- endmacro -%}
+
+{# the execution count has been one of the most confusing aspects of this journey.
+it's meaning wasn't revealed until the very end of this rigorous study.
+the result discovered labelable, interactive elements that describe the components of the cell.
+assistive technology requires labels for interactive objects and the semantic representation allows the re-use
+of the execution count label on different elements with different roles.
+#}
+{%- macro cell_out(cell, nb, body) -%}
+{%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
+{% if cell.cell_type == "code" %}
+<output name="execution_count" id={{ID}}/execution_count role="presentation">{{cell.execution_count or ""}}</output>
+{% else %}
+<output role="presentation">{{count}}</output>
+{% endif %}
+{%- endmacro -%}
+
+
+{%- macro cell_in(cell, nb, body) -%}
+{%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
+<output name="cell_count" role="presentation" id={{ID}}/cell_count>{{count + 1}}</output>
+{%- endmacro -%}
+
+{%- macro cell_output(cell, nb, parts) -%}
+{%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
+{% set CODE = cell.cell_type == "code" %}
+<fieldset name="outputs" id="{{ID}}/outputs" {% if CODE and not cell.outputs %}style="display: none;{% endif %}>
+    <legend>{{ cell_out(cell, nb) }}</legend>
+    {{cell_display_priority(cell, ID)}}
+    {% if cell.cell_type=="markdown" %}
+    <output role="presentation" class="render" form={{ID}} aria-labelledby="{{ID}}/execution_count">
+    {{markdown(cell.source) | strip_files_prefix}}
+    </output>
+    {% endif %}
+</fieldset>
+{%- endmacro -%}
+
+{%- macro cell_display_priority(cell, ID) -%}
+{%- for i, output in enumerate(cell.outputs) -%}
+{%- block output scoped -%}<output role="presentation" name="outputs/{{i}}" id="{{ID}}/outputs/{{i}}" form="{{ID}}" aria-labelledby="{{ID}}/execution_count">{%- block output_prompt -%}{%- endblock
+    -%}{{super()}}</output>{%- endblock -%}
+{%- endfor -%}
+{%- endmacro -%}
+
+
+{%- macro highlight(body, type) -%}
+{{markdown("```{{type}}\n" + json.dumps(nb.metadata, indent=2) + "\n```\n")}}
+{%- endmacro -%}
\ No newline at end of file
diff --git a/pyproject.toml b/pyproject.toml
index e00ddec2..2667c2ee 100755
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -137,6 +137,7 @@ configurations = [
     # "tests/configurations/tab-to-code-nav-high-contrast.py",
     "tests/configurations/table-default.py",
     "tests/configurations/sections.py",
+    "tests/configurations/smol.py",
     "tests/configurations/ol.py",
     "tests/configurations/ul.py",
     "tests/configurations/feed.py",
diff --git a/tests/configurations/smol.py b/tests/configurations/smol.py
new file mode 100644
index 00000000..e93fde84
--- /dev/null
+++ b/tests/configurations/smol.py
@@ -0,0 +1,6 @@
+"""the smallest interface without fancy things"""
+
+c.CSSHTMLHeaderPreprocessor.style = "github-light-colorblind"
+c.NbConvertApp.export_format = "html5"
+c.CSSHTMLHeaderPreprocessor.style = "default"
+c.TemplateExporter.template_file = "semantic-forms/smol.html.j2"
\ No newline at end of file

From 63a599331a08c318e9292e8f78e277f6534cfb36 Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Sat, 3 Jun 2023 19:08:33 -0700
Subject: [PATCH 17/36] this feels pretty dialed now

---
 .../templates/semantic-forms/smol.html.j2     | 70 +++++++++++++------
 1 file changed, 49 insertions(+), 21 deletions(-)

diff --git a/nbconvert_html5/templates/semantic-forms/smol.html.j2 b/nbconvert_html5/templates/semantic-forms/smol.html.j2
index 6135ab14..9770235a 100644
--- a/nbconvert_html5/templates/semantic-forms/smol.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/smol.html.j2
@@ -16,35 +16,59 @@ the lines in the source, the nucleus, freeze a sliver of a movement in hypermedi
 
 {% block css %}
 <meta name="color-scheme" content="dark light">
+
 <style>
+    {# use the system ui and a larger font #}
     body {
         font-size: larger;
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     }
 
+    {# use flex to display the main area. each cell will be arranged according to the flex display, grid could be used instead. using flex generates new interactive elements when horizontal or vertical scroll is required. #}
     main {
         display: flex;
         overflow-x: hidden;
         flex-direction: column;
     }
 
+    {# cells have labels #}
     output[name=cell_count]:before {
         content: "Cell ";
     }
+
+    output[name=input_count]:before {
+        content: "In ";
+    }
+    
+    {# computational cells have extra labels #}
     output[name=execution_count]:before {
         content: "Out ";
     }
 
-    textarea[name=source]:read-only~ul[role=toolbar],
-    textarea[name=source]:read-only>label[for$="\/source"],
-    section.markdown>textarea[name=source],
-    section.markdown>fieldset[name=outputs] legend,
+
+    section:focus-within {
+        border: 2px solid;
+    }
+    section:hover {
+        outline: 2px dashed;
+        outline-offset: -3px; {# border offset plus a half #}
+    }
+
+    {#  #}
+    
+    section > form,
+    fieldset[name=input]:disabled~ul[role=toolbar], 
+    section.markdown>fieldset[name=input]:disabled,
+    section.markdown>fieldset[name=input]:disabled ~ fieldset[name=outputs] legend,
     section.markdown output[name$=_count] {
         display: none;
     }
 
-    fieldset[name$=put]>output {
-        width: 100%
+    textarea[name=source]:disabled {
+        color: inherit;
+    }
+    textarea[name=source], fieldset[name$=put]>output {
+        width: 100%;
     }
 
     output[name$=_count] {
@@ -55,6 +79,7 @@ the lines in the source, the nucleus, freeze a sliver of a movement in hypermedi
         display: flex;
         flex-direction: column;
         align-items: stretch;
+        gap: 1rem 1rem;
     }
 
     main>section>fieldset[name=input],
@@ -78,21 +103,22 @@ the lines in the source, the nucleus, freeze a sliver of a movement in hypermedi
         width: 1px;
     }
 </style>{% endblock css %}
-
-{% macro input(cell, nb) %}
-{%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
-{{ cell_form_element(cell, nb)}}
-{{ cell_in(cell, nb) }}
-{{ cell_textarea(cell, nb) }}
-{% endmacro %}
-
 {% block any_cell scoped %}
 {%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
 {%- set CODE = cell.cell_type == "code" -%}
 {%- set tags = celltags(cell) -%}
-<section {% if CODE %}aria-labelledby="{{ID}}/execution_count" {% endif %}
-    class="cell {{cell.cell_type}}{% if tags %} {{tags}}{% endif %}" id="{{count}}">
-    {{ input(cell, nb) }}
+<section aria-labelledby="{{ID}}/cell_count" class="cell {{cell.cell_type}}{% if tags %} {{tags}}{% endif %}" id="{{count}}">
+    <form id="{{ID}}" name="{{ID}}" method="POST">
+        <output name="cell_count" role="presentation" id={{ID}}/cell_count>{{count + 1}}</output>
+    </form>
+    <fieldset name=input role=presentation disabled>
+        <legend>
+            <output name="input_count" role="presentation">{{cell.execution_count or ""}}</output>
+        </legend>
+        <label for="{{ID}}/source">{# https://www.w3.org/WAI/WCAG21/Techniques/general/G208 #}
+        </label>
+        <textarea name="source" id="{{ID}}/source" rows="{{cell.source.splitlines().__len__()}}" form="{{ID}}" readonly>{{cell.source}}</textarea>
+    </fieldset>
     {{ cell_toolbars(cell, nb, [cell_submit(cell, nb), cell_type(cell, nb)]) }}
     {{ cell_output(cell, nb) }}
 </section>
@@ -112,12 +138,11 @@ the lines in the source, the nucleus, freeze a sliver of a movement in hypermedi
 {%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
 <label for="{{ID}}/source">{# https://www.w3.org/WAI/WCAG21/Techniques/general/G208 #}
 </label>
-<textarea name="source" id="{{ID}}/source" form="{{ID}}" readonly>{{cell.source}}</textarea>
+<textarea name="source" id="{{ID}}/source" rows="{{cell.source.splitlines().__len__()}}" form="{{ID}}" readonly>{{cell.source}}</textarea>
 {%- endmacro -%}
 
 {%- macro cell_form_element(cell, nb) -%}
 {%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
-<form id="{{ID}}" name="{{ID}}" method="POST"></form>
 {%- endmacro -%}
 
 {%- macro cell_submit(cell, nb) -%}
@@ -166,8 +191,11 @@ of the execution count label on different elements with different roles.
 {%- macro cell_output(cell, nb, parts) -%}
 {%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
 {% set CODE = cell.cell_type == "code" %}
-<fieldset name="outputs" id="{{ID}}/outputs" {% if CODE and not cell.outputs %}style="display: none;{% endif %}>
-    <legend>{{ cell_out(cell, nb) }}</legend>
+
+<fieldset name="outputs" id="{{ID}}/outputs" {% if CODE and not cell.outputs %}style="display: none;"{% endif %}>
+    <legend>
+        <output name="execution_count" id={{ID}}/execution_count role="presentation">{{cell.execution_count or ""}}</output>
+    </legend>
     {{cell_display_priority(cell, ID)}}
     {% if cell.cell_type=="markdown" %}
     <output role="presentation" class="render" form={{ID}} aria-labelledby="{{ID}}/execution_count">

From a339e8999f7224547b098a059c38d34a29c5e19b Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Sat, 3 Jun 2023 19:46:22 -0700
Subject: [PATCH 18/36] add label to the textarea

---
 nbconvert_html5/templates/semantic-forms/smol.html.j2 | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/nbconvert_html5/templates/semantic-forms/smol.html.j2 b/nbconvert_html5/templates/semantic-forms/smol.html.j2
index 9770235a..264ed4fb 100644
--- a/nbconvert_html5/templates/semantic-forms/smol.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/smol.html.j2
@@ -67,6 +67,7 @@ the lines in the source, the nucleus, freeze a sliver of a movement in hypermedi
     textarea[name=source]:disabled {
         color: inherit;
     }
+
     textarea[name=source], fieldset[name$=put]>output {
         width: 100%;
     }
@@ -115,9 +116,8 @@ the lines in the source, the nucleus, freeze a sliver of a movement in hypermedi
         <legend>
             <output name="input_count" role="presentation">{{cell.execution_count or ""}}</output>
         </legend>
-        <label for="{{ID}}/source">{# https://www.w3.org/WAI/WCAG21/Techniques/general/G208 #}
-        </label>
-        <textarea name="source" id="{{ID}}/source" rows="{{cell.source.splitlines().__len__()}}" form="{{ID}}" readonly>{{cell.source}}</textarea>
+        <label for="{{ID}}/source">{# https://www.w3.org/WAI/WCAG21/Techniques/general/G208 #}Source</label>
+        <textarea name="source" id="{{ID}}/source" rows="{{cell.source.splitlines().__len__()}}" form="{{ID}}">{{cell.source}}</textarea>
     </fieldset>
     {{ cell_toolbars(cell, nb, [cell_submit(cell, nb), cell_type(cell, nb)]) }}
     {{ cell_output(cell, nb) }}

From 8e74b64f1e665306e7e0f2e6d5e69df2647936c7 Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Sat, 3 Jun 2023 21:15:16 -0700
Subject: [PATCH 19/36] label the textarea input, cell and output

---
 .../templates/semantic-forms/smol.html.j2     | 55 ++-----------------
 1 file changed, 5 insertions(+), 50 deletions(-)

diff --git a/nbconvert_html5/templates/semantic-forms/smol.html.j2 b/nbconvert_html5/templates/semantic-forms/smol.html.j2
index 264ed4fb..15179136 100644
--- a/nbconvert_html5/templates/semantic-forms/smol.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/smol.html.j2
@@ -31,31 +31,15 @@ the lines in the source, the nucleus, freeze a sliver of a movement in hypermedi
         flex-direction: column;
     }
 
-    {# cells have labels #}
-    output[name=cell_count]:before {
-        content: "Cell ";
-    }
-
-    output[name=input_count]:before {
-        content: "In ";
-    }
-    
-    {# computational cells have extra labels #}
-    output[name=execution_count]:before {
-        content: "Out ";
-    }
-
-
     section:focus-within {
         border: 2px solid;
     }
+
     section:hover {
         outline: 2px dashed;
         outline-offset: -3px; {# border offset plus a half #}
     }
 
-    {#  #}
-    
     section > form,
     fieldset[name=input]:disabled~ul[role=toolbar], 
     section.markdown>fieldset[name=input]:disabled,
@@ -110,14 +94,11 @@ the lines in the source, the nucleus, freeze a sliver of a movement in hypermedi
 {%- set tags = celltags(cell) -%}
 <section aria-labelledby="{{ID}}/cell_count" class="cell {{cell.cell_type}}{% if tags %} {{tags}}{% endif %}" id="{{count}}">
     <form id="{{ID}}" name="{{ID}}" method="POST">
-        <output name="cell_count" role="presentation" id={{ID}}/cell_count>{{count + 1}}</output>
+        <label id={{ID}}/cell_count>Cell&nbsp;<output name="cell_count" role="presentation">{{count + 1}}</output></label>
     </form>
     <fieldset name=input role=presentation disabled>
-        <legend>
-            <output name="input_count" role="presentation">{{cell.execution_count or ""}}</output>
-        </legend>
-        <label for="{{ID}}/source">{# https://www.w3.org/WAI/WCAG21/Techniques/general/G208 #}Source</label>
-        <textarea name="source" id="{{ID}}/source" rows="{{cell.source.splitlines().__len__()}}" form="{{ID}}">{{cell.source}}</textarea>
+        <label id="{{ID}}/input_count">In&nbsp;<output name="input_count"  role="presentation">{{cell.execution_count or ""}}</output></label>
+        <textarea name="source" id="{{ID}}/source" rows="{{cell.source.splitlines().__len__()}}" form="{{ID}}" aria-labelledby="{{ID}}/input_count">{{cell.source}}</textarea>
     </fieldset>
     {{ cell_toolbars(cell, nb, [cell_submit(cell, nb), cell_type(cell, nb)]) }}
     {{ cell_output(cell, nb) }}
@@ -125,26 +106,6 @@ the lines in the source, the nucleus, freeze a sliver of a movement in hypermedi
 {% endblock any_cell %}
 
 
-{# cell is a tough analogy, it is an ambiguous signifier dependent on context.
-the analogy to a biologic cell asks "what is the nucleus?" or "what encodes the objective?".
-the source input feels like it is the irreducible element of our computational cells.
-lines of text evolve over time. like dna they replicate, mutate, evolve, and cooperate.
-
-allied alphabets dancing on carefully organized sand emitting waves of sound, light, and hope.
-the lines in the source, the nucleus, freeze a sliver of a movement in hypermedia.
-
-#}
-{%- macro cell_textarea(cell, nb) -%}
-{%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
-<label for="{{ID}}/source">{# https://www.w3.org/WAI/WCAG21/Techniques/general/G208 #}
-</label>
-<textarea name="source" id="{{ID}}/source" rows="{{cell.source.splitlines().__len__()}}" form="{{ID}}" readonly>{{cell.source}}</textarea>
-{%- endmacro -%}
-
-{%- macro cell_form_element(cell, nb) -%}
-{%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
-{%- endmacro -%}
-
 {%- macro cell_submit(cell, nb) -%}
 {%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
 {# https://www.w3.org/TR/WCAG20-TECHS/H32.html #}
@@ -193,9 +154,7 @@ of the execution count label on different elements with different roles.
 {% set CODE = cell.cell_type == "code" %}
 
 <fieldset name="outputs" id="{{ID}}/outputs" {% if CODE and not cell.outputs %}style="display: none;"{% endif %}>
-    <legend>
-        <output name="execution_count" id={{ID}}/execution_count role="presentation">{{cell.execution_count or ""}}</output>
-    </legend>
+    <legend id={{ID}}/execution_count>Out&nbsp;<output name="execution_count"  role="presentation">{{cell.execution_count or ""}}</output></legend>
     {{cell_display_priority(cell, ID)}}
     {% if cell.cell_type=="markdown" %}
     <output role="presentation" class="render" form={{ID}} aria-labelledby="{{ID}}/execution_count">
@@ -212,7 +171,3 @@ of the execution count label on different elements with different roles.
 {%- endfor -%}
 {%- endmacro -%}
 
-
-{%- macro highlight(body, type) -%}
-{{markdown("```{{type}}\n" + json.dumps(nb.metadata, indent=2) + "\n```\n")}}
-{%- endmacro -%}
\ No newline at end of file

From 3f8998b1e8d0c9012b10f30bc9797b8dd28f3233 Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Sun, 4 Jun 2023 15:40:57 -0700
Subject: [PATCH 20/36] legend is the label for the textarea, the visual input
 label is aria hidden

---
 .../templates/semantic-forms/smol.html.j2     | 32 +++++++------------
 1 file changed, 11 insertions(+), 21 deletions(-)

diff --git a/nbconvert_html5/templates/semantic-forms/smol.html.j2 b/nbconvert_html5/templates/semantic-forms/smol.html.j2
index 15179136..26535cb8 100644
--- a/nbconvert_html5/templates/semantic-forms/smol.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/smol.html.j2
@@ -87,6 +87,7 @@ the lines in the source, the nucleus, freeze a sliver of a movement in hypermedi
         white-space: nowrap;
         width: 1px;
     }
+
 </style>{% endblock css %}
 {% block any_cell scoped %}
 {%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
@@ -97,7 +98,16 @@ the lines in the source, the nucleus, freeze a sliver of a movement in hypermedi
         <label id={{ID}}/cell_count>Cell&nbsp;<output name="cell_count" role="presentation">{{count + 1}}</output></label>
     </form>
     <fieldset name=input role=presentation disabled>
-        <label id="{{ID}}/input_count">In&nbsp;<output name="input_count"  role="presentation">{{cell.execution_count or ""}}</output></label>
+        {# its recommended to use a legend, but we want the legend to name the textarea. it makes semantic sense to use a fieldset for the input
+        
+        the visual label doubles the content of the legend, but this is similar to a recommended  pattern from https://adrianroselli.com/2022/07/use-legend-and-fieldset.html 
+        
+        with fieldset[role=presentation] and legend[hidden] the In group not announced entering the group. 
+        instead the "In" is only announced in the textarea and the visual `label` is hidden from assistive tech.
+        #}
+        <legend hidden id="{{ID}}/input_count">In&nbsp;<output name="input_count" role="presentation">{{cell.execution_count or ""}}</output></legend>
+        {# semantically a label with the same contents as the legend above. it only exists for visual purposes. #}
+        <label aria-hidden=true>In&nbsp;<output name="input_count"  role="presentation">{{cell.execution_count or ""}}</output></label>
         <textarea name="source" id="{{ID}}/source" rows="{{cell.source.splitlines().__len__()}}" form="{{ID}}" aria-labelledby="{{ID}}/input_count">{{cell.source}}</textarea>
     </fieldset>
     {{ cell_toolbars(cell, nb, [cell_submit(cell, nb), cell_type(cell, nb)]) }}
@@ -128,26 +138,6 @@ the lines in the source, the nucleus, freeze a sliver of a movement in hypermedi
 </select>
 {%- endmacro -%}
 
-{# the execution count has been one of the most confusing aspects of this journey.
-it's meaning wasn't revealed until the very end of this rigorous study.
-the result discovered labelable, interactive elements that describe the components of the cell.
-assistive technology requires labels for interactive objects and the semantic representation allows the re-use
-of the execution count label on different elements with different roles.
-#}
-{%- macro cell_out(cell, nb, body) -%}
-{%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
-{% if cell.cell_type == "code" %}
-<output name="execution_count" id={{ID}}/execution_count role="presentation">{{cell.execution_count or ""}}</output>
-{% else %}
-<output role="presentation">{{count}}</output>
-{% endif %}
-{%- endmacro -%}
-
-
-{%- macro cell_in(cell, nb, body) -%}
-{%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
-<output name="cell_count" role="presentation" id={{ID}}/cell_count>{{count + 1}}</output>
-{%- endmacro -%}
 
 {%- macro cell_output(cell, nb, parts) -%}
 {%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}

From 488c6969e40cd026b9575ea3d76313b1edcd34a0 Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Sun, 4 Jun 2023 15:45:26 -0700
Subject: [PATCH 21/36] remove comments from smol

---
 .../templates/semantic-forms/smol.html.j2     | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/nbconvert_html5/templates/semantic-forms/smol.html.j2 b/nbconvert_html5/templates/semantic-forms/smol.html.j2
index 26535cb8..fe920370 100644
--- a/nbconvert_html5/templates/semantic-forms/smol.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/smol.html.j2
@@ -1,16 +1,5 @@
 {%- extends 'semantic-forms/cell.html.j2' -%}
 
-
-
-{# cell is a tough analogy, it is an ambiguous signifier dependent on context.
-the analogy to a biologic cell asks "what is the nucleus?" or "what encodes the objective?".
-the source input feels like it is the irreducible element of our computational cells.
-lines of text evolve over time. like dna they replicate, mutate, evolve, and cooperate.
-
-allied alphabets dancing on carefully organized sand emitting waves of sound, light, and hope.
-the lines in the source, the nucleus, freeze a sliver of a movement in hypermedia.
-
-#}
 {% from 'mathjax.html.j2' import mathjax %}
 {% from 'jupyter_widgets.html.j2' import jupyter_widgets %}
 
@@ -98,15 +87,7 @@ the lines in the source, the nucleus, freeze a sliver of a movement in hypermedi
         <label id={{ID}}/cell_count>Cell&nbsp;<output name="cell_count" role="presentation">{{count + 1}}</output></label>
     </form>
     <fieldset name=input role=presentation disabled>
-        {# its recommended to use a legend, but we want the legend to name the textarea. it makes semantic sense to use a fieldset for the input
-        
-        the visual label doubles the content of the legend, but this is similar to a recommended  pattern from https://adrianroselli.com/2022/07/use-legend-and-fieldset.html 
-        
-        with fieldset[role=presentation] and legend[hidden] the In group not announced entering the group. 
-        instead the "In" is only announced in the textarea and the visual `label` is hidden from assistive tech.
-        #}
         <legend hidden id="{{ID}}/input_count">In&nbsp;<output name="input_count" role="presentation">{{cell.execution_count or ""}}</output></legend>
-        {# semantically a label with the same contents as the legend above. it only exists for visual purposes. #}
         <label aria-hidden=true>In&nbsp;<output name="input_count"  role="presentation">{{cell.execution_count or ""}}</output></label>
         <textarea name="source" id="{{ID}}/source" rows="{{cell.source.splitlines().__len__()}}" form="{{ID}}" aria-labelledby="{{ID}}/input_count">{{cell.source}}</textarea>
     </fieldset>

From 347d254ec1c49a550da79c3cd61da12b5b6f8550 Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Sun, 4 Jun 2023 17:11:56 -0700
Subject: [PATCH 22/36] reduce the role of the output fieldset in markdown
 cells

---
 nbconvert_html5/templates/semantic-forms/smol.html.j2 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nbconvert_html5/templates/semantic-forms/smol.html.j2 b/nbconvert_html5/templates/semantic-forms/smol.html.j2
index fe920370..eb3fa5f8 100644
--- a/nbconvert_html5/templates/semantic-forms/smol.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/smol.html.j2
@@ -124,7 +124,7 @@
 {%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
 {% set CODE = cell.cell_type == "code" %}
 
-<fieldset name="outputs" id="{{ID}}/outputs" {% if CODE and not cell.outputs %}style="display: none;"{% endif %}>
+<fieldset name="outputs" id="{{ID}}/outputs" {% if CODE and not cell.outputs %}hidden{% endif %} {% if not CODE %}role="presentation"{% endif %}>
     <legend id={{ID}}/execution_count>Out&nbsp;<output name="execution_count"  role="presentation">{{cell.execution_count or ""}}</output></legend>
     {{cell_display_priority(cell, ID)}}
     {% if cell.cell_type=="markdown" %}

From fd5563d813db4623eeabf754a6b3dd2d9e818ba8 Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Sun, 4 Jun 2023 17:15:22 -0700
Subject: [PATCH 23/36] move toolbar up and hide form

---
 nbconvert_html5/templates/semantic-forms/smol.html.j2 | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/nbconvert_html5/templates/semantic-forms/smol.html.j2 b/nbconvert_html5/templates/semantic-forms/smol.html.j2
index eb3fa5f8..e9f0c905 100644
--- a/nbconvert_html5/templates/semantic-forms/smol.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/smol.html.j2
@@ -29,8 +29,7 @@
         outline-offset: -3px; {# border offset plus a half #}
     }
 
-    section > form,
-    fieldset[name=input]:disabled~ul[role=toolbar], 
+    fieldset[name=input]:disabled~ul[role=toolbar] 
     section.markdown>fieldset[name=input]:disabled,
     section.markdown>fieldset[name=input]:disabled ~ fieldset[name=outputs] legend,
     section.markdown output[name$=_count] {
@@ -83,15 +82,15 @@
 {%- set CODE = cell.cell_type == "code" -%}
 {%- set tags = celltags(cell) -%}
 <section aria-labelledby="{{ID}}/cell_count" class="cell {{cell.cell_type}}{% if tags %} {{tags}}{% endif %}" id="{{count}}">
-    <form id="{{ID}}" name="{{ID}}" method="POST">
+    <form id="{{ID}}" name="{{ID}}" method="POST" hidden>
         <label id={{ID}}/cell_count>Cell&nbsp;<output name="cell_count" role="presentation">{{count + 1}}</output></label>
     </form>
+    {{ cell_toolbars(cell, nb, [cell_submit(cell, nb), cell_type(cell, nb)]) }}
     <fieldset name=input role=presentation disabled>
         <legend hidden id="{{ID}}/input_count">In&nbsp;<output name="input_count" role="presentation">{{cell.execution_count or ""}}</output></legend>
         <label aria-hidden=true>In&nbsp;<output name="input_count"  role="presentation">{{cell.execution_count or ""}}</output></label>
         <textarea name="source" id="{{ID}}/source" rows="{{cell.source.splitlines().__len__()}}" form="{{ID}}" aria-labelledby="{{ID}}/input_count">{{cell.source}}</textarea>
     </fieldset>
-    {{ cell_toolbars(cell, nb, [cell_submit(cell, nb), cell_type(cell, nb)]) }}
     {{ cell_output(cell, nb) }}
 </section>
 {% endblock any_cell %}

From 1b6322a600f688866e1d298c9c98e1b35c80d321 Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Sun, 4 Jun 2023 18:51:25 -0700
Subject: [PATCH 24/36] move form outside the section so that it the action can
 be used as a compoind selector.

---
 .../templates/semantic-forms/smol.html.j2     | 51 +++++++++----------
 1 file changed, 25 insertions(+), 26 deletions(-)

diff --git a/nbconvert_html5/templates/semantic-forms/smol.html.j2 b/nbconvert_html5/templates/semantic-forms/smol.html.j2
index e9f0c905..acaeac73 100644
--- a/nbconvert_html5/templates/semantic-forms/smol.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/smol.html.j2
@@ -14,12 +14,8 @@
     }
 
     {# use flex to display the main area. each cell will be arranged according to the flex display, grid could be used instead. using flex generates new interactive elements when horizontal or vertical scroll is required. #}
-    main {
-        display: flex;
-        overflow-x: hidden;
-        flex-direction: column;
-    }
 
+    /** focus **/
     section:focus-within {
         border: 2px solid;
     }
@@ -29,23 +25,17 @@
         outline-offset: -3px; {# border offset plus a half #}
     }
 
-    fieldset[name=input]:disabled~ul[role=toolbar] 
-    section.markdown>fieldset[name=input]:disabled,
-    section.markdown>fieldset[name=input]:disabled ~ fieldset[name=outputs] legend,
-    section.markdown output[name$=_count] {
+    /** layout **/
+    fieldset[name=input]:disabled~ul[role=toolbar],
+    form[action=markdown]+section>fieldset[name=input]:disabled,
+    form[action=markdown]+section>fieldset[name=input]:disabled~fieldset[name=outputs] legend {
         display: none;
     }
 
-    textarea[name=source]:disabled {
-        color: inherit;
-    }
-
-    textarea[name=source], fieldset[name$=put]>output {
-        width: 100%;
-    }
-
-    output[name$=_count] {
-        font-family: monospace;
+    main {
+        display: flex;
+        overflow-x: hidden;
+        flex-direction: column;
     }
 
     main>section {
@@ -62,10 +52,20 @@
         flex-direction: row;
     }
 
+    textarea[name=source], fieldset[name$=put]>output {
+        width: 100%;
+    }
+
     main>section {
         overflow-x: auto;
     }
 
+    /** fix the color constrast on disabled textareas **/
+    fieldset[name=input]:disabled>textarea {
+        color: unset;
+    }
+
+    /** skip links **/
     .visually-hidden:not(:focus):not(:active) {
         clip: rect(0 0 0 0);
         clip-path: inset(50%);
@@ -75,22 +75,22 @@
         white-space: nowrap;
         width: 1px;
     }
-
 </style>{% endblock css %}
 {% block any_cell scoped %}
 {%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
 {%- set CODE = cell.cell_type == "code" -%}
 {%- set tags = celltags(cell) -%}
+<form hidden id="{{ID}}" name="{{ID}}" method="POST" action="{{cell.cell_type}}">
+    <label id={{ID}}/cell_count>Cell&nbsp;<output name="cell_count" role="presentation">{{count + 1}}</output></label>
+</form>
 <section aria-labelledby="{{ID}}/cell_count" class="cell {{cell.cell_type}}{% if tags %} {{tags}}{% endif %}" id="{{count}}">
-    <form id="{{ID}}" name="{{ID}}" method="POST" hidden>
-        <label id={{ID}}/cell_count>Cell&nbsp;<output name="cell_count" role="presentation">{{count + 1}}</output></label>
-    </form>
-    {{ cell_toolbars(cell, nb, [cell_submit(cell, nb), cell_type(cell, nb)]) }}
     <fieldset name=input role=presentation disabled>
         <legend hidden id="{{ID}}/input_count">In&nbsp;<output name="input_count" role="presentation">{{cell.execution_count or ""}}</output></legend>
         <label aria-hidden=true>In&nbsp;<output name="input_count"  role="presentation">{{cell.execution_count or ""}}</output></label>
         <textarea name="source" id="{{ID}}/source" rows="{{cell.source.splitlines().__len__()}}" form="{{ID}}" aria-labelledby="{{ID}}/input_count">{{cell.source}}</textarea>
     </fieldset>
+    {# things need to follow this input in dom order so that we can use css selectors off fieldset:disabled #}
+    {{ cell_toolbars(cell, nb, [cell_submit(cell, nb), cell_type(cell, nb)]) }}
     {{ cell_output(cell, nb) }}
 </section>
 {% endblock any_cell %}
@@ -136,8 +136,7 @@
 
 {%- macro cell_display_priority(cell, ID) -%}
 {%- for i, output in enumerate(cell.outputs) -%}
-{%- block output scoped -%}<output role="presentation" name="outputs/{{i}}" id="{{ID}}/outputs/{{i}}" form="{{ID}}" aria-labelledby="{{ID}}/execution_count">{%- block output_prompt -%}{%- endblock
-    -%}{{super()}}</output>{%- endblock -%}
+{%- block output scoped -%}{%- block output_prompt -%}{%- endblock-%}{{super()}}{%- endblock -%}
 {%- endfor -%}
 {%- endmacro -%}
 

From 12c2b9f8030280b60766bd8d5635a532511f5fd3 Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Sun, 4 Jun 2023 21:18:12 -0700
Subject: [PATCH 25/36] include a title

---
 nbconvert_html5/templates/semantic-forms/smol.html.j2 | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/nbconvert_html5/templates/semantic-forms/smol.html.j2 b/nbconvert_html5/templates/semantic-forms/smol.html.j2
index acaeac73..684ab4d3 100644
--- a/nbconvert_html5/templates/semantic-forms/smol.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/smol.html.j2
@@ -140,3 +140,14 @@
 {%- endfor -%}
 {%- endmacro -%}
 
+
+
+{% block body_header %}
+<body>
+    {% set title = nb.metadata.get('title', resources['metadata']['name']) | escape_html_keep_quotes %}
+    <header class="site">
+        <label id="title" aria-hidden="true">{{title}}</label>
+        {% block skip_links %}<a class="visually-hidden" tabindex="0" href="#/">Skip to content</a>{% endblock skip_links %}
+    </header>
+    <main id="/" aria-label="{{title}}">
+{% endblock body_header %}
\ No newline at end of file

From 2689ea1db4784f8cf162501705f27ab559da40f0 Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Mon, 5 Jun 2023 16:56:39 -0700
Subject: [PATCH 26/36] remove labels from the display outputs. this is future
 work

---
 nbconvert_html5/templates/semantic-forms/cell.html.j2 |  3 +--
 nbconvert_html5/templates/semantic-forms/smol.html.j2 | 10 +++++-----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/nbconvert_html5/templates/semantic-forms/cell.html.j2 b/nbconvert_html5/templates/semantic-forms/cell.html.j2
index caaff9d2..51d5ceef 100644
--- a/nbconvert_html5/templates/semantic-forms/cell.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/cell.html.j2
@@ -95,8 +95,7 @@ of the execution count label on different elements with different roles.
 
 {%- macro cell_display_priority(cell, ID) -%}
 {%- for i, output in enumerate(cell.outputs) -%}
-{%- block output scoped -%}<output role="presentation" name="outputs/{{i}}" id="{{ID}}/outputs/{{i}}" form="{{ID}}" aria-labelledby="{{ID}}/execution_count">{%- block output_prompt -%}{%- endblock
-    -%}{{super()}}</output>{%- endblock -%}
+{%- block output scoped -%}{%- block output_prompt -%}{%- endblock-%}{{super()}}{%- endblock -%}
 {%- endfor -%}
 {%- endmacro -%}
 
diff --git a/nbconvert_html5/templates/semantic-forms/smol.html.j2 b/nbconvert_html5/templates/semantic-forms/smol.html.j2
index 684ab4d3..6c926db6 100644
--- a/nbconvert_html5/templates/semantic-forms/smol.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/smol.html.j2
@@ -127,16 +127,15 @@
     <legend id={{ID}}/execution_count>Out&nbsp;<output name="execution_count"  role="presentation">{{cell.execution_count or ""}}</output></legend>
     {{cell_display_priority(cell, ID)}}
     {% if cell.cell_type=="markdown" %}
-    <output role="presentation" class="render" form={{ID}} aria-labelledby="{{ID}}/execution_count">
-    {{markdown(cell.source) | strip_files_prefix}}
-    </output>
+    <output role="presentation" class="render">{{markdown(cell.source) | strip_files_prefix}}</output>
     {% endif %}
 </fieldset>
 {%- endmacro -%}
 
 {%- macro cell_display_priority(cell, ID) -%}
 {%- for i, output in enumerate(cell.outputs) -%}
-{%- block output scoped -%}{%- block output_prompt -%}{%- endblock-%}{{super()}}{%- endblock -%}
+{%- block output scoped -%}<output role="presentation" name="outputs/{{i}}" id="{{ID}}/outputs/{{i}}" form="{{ID}}">{%- block output_prompt -%}{%- endblock
+    -%}{{super()}}</output>{%- endblock -%}
 {%- endfor -%}
 {%- endmacro -%}
 
@@ -150,4 +149,5 @@
         {% block skip_links %}<a class="visually-hidden" tabindex="0" href="#/">Skip to content</a>{% endblock skip_links %}
     </header>
     <main id="/" aria-label="{{title}}">
-{% endblock body_header %}
\ No newline at end of file
+{% endblock body_header %}
+

From 9d59ed8bf15c37dbb43649a940f47e2b80e49ee4 Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Mon, 5 Jun 2023 10:22:48 -0700
Subject: [PATCH 27/36] hidden legend for markdown outputs

---
 nbconvert_html5/templates/semantic-forms/smol.html.j2 | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/nbconvert_html5/templates/semantic-forms/smol.html.j2 b/nbconvert_html5/templates/semantic-forms/smol.html.j2
index 6c926db6..2aefb095 100644
--- a/nbconvert_html5/templates/semantic-forms/smol.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/smol.html.j2
@@ -27,8 +27,7 @@
 
     /** layout **/
     fieldset[name=input]:disabled~ul[role=toolbar],
-    form[action=markdown]+section>fieldset[name=input]:disabled,
-    form[action=markdown]+section>fieldset[name=input]:disabled~fieldset[name=outputs] legend {
+    form[action=markdown]+section>fieldset[name=input]:disabled {
         display: none;
     }
 
@@ -124,7 +123,7 @@
 {% set CODE = cell.cell_type == "code" %}
 
 <fieldset name="outputs" id="{{ID}}/outputs" {% if CODE and not cell.outputs %}hidden{% endif %} {% if not CODE %}role="presentation"{% endif %}>
-    <legend id={{ID}}/execution_count>Out&nbsp;<output name="execution_count"  role="presentation">{{cell.execution_count or ""}}</output></legend>
+    <legend id={{ID}}/execution_count {% if not CODE %}hidden{% endif %}>Out&nbsp;<output name="execution_count"  role="presentation">{{cell.execution_count or ""}}</output></legend>
     {{cell_display_priority(cell, ID)}}
     {% if cell.cell_type=="markdown" %}
     <output role="presentation" class="render">{{markdown(cell.source) | strip_files_prefix}}</output>

From 7f4450636a9382ae4ac6c15c814396ce25e04304 Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Mon, 5 Jun 2023 18:43:57 -0700
Subject: [PATCH 28/36] visually hide output legend and aria hide label

---
 nbconvert_html5/templates/semantic-forms/smol.html.j2 | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/nbconvert_html5/templates/semantic-forms/smol.html.j2 b/nbconvert_html5/templates/semantic-forms/smol.html.j2
index 2aefb095..551d4526 100644
--- a/nbconvert_html5/templates/semantic-forms/smol.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/smol.html.j2
@@ -123,7 +123,8 @@
 {% set CODE = cell.cell_type == "code" %}
 
 <fieldset name="outputs" id="{{ID}}/outputs" {% if CODE and not cell.outputs %}hidden{% endif %} {% if not CODE %}role="presentation"{% endif %}>
-    <legend id={{ID}}/execution_count {% if not CODE %}hidden{% endif %}>Out&nbsp;<output name="execution_count"  role="presentation">{{cell.execution_count or ""}}</output></legend>
+    <legend id={{ID}}/execution_count hidden>Out&nbsp;<output name="execution_count"  role="presentation">{{cell.execution_count or ""}}</output></legend>
+    <label aria-hidden=true>Out&nbsp;<output name="execution_count"  role="presentation">{{cell.execution_count or ""}}</output></label>
     {{cell_display_priority(cell, ID)}}
     {% if cell.cell_type=="markdown" %}
     <output role="presentation" class="render">{{markdown(cell.source) | strip_files_prefix}}</output>

From ef0c8ddffa23ff8de819584bceaedd724d8c2c52 Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Mon, 5 Jun 2023 18:54:27 -0700
Subject: [PATCH 29/36] label form

---
 nbconvert_html5/templates/semantic-forms/smol.html.j2 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nbconvert_html5/templates/semantic-forms/smol.html.j2 b/nbconvert_html5/templates/semantic-forms/smol.html.j2
index 551d4526..8515cd51 100644
--- a/nbconvert_html5/templates/semantic-forms/smol.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/smol.html.j2
@@ -79,7 +79,7 @@
 {%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
 {%- set CODE = cell.cell_type == "code" -%}
 {%- set tags = celltags(cell) -%}
-<form hidden id="{{ID}}" name="{{ID}}" method="POST" action="{{cell.cell_type}}">
+<form hidden id="{{ID}}" name="{{ID}}" method="POST" action="{{cell.cell_type}}" aria-labelledby={{ID}}/cell_count>
     <label id={{ID}}/cell_count>Cell&nbsp;<output name="cell_count" role="presentation">{{count + 1}}</output></label>
 </form>
 <section aria-labelledby="{{ID}}/cell_count" class="cell {{cell.cell_type}}{% if tags %} {{tags}}{% endif %}" id="{{count}}">

From e9565a8a4fdbbfdfc4e025f2e70fcde9c61ea3ff Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Mon, 5 Jun 2023 19:01:59 -0700
Subject: [PATCH 30/36] hide label with markdown

---
 nbconvert_html5/templates/semantic-forms/smol.html.j2 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nbconvert_html5/templates/semantic-forms/smol.html.j2 b/nbconvert_html5/templates/semantic-forms/smol.html.j2
index 8515cd51..f04613b7 100644
--- a/nbconvert_html5/templates/semantic-forms/smol.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/smol.html.j2
@@ -124,7 +124,7 @@
 
 <fieldset name="outputs" id="{{ID}}/outputs" {% if CODE and not cell.outputs %}hidden{% endif %} {% if not CODE %}role="presentation"{% endif %}>
     <legend id={{ID}}/execution_count hidden>Out&nbsp;<output name="execution_count"  role="presentation">{{cell.execution_count or ""}}</output></legend>
-    <label aria-hidden=true>Out&nbsp;<output name="execution_count"  role="presentation">{{cell.execution_count or ""}}</output></label>
+    <label {% if not CODE %}hidden{% endif %} aria-hidden=true>Out&nbsp;<output name="execution_count"  role="presentation">{{cell.execution_count or ""}}</output></label>
     {{cell_display_priority(cell, ID)}}
     {% if cell.cell_type=="markdown" %}
     <output role="presentation" class="render">{{markdown(cell.source) | strip_files_prefix}}</output>

From cf38b792bc87bb2e73f8a0c8346bd39b0123ef23 Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Mon, 5 Jun 2023 19:06:48 -0700
Subject: [PATCH 31/36] css suppresses markdown output label instead. this is a
 visual mistake that doesnt impac tthe screen reader.

---
 nbconvert_html5/templates/semantic-forms/smol.html.j2 | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/nbconvert_html5/templates/semantic-forms/smol.html.j2 b/nbconvert_html5/templates/semantic-forms/smol.html.j2
index f04613b7..15fa683b 100644
--- a/nbconvert_html5/templates/semantic-forms/smol.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/smol.html.j2
@@ -27,7 +27,8 @@
 
     /** layout **/
     fieldset[name=input]:disabled~ul[role=toolbar],
-    form[action=markdown]+section>fieldset[name=input]:disabled {
+    form[action=markdown]+section>fieldset[name=input]:disabled,
+    main>section.markdown>fieldset[name=outputs]>legend+label {
         display: none;
     }
 
@@ -124,7 +125,7 @@
 
 <fieldset name="outputs" id="{{ID}}/outputs" {% if CODE and not cell.outputs %}hidden{% endif %} {% if not CODE %}role="presentation"{% endif %}>
     <legend id={{ID}}/execution_count hidden>Out&nbsp;<output name="execution_count"  role="presentation">{{cell.execution_count or ""}}</output></legend>
-    <label {% if not CODE %}hidden{% endif %} aria-hidden=true>Out&nbsp;<output name="execution_count"  role="presentation">{{cell.execution_count or ""}}</output></label>
+    <label aria-hidden=true>Out&nbsp;<output name="execution_count"  role="presentation">{{cell.execution_count or ""}}</output></label>
     {{cell_display_priority(cell, ID)}}
     {% if cell.cell_type=="markdown" %}
     <output role="presentation" class="render">{{markdown(cell.source) | strip_files_prefix}}</output>

From 59495d47879d74673c6cc1a2cbd5ac373813ad8a Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Mon, 5 Jun 2023 12:38:44 -0700
Subject: [PATCH 32/36] out announcements got lost on voiceover, try different
 display mechanism

---
 nbconvert_html5/templates/semantic-forms/smol.html.j2 | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/nbconvert_html5/templates/semantic-forms/smol.html.j2 b/nbconvert_html5/templates/semantic-forms/smol.html.j2
index 15fa683b..14ad12b8 100644
--- a/nbconvert_html5/templates/semantic-forms/smol.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/smol.html.j2
@@ -27,6 +27,7 @@
 
     /** layout **/
     fieldset[name=input]:disabled~ul[role=toolbar],
+    fieldset[name=outputs]>legend,  
     form[action=markdown]+section>fieldset[name=input]:disabled,
     main>section.markdown>fieldset[name=outputs]>legend+label {
         display: none;
@@ -124,7 +125,7 @@
 {% set CODE = cell.cell_type == "code" %}
 
 <fieldset name="outputs" id="{{ID}}/outputs" {% if CODE and not cell.outputs %}hidden{% endif %} {% if not CODE %}role="presentation"{% endif %}>
-    <legend id={{ID}}/execution_count hidden>Out&nbsp;<output name="execution_count"  role="presentation">{{cell.execution_count or ""}}</output></legend>
+    <legend id={{ID}}/execution_count>Out&nbsp;<output name="execution_count"  role="presentation">{{cell.execution_count or ""}}</output></legend>
     <label aria-hidden=true>Out&nbsp;<output name="execution_count"  role="presentation">{{cell.execution_count or ""}}</output></label>
     {{cell_display_priority(cell, ID)}}
     {% if cell.cell_type=="markdown" %}

From a1a064bb9ae192e658008d5a9ad368ebb5d56b5c Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Mon, 5 Jun 2023 16:55:08 -0700
Subject: [PATCH 33/36] move markdown cell output outside the fielset group to
 increase the likelihood of announcing a markdown cell

---
 .../templates/semantic-forms/smol.html.j2            | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/nbconvert_html5/templates/semantic-forms/smol.html.j2 b/nbconvert_html5/templates/semantic-forms/smol.html.j2
index 14ad12b8..2fbf8563 100644
--- a/nbconvert_html5/templates/semantic-forms/smol.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/smol.html.j2
@@ -29,7 +29,7 @@
     fieldset[name=input]:disabled~ul[role=toolbar],
     fieldset[name=outputs]>legend,  
     form[action=markdown]+section>fieldset[name=input]:disabled,
-    main>section.markdown>fieldset[name=outputs]>legend+label {
+    form+section[data-outputs="0"]>fieldset[name=outputs] {
         display: none;
     }
 
@@ -84,7 +84,7 @@
 <form hidden id="{{ID}}" name="{{ID}}" method="POST" action="{{cell.cell_type}}" aria-labelledby={{ID}}/cell_count>
     <label id={{ID}}/cell_count>Cell&nbsp;<output name="cell_count" role="presentation">{{count + 1}}</output></label>
 </form>
-<section aria-labelledby="{{ID}}/cell_count" class="cell {{cell.cell_type}}{% if tags %} {{tags}}{% endif %}" id="{{count}}">
+<section aria-labelledby="{{ID}}/cell_count" class="cell {{cell.cell_type}}{% if tags %} {{tags}}{% endif %}" id="{{count}}" data-outputs="{{(cell.outputs or "").__len__()}}">
     <fieldset name=input role=presentation disabled>
         <legend hidden id="{{ID}}/input_count">In&nbsp;<output name="input_count" role="presentation">{{cell.execution_count or ""}}</output></legend>
         <label aria-hidden=true>In&nbsp;<output name="input_count"  role="presentation">{{cell.execution_count or ""}}</output></label>
@@ -124,14 +124,16 @@
 {%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
 {% set CODE = cell.cell_type == "code" %}
 
-<fieldset name="outputs" id="{{ID}}/outputs" {% if CODE and not cell.outputs %}hidden{% endif %} {% if not CODE %}role="presentation"{% endif %}>
+<fieldset name="outputs" id="{{ID}}/outputs">
+    {% if CODE and cell.outputs %}
     <legend id={{ID}}/execution_count>Out&nbsp;<output name="execution_count"  role="presentation">{{cell.execution_count or ""}}</output></legend>
     <label aria-hidden=true>Out&nbsp;<output name="execution_count"  role="presentation">{{cell.execution_count or ""}}</output></label>
     {{cell_display_priority(cell, ID)}}
-    {% if cell.cell_type=="markdown" %}
-    <output role="presentation" class="render">{{markdown(cell.source) | strip_files_prefix}}</output>
     {% endif %}
 </fieldset>
+{% if cell.cell_type=="markdown" %}
+{{ markdown(cell.source) | strip_files_prefix }}
+{% endif %}
 {%- endmacro -%}
 
 {%- macro cell_display_priority(cell, ID) -%}

From 90d09e675697b5b32da0617ce9d69bfa43ee491c Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Mon, 5 Jun 2023 17:56:21 -0700
Subject: [PATCH 34/36] add overflow to the output fieldset instead of the cell

---
 .../templates/semantic-forms/smol.html.j2     | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/nbconvert_html5/templates/semantic-forms/smol.html.j2 b/nbconvert_html5/templates/semantic-forms/smol.html.j2
index 2fbf8563..f0532ff4 100644
--- a/nbconvert_html5/templates/semantic-forms/smol.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/smol.html.j2
@@ -37,6 +37,7 @@
         display: flex;
         overflow-x: hidden;
         flex-direction: column;
+        margin: 1rem;
     }
 
     main>section {
@@ -46,19 +47,24 @@
         gap: 1rem 1rem;
     }
 
-    main>section>fieldset[name=input],
-    main>section.markdown>fieldset[name=outputs] {
+    main>section>fieldset[name=input] {
         border: none;
-        display: flex;
-        flex-direction: row;
+    }
+   
+    fieldset[name=outputs] {
+        overflow: auto;
+        border: 0;
+        padding: 0.01em 0 0 0;
+        margin: 0;
+        min-width: 0;
     }
 
-    textarea[name=source], fieldset[name$=put]>output {
-        width: 100%;
+    body:not(:-moz-handler-blocked) fieldset[name=outputs] {
+        display: table-cell;
     }
 
-    main>section {
-        overflow-x: auto;
+    textarea[name=source], fieldset[name$=put]>output {
+        width: 100%;
     }
 
     /** fix the color constrast on disabled textareas **/

From 32ec0aa565ff28575654b303ab839a437ee3b61a Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Tue, 6 Jun 2023 17:51:16 -0700
Subject: [PATCH 35/36] add visual label for cell numbers

---
 .../templates/semantic-forms/smol.html.j2     | 48 ++++++++++++-------
 1 file changed, 30 insertions(+), 18 deletions(-)

diff --git a/nbconvert_html5/templates/semantic-forms/smol.html.j2 b/nbconvert_html5/templates/semantic-forms/smol.html.j2
index f0532ff4..45e182e3 100644
--- a/nbconvert_html5/templates/semantic-forms/smol.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/smol.html.j2
@@ -16,16 +16,25 @@
     {# use flex to display the main area. each cell will be arranged according to the flex display, grid could be used instead. using flex generates new interactive elements when horizontal or vertical scroll is required. #}
 
     /** focus **/
+    section {
+        outline-width: .2em;
+        outline-offset: -.1em;
+    }
+
     section:focus-within {
-        border: 2px solid;
+        outline-style: solid;
     }
 
     section:hover {
-        outline: 2px dashed;
-        outline-offset: -3px; {# border offset plus a half #}
+        outline-style: dotted;
+    }
+    
+    section:hover:focus-within {
+        outline-style: double;
     }
 
     /** layout **/
+    main>form>label>span,
     fieldset[name=input]:disabled~ul[role=toolbar],
     fieldset[name=outputs]>legend,  
     form[action=markdown]+section>fieldset[name=input]:disabled,
@@ -33,37 +42,39 @@
         display: none;
     }
 
-    main {
-        display: flex;
+    body {
         overflow-x: hidden;
-        flex-direction: column;
-        margin: 1rem;
+        padding: 0 1em 0 1em;
+    }
+
+    main>form {
+        float: right;
+        border-left: solid transparent;
+        padding: .5em 0 0 0;`
     }
 
     main>section {
         display: flex;
         flex-direction: column;
         align-items: stretch;
-        gap: 1rem 1rem;
+        padding: .5em;
     }
 
-    main>section>fieldset[name=input] {
+    main>section>[name=input] {
         border: none;
     }
-   
-    fieldset[name=outputs] {
+
+    textarea[name=source], [name=outputs] {
         overflow: auto;
-        border: 0;
-        padding: 0.01em 0 0 0;
-        margin: 0;
         min-width: 0;
     }
 
-    body:not(:-moz-handler-blocked) fieldset[name=outputs] {
+    body:not(:-moz-handler-blocked) [name=outputs],
+    body:not(:-moz-handler-blocked) [name=input] {
         display: table-cell;
     }
 
-    textarea[name=source], fieldset[name$=put]>output {
+    textarea[name=source], [name=outputs]>output {
         width: 100%;
     }
 
@@ -87,8 +98,9 @@
 {%- set count = nb["cells"].index(cell)-%}{%- set ID = "/cells/" + str(count) -%}
 {%- set CODE = cell.cell_type == "code" -%}
 {%- set tags = celltags(cell) -%}
-<form hidden id="{{ID}}" name="{{ID}}" method="POST" action="{{cell.cell_type}}" aria-labelledby={{ID}}/cell_count>
-    <label id={{ID}}/cell_count>Cell&nbsp;<output name="cell_count" role="presentation">{{count + 1}}</output></label>
+<form id="{{ID}}" name="{{ID}}" method="POST" action="{{cell.cell_type}}" aria-labelledby={{ID}}/cell_count>
+    <label id={{ID}}/cell_count>
+    <span>Cell</span><output name="cell_count" title="Cell {{count + 1}}" role="presentation">{{count + 1}}</output></label>
 </form>
 <section aria-labelledby="{{ID}}/cell_count" class="cell {{cell.cell_type}}{% if tags %} {{tags}}{% endif %}" id="{{count}}" data-outputs="{{(cell.outputs or "").__len__()}}">
     <fieldset name=input role=presentation disabled>

From 4e40ecb101cd0b3b1fcb19107e1d39e50065a8f0 Mon Sep 17 00:00:00 2001
From: tonyfast <tony.fast@gmail.com>
Date: Wed, 7 Jun 2023 11:44:01 -0700
Subject: [PATCH 36/36] hide cell numbers again

---
 .../templates/semantic-forms/smol.html.j2     | 59 +++++++------------
 1 file changed, 21 insertions(+), 38 deletions(-)

diff --git a/nbconvert_html5/templates/semantic-forms/smol.html.j2 b/nbconvert_html5/templates/semantic-forms/smol.html.j2
index 45e182e3..d6ee6aed 100644
--- a/nbconvert_html5/templates/semantic-forms/smol.html.j2
+++ b/nbconvert_html5/templates/semantic-forms/smol.html.j2
@@ -7,34 +7,14 @@
 <meta name="color-scheme" content="dark light">
 
 <style>
-    {# use the system ui and a larger font #}
     body {
         font-size: larger;
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+        overflow-x: hidden;
+        padding: 0 1em 0 1em;
     }
 
-    {# use flex to display the main area. each cell will be arranged according to the flex display, grid could be used instead. using flex generates new interactive elements when horizontal or vertical scroll is required. #}
-
-    /** focus **/
-    section {
-        outline-width: .2em;
-        outline-offset: -.1em;
-    }
-
-    section:focus-within {
-        outline-style: solid;
-    }
-
-    section:hover {
-        outline-style: dotted;
-    }
-    
-    section:hover:focus-within {
-        outline-style: double;
-    }
-
-    /** layout **/
-    main>form>label>span,
+    main>form,
     fieldset[name=input]:disabled~ul[role=toolbar],
     fieldset[name=outputs]>legend,  
     form[action=markdown]+section>fieldset[name=input]:disabled,
@@ -42,17 +22,6 @@
         display: none;
     }
 
-    body {
-        overflow-x: hidden;
-        padding: 0 1em 0 1em;
-    }
-
-    main>form {
-        float: right;
-        border-left: solid transparent;
-        padding: .5em 0 0 0;`
-    }
-
     main>section {
         display: flex;
         flex-direction: column;
@@ -83,7 +52,23 @@
         color: unset;
     }
 
-    /** skip links **/
+    main>section {
+        outline-width: .2em;
+        outline-offset: -.1em;
+    }
+
+    main>section:focus-within {
+        outline-style: solid;
+    }
+
+    main>section:hover {
+        outline-style: dotted;
+    }
+    
+    main>section:hover:focus-within {
+        outline-style: double;
+    }
+
     .visually-hidden:not(:focus):not(:active) {
         clip: rect(0 0 0 0);
         clip-path: inset(50%);
@@ -100,7 +85,7 @@
 {%- set tags = celltags(cell) -%}
 <form id="{{ID}}" name="{{ID}}" method="POST" action="{{cell.cell_type}}" aria-labelledby={{ID}}/cell_count>
     <label id={{ID}}/cell_count>
-    <span>Cell</span><output name="cell_count" title="Cell {{count + 1}}" role="presentation">{{count + 1}}</output></label>
+    Cell&nbsp;<output name="cell_count" role="presentation">{{count + 1}}</output></label>
 </form>
 <section aria-labelledby="{{ID}}/cell_count" class="cell {{cell.cell_type}}{% if tags %} {{tags}}{% endif %}" id="{{count}}" data-outputs="{{(cell.outputs or "").__len__()}}">
     <fieldset name=input role=presentation disabled>
@@ -161,8 +146,6 @@
 {%- endfor -%}
 {%- endmacro -%}
 
-
-
 {% block body_header %}
 <body>
     {% set title = nb.metadata.get('title', resources['metadata']['name']) | escape_html_keep_quotes %}