Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Less fieldset more details #73

Merged
merged 12 commits into from
Oct 26, 2023
Merged

Less fieldset more details #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
58ebb75
extract components into templates, drop fieldset in favor of details
tonyfast Oct 23, 2023
45e0671
fix toc template
tonyfast Oct 23, 2023
21e60fe
separate out js files
tonyfast Oct 23, 2023
60964c5
nu validator fix
tonyfast Oct 23, 2023
a5986a7
fix w3c validator aria labels
tonyfast Oct 24, 2023
1c9ddaf
fix bad settings
tonyfast Oct 24, 2023
8ce6b54
margins
tonyfast Oct 24, 2023
1c8c12a
tighten up style changes and add more options
tonyfast Oct 25, 2023
0102d8c
start progressing from the static state.
tonyfast Oct 25, 2023
de4afc0
fix announcements
tonyfast Oct 25, 2023
697d97a
aria live and textarea style improvements
tonyfast Oct 25, 2023
53445be
dial in activity log for updates
tonyfast Oct 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion dodo.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,8 @@ def get_pygments(target, theme):
"""body {
background-color: var(--nb-background-color-%s);
color-scheme: %s;
}\n""" % (theme, theme)
}\n"""
% (theme, theme)
+ pygments.formatters.get_formatter_by_name(
"html", style=f"a11y-high-contrast-{theme}"
).get_style_defs()
Expand Down Expand Up @@ -80,6 +81,7 @@ def task_copy(notebooks, configurations, target):
notebooks = list(map(Path, notebooks))
configurations = list(map(Path, configurations))
styles = list(TEMPLATES.glob("*.css"))
scripts = list(TEMPLATES.glob("*.js"))
targets = [NB / x.name for x in notebooks]

def readme(target, ext, title):
Expand All @@ -103,6 +105,13 @@ def readme(target, ext, title):
targets=[HTML / x.name for x in styles],
uptodate=list(map(Path.exists, targets)),
)
yield dict(
name="scripts",
clean=True,
actions=[(cp, (x, HTML / x.name)) for x in scripts],
targets=[HTML / x.name for x in scripts],
uptodate=list(map(Path.exists, targets)),
)
targets = [CONFIGS / x.name for x in configurations]
yield dict(
name="configurations",
Expand Down
11 changes: 11 additions & 0 deletions nbconvert_html5/templates/semantic-forms/activity-log.html.j2
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<details class="log">
<summary>activity log</summary>
</details>
<table aria-labelledby="nb-activity-log-label" aria-live="polite">
<tr>
<th>time</th>
<td>message</td>
{# all forward behaviors should be reversible except code execution #}
{# <td>action</td> #}
</tr>
</table>
12 changes: 12 additions & 0 deletions nbconvert_html5/templates/semantic-forms/activity-log.j2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<fieldset form="settings" name="log">
<legend id="nb-activity-log-label">activity log</legend>
<details>
<summary>activity log</summary>
</details>
<table aria-labelledby="nb-activity-log-label">
<tr>
<th>time</th>
<td>action</td>
</tr>
</table>
</fieldset>
Empty file added nbconvert_html5/templates/semantic-forms/aside-dl.html.j2
View file
Open in desktop
Empty file.
144 changes: 74 additions & 70 deletions nbconvert_html5/templates/semantic-forms/base.html.j2
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,10 @@ the base template defines notebook independent components.
an accessible base template provides a substrate to progressively enchance
the notebook experiennce from browse to edit/focus mode.
#}

{%- extends 'semantic-forms/displays.j2.html' -%}
{% from 'celltags.j2' import celltags %}
{% set title = nb.metadata.get('title', resources['metadata']['name']) | escape_html_keep_quotes %}


{%- block header -%}
<!DOCTYPE html>
<html lang="en">
Expand All @@ -29,8 +27,6 @@ the notebook experiennce from browse to edit/focus mode.
<link rel="stylesheet" href="style.css">
<link id="nb-light-theme" rel="stylesheet" href="light-code.css">
<link id="nb-dark-theme" disabled rel="stylesheet" href="dark-code.css">
<style id="nb-font-size-style"></style>
<style id="nb-font-family-style"></style>
{%- endblock head -%}
{%- block html_head_js_mathjax -%}{%- endblock html_head_js_mathjax -%}
</head>
Expand All @@ -50,57 +46,56 @@ the notebook experiennce from browse to edit/focus mode.
{# site authors with include their site specific headers in this region. #}
{# a subsequent tab stop will indicate to keyboard and AT users that there are
accessibility settings that can be toggled. #}
<button onclick="openDialog()" aria-controls="nb-settings" accesskey=",">Settings</button>
{% include "semantic-forms/settings.html.j2" %}
</header>
{# this is the main section, but we want landmark navigation to go to the first cell in
the notebook. the extending template will define the location of the main content. #}
<fieldset form="notebook" role="presentation">
<legend id="nb-notebook-label" hidden>notebook</legend>
<section aria-labelledby="nb-toc">
{# a notebook will provide visual structural navigation for a document.
this is a feature of screen readers that is not common to sighted users.
the implementation here is very naive. users will need to know to collapse the heading
to skip the link tree. the best implementation is a tree that will consume a single tab stop
and allow arrow key navigation. #}
<details open>
{# if the label is on the summary then the bullet is announced as the label and it should not be #}
<summary><span id="nb-toc">table of contents</span></summary>
{# the table of contents is populated in python. #}
</details>
</section>
<section role="main" aria-labelledby="nb-notebook-label">
{% endblock body_header %}
<main aria-labelledby="nb-notebook-label">
<form name="notebook" id="notebook" aria-labelledby="nb-notebook-label">
<section aria-labelledby="nb-toc">
{# a notebook will provide visual structural navigation for a document.
this is a feature of screen readers that is not common to sighted users.
the implementation here is very naive. users will need to know to collapse the heading
to skip the link tree. the best implementation is a tree that will consume a single tab stop
and allow arrow key navigation. #}
<details open>
{# if the label is on the summary then the bullet is announced as the label and it should not be
#}
<summary id="toc"><span id="nb-toc">table of contents</span></summary>
{# the table of contents is populated in python. #}
<ol></ol>
</details>
</section>
<label><input id="nb-edit-mode" type="checkbox" name="edit">edit mode</label>
<button aria-controls="nb-metadata" onclick="openDialog()">Metadata</button>
<button aria-controls="nb-expanded-dialog" onclick="openDialog()" accesskey="+">expand and collapse cells</button>
<button aria-controls="nb-visibility-dialog" onclick="openDialog()" accesskey="-">show and hide cell parts</button>
<button onclick="openDialog()" aria-controls="nb-help" accesskey="?">help</button>
<button type="submit">Run</button>
</form>
{% endblock body_header %}

{% block body_footer %}
</section>
{% block body_footer %}
{# dialogs need to be outside the form because we cant nest forms #}
{% include "semantic-forms/expanded.html.j2"%}
{% include "semantic-forms/visibility.html.j2"%}
<dialog id="nb-metadata">
<fieldset name="metadata" form="notebook">
</fieldset>
<form method="dialog">
<button>Close</button>
<button formmethod="dialog">Close</button>
{{nb.metadata}}
</form>
</fieldset>
</dialog>
</dialog>
{% include "semantic-forms/schema-dl.html.j2" %}
</main>
{# a notebook begins as a static document that can progressively
add features like run time computation. #}
<form name="notebook" id="notebook" aria-labelledby="nb-controls-label">
<label><input type="checkbox">edit mode</label>
<fieldset disabled>
<legend id="nb-controls-label">Notebook Controls</legend>
<button type="submit">Run</button>
</fieldset>
<button onclick="openDialog()" aria-controls="nb-metadata">Metadata</button>
</form>
{# skip to top is needed for long notebooks.
it is difficult to access for keyboard users. #}
{% include "semantic-forms/settings.html.j2" %}
<footer>
<fieldset form="notebook" name="log">
<ul class="activityLog" aria-live="polite">
</ul>
</fieldset>
{% set LOGID = True %}
{% include "semantic-forms/activity-log.html.j2" %}
<a href="#notebook" accesskey="0">skip to top</a>
</footer>
<script src="settings.js"></script>
{# <script src="https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js" defer></script>'' #}
</body>

</html>
Expand All @@ -111,7 +106,7 @@ the notebook experiennce from browse to edit/focus mode.
<section class="cell {{cell.cell_type}}" aria-labelledby="cell-{{loop.index}}-cell_type {{loop.index}}"
data-loc="{{cell.source.splitlines().__len__()}}" {% if cell.cell_type=="code" %}
data-outputs="{{cell.outputs.__len__()}}" {% endif %}>
{{cell_anchor(loop.index)}}
{{cell_anchor(loop.index, cell.cell_type)}}
{{cell_form(i)}}
{{cell_execution_count(loop.index, cell.execution_count)}}
{{cell_cell_type(loop.index, cell.cell_type)}}
Expand All @@ -120,13 +115,24 @@ the notebook experiennce from browse to edit/focus mode.
{{cell_metadata(loop.index, cell.metadata)}}
</section>
{% endmacro%}
{% macro cell_anchor(i, cell_type)%}
<a href="#{{i}}" id="{{i}}" aria-labelledby="nb-cell-label {{i}}"
aria-describedby="nb-{{cell_type}}-label nb-cell-label cell-{{i}}-loc nb-loc-label">{{i}}</a>
{% endmacro %}

{% macro cell_anchor(i) %}
<a href="#{{i}}" id="{{i}}" aria-labelledby="nb-def-cell {{i}}">{{i}}</a>
{% macro cell_form(i, cell_type) %}
{# the cell form acts a formal reference for each cell. as a form, each cell can handle a submission process
that would include talking to the kernel. #}
<form class="nb-toolbar" id="cell-{{i}}" name="cell-{{i}}" aria-labelledby="cell-{{i}}-source-label" hidden>
<fieldset>
<legend>actions</legend>
<button type="submit">Run Cell</button>
</fieldset>
</form>
{% endmacro %}

{% macro cell_cell_type(i, cell_type) %}
<select form="cell-{{i}}" name="cell_type" disabled>
<select form="cell-{{i}}" name="cell_type" aria-describedby="nb-cell_type-desc">
<option value="markdown" {%- if cell_type=="markdown" %} selected{% endif%}>markdown</option>
<option value="code" {%- if cell_type=="code" %} selected{% endif%}>code</option>
<option value="raw" {%- if cell_type=="raw" %} selected{% endif%}>raw</option>
Expand All @@ -138,36 +144,30 @@ the notebook experiennce from browse to edit/focus mode.
<output form="cell-{{i}}" name="execution_count" id="cell-{{i}}-execution_count">#{{execution_count}}</output>
{% endmacro %}

{% macro cell_form(i) %}
<form id="cell-{{i}}" name="/cells/{{i}}" aria-labelledby="cell-{{i}}-cell_type">
<button type="submit">Run Cell</button>
</form>
{% endmacro %}

{% macro cell_source(i, source, execution_count) %}
{% set label -%}
In</span><span aria-hidden="true">[</span><span>{{execution_count}}</span><span aria-hidden="true">]</span>
{%- endset %}
<fieldset name="input">
<legend hidden id="cell-{{i}}-input">
In {{execution_count}}
</legend>
<label aria-hidden="true" for="cell-{{i}}-source">{{label}}</label>
<details open aria-labelledby="cell-{{i}}-source-label">
<summary inert id="cell-{{i}}-source-label">{{label}}</summary>
<textarea form="cell-{{i}}" id="cell-{{i}}-source" name="source" rows="{{source.splitlines().__len__()}}"
aria-labelledby="cell-{{i}}-input">{{source}}</textarea>
aria-labelledby="cell-{{i}}-source-label nb-source-label" aria-describedby="nb-source-desc"
readonly>{{source}}</textarea>
{{highlight(source)}}
</fieldset>
</details>
{% endmacro %}

{% macro cell_metadata(i, metadata) %}
<button name="metadata" form="cell-{{i}}">Metadata</button>
<button name="metadata" form="cell-{{i}}" aria-describedby="nb-metadata-desc" aria-controls="cell-{{i}}-metadata"
onclick="openDialog()">metadata</button>
<dialog id="cell-{{i}}-metadata">
<form>
<button formmethod="dialog">Close</button>
<pre><code>
{{metadata}}
</code></pre>
</form>
<pre><code>
{{metadata}}
</code></pre>
</dialog>
{% endmacro %}

Expand All @@ -177,15 +177,19 @@ In</span><span aria-hidden="true">[</span><span>{{execution_count}}</span><span
aria-hidden="true">]</span>{% else %}Cell {{i}}{% endif %}{% endset %}
<span hidden id="cell-{{i}}-outputs-len">{{outputs.__len__()}} outputs</span>
{% if CODE and outputs %}
<fieldset name="outputs" id="cell-{{i}}-outputs" aria-describedby="cell-{{i}}-outputs-len">
<legend hidden>Out {{execution_count}}</legend>
{% if outputs %}
<span aria-hidden="true">{{label}}</span>
{% endif %}
{% if outputs %}
<details open aria-labelledby="cell-{{i}}-outputs-label">
<summary inert id="cell-{{i}}-outputs-label" aria-describedby="nb-outputs-desc">{{label}}</summary>
{# the output description should mention the number of outputs
saying zero outputs should be an option. a cell without an output is probably a violation. #}
{{cell_display_priority(i, outputs, cell)}}
</fieldset>
</details>
{% endif %}
{% elif cell_type=="markdown" %}
{{ markdown(source) | strip_files_prefix }}
<details open aria-labelledby="cell-{{i}}-outputs-label">
<summary hidden inert id="cell-{{i}}-outputs-label">{{label}}</summary>
{{ markdown(source) | strip_files_prefix }}
</details>
{% endif %}
{%- endmacro -%}

Expand Down
17 changes: 17 additions & 0 deletions nbconvert_html5/templates/semantic-forms/expanded.html.j2
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{% from "semantic-forms/visibility.html.j2" import header_row, checkbox_row%}
<dialog id="nb-expanded-dialog">
<form name="expanded">
<button formmethod="dialog">Close</button>
<table role="grid">
<tbody>
{% set labels = "cell source outputs" %}
{{header_row(labels)}}
{{checkbox_row("code", labels)}}
{{checkbox_row("markdown", labels)}}
{{checkbox_row("raw", labels)}}
</tbody>
</table>
</form>
{% include "semantic-forms/activity-log.html.j2" %}

</dialog>
59 changes: 59 additions & 0 deletions nbconvert_html5/templates/semantic-forms/schema-dl.html.j2
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<dialog id="nb-help">
<h1>notebook help</h1>
<form>
<button formmethod="dialog">close</button>
<h2 id="nb-defs-label">definitions</h2>
<dl aria-labelledby="nb-defs-label">
<dt id="nb-notebook-label">notebook</dt>
<dd>a collections of <a href="#nb-cells-label">cells</a></dd>
<dd>
<dl aria-labelledby="nb-notebook-label nb-defs-label">
<dt id="nb-root-metadata-label">metadata</dt>
<dd id="nb-root-metadata-desc">{{schema.properties.metadata.description}}</dd>
<dt id="nb-cells-label">cells</dt>
<dd id="nb-cells-desc">{{schema.properties.cells.description}}</dd>
</dl>
</dd>
<dt id="nb-cell-label">cell</dt>
<dd>
<dl aria-labelledby="nb-cell-label nb-defs-label">
<dt id="nb-index-label">index</dt>
<dd id="nb-index-desc">the ordinal location of the cell in the notebook, counting begins from 1.
</dd>
<dt id="nb-source-label">source</dt>
<dd id="nb-source-desc">{{schema.definitions.misc.source.description}}</dd>
<dt id="nb-metadata-label">metadata</dt>
<dd id="nb-metadata-desc">{{schema.definitions.raw_cell.properties.metadata.description}}</dd>
<dt id="nb-cell_type-label">cell type</dt>
<dd>the are three kinds of cells
<dl aria-labelledby="nb-cell_type-label">
<dt id="nb-code-label">code</dt>
<dd id="nb-code-desc">{{schema.definitions.code_cell.description}}</dd>
<dt id="nb-markdown-label">markdown</dt>
<dd id="nb-markdown-desc">{{schema.definitions.markdown_cell.description}}</dd>
<dt id="nb-raw-label">raw</dt>
<dd id="nb-raw-desc">{{schema.definitions.raw_cell.description}}</dd>
</dl>
</dd>
<dd id="nb-cell_type-desc">{{schema.definitions.raw_cell.properties.cell_type.description}}</dd>
<dt id="nb-execution_count-label">execution count</dt>
<dd id="nb-execution_count-desc">
{{schema.definitions.code_cell.properties.execution_count.description}}
</dd>

<dt id="nb-outputs-label">outputs</dt>
<dd id="nb-outputs-desc">
{{schema.definitions.code_cell.properties.outputs.description}}
</dd>
<dt id="nb-attachments-label">attachments</dt>
<dd id="nb-attachments-desc">{{schema.definitions.misc.attachments.description}}</dd>
<dt id="nb-loc-label">lines of code</dt>
<dd>lines of code in the cell, including whitespace.</dd>
{# this probably should be significant lines of code #}
</dl>
</dd>
<dt id="nb-toolbar-label">toolbar</dt>
<dd>composite widgets that allow for arrow key navigation</dd>
</dl>
</form>
</dialog>
Loading
Loading