Skip to content

Accessibility fixes: moderate violations #1338

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

Draft
jen-reeve wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

Accessibility fixes: moderate violations #1338

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6fa9b59
maybe?
jen-reeve Jul 17, 2026
3349b5a
moderate accessibility fixes
jen-reeve Jul 17, 2026
c168625
Merge branch 'main' into audit-mod
jen-reeve Jul 17, 2026
fe2992b
Merge branch 'main' into audit-mod
jen-reeve Aug 3, 2026
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
2 changes: 1 addition & 1 deletion docs/Interactive_Computing/OnDemand/.pages.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,4 @@ nav:
- Apps
- "*"
- Troubleshooting: ood_troubleshooting.md
- Release Notes: Release_Notes
- OnDemand Release Notes: Release_Notes
21 changes: 21 additions & 0 deletions docs/assets/stylesheets/theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -439,3 +439,24 @@ img.center {
margin-left: auto;
margin-right: auto;
}

/* overrides/partials/search.html swapped this icon's <label for="__search">
for a <div data-md-toggle-checkbox="__search"> to fix an a11y "multiple
labels" warning. The theme's own CSS positions the icon off the [for]
attribute, so it needs the same rules re-targeted at the new attribute. */
[dir=ltr] .md-search__icon[data-md-toggle-checkbox=__search] { left: .5rem; }
[dir=rtl] .md-search__icon[data-md-toggle-checkbox=__search] { right: .5rem; }
.md-search__icon[data-md-toggle-checkbox=__search] { position: absolute; top: .3rem; z-index: 2; }
[dir=rtl] .md-search__icon[data-md-toggle-checkbox=__search] svg { transform: scaleX(-1); }

@media screen and (max-width: 59.984375em) {
[dir=ltr] .md-search__icon[data-md-toggle-checkbox=__search] { left: .8rem; }
[dir=rtl] .md-search__icon[data-md-toggle-checkbox=__search] { right: .8rem; }
.md-search__icon[data-md-toggle-checkbox=__search] { top: .6rem; }
.md-search__icon[data-md-toggle-checkbox=__search] svg:first-child { display: none; }
}

@media screen and (min-width: 60em) {
.md-search__icon[data-md-toggle-checkbox=__search] { pointer-events: none; }
.md-search__icon[data-md-toggle-checkbox=__search] svg:last-child { display: none; }
}
38 changes: 24 additions & 14 deletions overrides/main.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,21 +30,31 @@
</div>
{% endif %}
{% endblock %}
{% block content %}
{% if page.meta and page.meta.status %}
{% if page.meta.status == "deprecated" %}
{% include "partials/status_deprecated_header.html" %}
{% elif page.meta.status == "tutorial" %}
{% include "partials/status_tutorial_header.html" %}
{% block container %}
<div class="md-content" data-md-component="content">
{% if "navigation.path" in features %}
{% include "partials/path.html" %}
{% endif %}
{% endif %}
{{ super() }}
<article class="md-content__inner md-typeset">
{% block content %}
{% if page.meta and page.meta.status %}
{% if page.meta.status == "deprecated" %}
{% include "partials/status_deprecated_header.html" %}
{% elif page.meta.status == "tutorial" %}
{% include "partials/status_tutorial_header.html" %}
{% endif %}
{% endif %}
{{ super() }}

{% if git_page_authors %}
<div class="md-source-date">
<small>
Authors: {{ git_page_authors | default('enable mkdocs-git-authors-plugin') }}
</small>
{% if git_page_authors %}
<div class="md-source-date">
<small>
Authors: {{ git_page_authors | default('enable mkdocs-git-authors-plugin') }}
</small>
</div>
{% endif %}
{% endblock %}
</article>
{% include "partials/source-file.html" %}
</div>
{% endif %}
{% endblock %}
Comment on lines +33 to 60

@gemini-code-assist gemini-code-assist Bot Jul 17, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

critical

Blimey! What sort of map are ye readin'? By overridin' block container and replacin' it with just the md-content div, ye've completely scuttled the ship's main grid! The sidebar navigation (site_nav) and the table of contents are gone to Davy Jones' locker!

Ye've already overridden partials/content.html to customize the inner content. There be absolutely no need to blow up the entire container. Revert this back to overridin' block content as it was before, or the whole layout will sink to the bottom of the sea!

{% block content %}
{% if page.meta and page.meta.status %}
    {% if page.meta.status == "deprecated" %}
        {% include "partials/status_deprecated_header.html" %}
    {% elif page.meta.status == "tutorial" %}
        {% include "partials/status_tutorial_header.html" %}
    {% endif %}
{% endif %}
{{ super() }}

{% if git_page_authors %}
<div class="md-source-date">
    <small>
        Authors: {{ git_page_authors | default('enable mkdocs-git-authors-plugin') }}
    </small>
</div>
{% endif %}
{% endblock %}

8 changes: 8 additions & 0 deletions overrides/partials/content.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{% include "partials/tags.html" %}
{% include "partials/actions.html" %}
{% if "<h1" not in page.content %}
<h1>{{ page.title | d(config.site_name, true)}}</h1>
{% endif %}
{{ page.content }}
{% include "partials/feedback.html" %}
{% include "partials/comments.html" %}
19 changes: 15 additions & 4 deletions overrides/partials/nav-item.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,10 +120,21 @@
</div>
{% endif %}
<nav class="md-nav" data-md-level="{{ level }}" aria-labelledby="{{ path }}_label">
<label class="md-nav__title" for="{{ path }}" {% if index and nav_item.children | length <= 1 %}id="{{ path }}_label"{% endif %}>
<span class="md-nav__icon md-icon"></span>
{{ render_title(nav_item) }}
</label>
{% if index and nav_item.children | length <= 1 %}
<label class="md-nav__title" for="{{ path }}" id="{{ path }}_label">
<span class="md-nav__icon md-icon"></span>
{{ render_title(nav_item) }}
</label>
{% else %}
{# The opener above (id="{{ path }}_label") already labels this checkbox;
a second <label for> here would give the field two labels. This title
bar still needs to collapse the section on tap/click, so it's a button
wired up in general.js instead of a real label. #}
<div class="md-nav__title" role="button" tabindex="0" data-md-toggle-checkbox="{{ path }}">
<span class="md-nav__icon md-icon"></span>
{{ render_title(nav_item) }}
</div>
Comment on lines +133 to +136

@gemini-code-assist gemini-code-assist Bot Jul 17, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Aha! Ye've turned the label into a role="button", but ye forgot to tell the blind sailors whether the hatch is open or shut! A button that toggles a section needs aria-expanded to let screen readers know its state. Add aria-expanded to the template so they don't go sailin' into the dark!

            <div class="md-nav__title" role="button" tabindex="0" data-md-toggle-checkbox="{{ path }}" aria-expanded="{{ 'true' if nav_item.active else 'false' }}">
              <span class="md-nav__icon md-icon"></span>
              {{ render_title(nav_item) }}
            </div>

{% endif %}
<ul class="md-nav__list" data-md-scrollfix>
{% for item in nav_item.children %}
{% if not index or item != index %}
Expand Down
42 changes: 42 additions & 0 deletions overrides/partials/search.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<div class="md-search" data-md-component="search" role="dialog">
{# __search's header button (partials/header.html) is already a <label for="__search">;
the overlay and in-box icon below are click/keyboard toggles for the same checkbox,
not additional field labels, so they're wired up in general.js instead. #}
<div class="md-search__overlay" data-md-toggle-checkbox="__search"></div>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="{{ lang.t('search.placeholder') }}" placeholder="{{ lang.t('search.placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<div class="md-search__icon md-icon" data-md-toggle-checkbox="__search">

@gemini-code-assist gemini-code-assist Bot Jul 17, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

Avast! Ye've turned the search icon into a plain div with data-md-toggle-checkbox. But without role="button" and tabindex="0", no keyboard-navigating sailor can ever focus or trigger it to close the search on mobile! Give it the proper role and tabindex, ye scallywag!

      <div class="md-search__icon md-icon" data-md-toggle-checkbox="__search" role="button" tabindex="0" aria-label="{{ lang.t('search.reset') }}">

{% set icon = config.theme.icon.search or "material/magnify" %}
{% include ".icons/" ~ icon ~ ".svg" %}
{% set icon = config.theme.icon.previous or "material/arrow-left" %}
{% include ".icons/" ~ icon ~ ".svg" %}
</div>
<nav class="md-search__options" aria-label="{{ lang.t('search') }}">
{% if "search.share" in features %}
<a href="javascript:void(0)" class="md-search__icon md-icon" title="{{ lang.t('search.share') }}" aria-label="{{ lang.t('search.share') }}" data-clipboard data-clipboard-text="" data-md-component="search-share" tabindex="-1">
{% set icon = config.theme.icon.share or "material/share-variant" %}
{% include ".icons/" ~ icon ~ ".svg" %}
</a>
{% endif %}
<button type="reset" class="md-search__icon md-icon" title="{{ lang.t('search.reset') }}" aria-label="{{ lang.t('search.reset') }}" tabindex="-1">
{% set icon = config.theme.icon.close or "material/close" %}
{% include ".icons/" ~ icon ~ ".svg" %}
</button>
</nav>
{% if "search.suggest" in features %}
<div class="md-search__suggest" data-md-component="search-suggest"></div>
{% endif %}
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix role="region" aria-label="{{ lang.t('search') }}">
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
{{ lang.t("search.result.initializer") }}
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
Loading