Skip to content

olh screen reader improvements #4986

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

Open
wants to merge 16 commits into
base: master
Choose a base branch
from
Open

olh screen reader improvements #4986

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
1626fce
a11y: #4220 olh featured article links add aria markup
StephDriver Sep 26, 2025
796b3a4
a11y: #4220 box link aria
StephDriver Sep 29, 2025
403e392
a11y: olh carousel add orbit bullets
StephDriver Sep 29, 2025
2af13f9
a11y: olh carousel set autoplay=false
StephDriver Sep 29, 2025
51f3e4e
a11y: olh carousel caption colour contrast
StephDriver Sep 29, 2025
aa65329
a11y: #4225 olh nav line formatting for ease of editing
StephDriver Sep 30, 2025
de9019c
a11y: #4225 olh nav .is_dropdown_submenu_parent to is_dropdown_submen…
StephDriver Sep 30, 2025
3d20430
a11y: #4225 olh nav add aria markup to dropdowns
StephDriver Sep 30, 2025
542f6a7
a11y: #4225 olh nav suport aria-expanded
StephDriver Sep 30, 2025
9921af2
a11y: #4225 olh nav make narrow alignment consistent
StephDriver Sep 30, 2025
788cd31
a11y: #4225 olh nav remove duplicate </nav>
StephDriver Sep 30, 2025
3eaf9ab
a11y: #4225 olh improve article text options button
StephDriver Sep 30, 2025
7850a18
a11y: #4225 olh make article text options keyboard navigable
StephDriver Sep 30, 2025
826730c
a11y: #4225 olh make article text options widescreen style updates
StephDriver Sep 30, 2025
0befd06
a11y: #4225 olh fix article text option dropdown linebreak
StephDriver Sep 30, 2025
e551fdf
a11y: #4225 olh keyboard navigation focus-visible
StephDriver Sep 30, 2025
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
34 changes: 34 additions & 0 deletions src/themes/OLH/assets/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,40 @@ $(document).on('click', '[data-toggle]', function() {
$button.attr('aria-expanded', !currentExpanded);
});

// Accessibility: Handle Nav aria-expanded on keyboard navigation
$(document).on('click', '[aria-expanded]', function() {
var $button = $(this);
var currentExpanded = $button.attr('aria-expanded') === 'true';
$button.attr('aria-expanded', !currentExpanded);
});

function toggleAriaExpanded(submenu, expanded) {
var $parent = submenu.parent('li.is-dropdown-submenu-parent');
var $button = $parent.find('a[aria-expanded]');
$button.attr('aria-expanded', expanded);
}

// Accessibility: Listen for Foundation menu events to update aria-expanded
$(document).ready(function() {
// dropdown menu (wide screen)
$(document).on('show.zf.dropdownmenu', function(event, $sub) {
toggleAriaExpanded($sub, true);
});

$(document).on('hide.zf.dropdownmenu', function(event, $sub) {
$('a[aria-expanded="true"]').attr('aria-expanded', 'false');
});

// drilldown menu (narrow screen)
$(document).on('open.zf.drilldown', function(event, $elem) {
toggleAriaExpanded($elem, true);
});

$(document).on('hide.zf.drilldown', function(event, $elem) {
$('a[aria-expanded="true"]').attr('aria-expanded', 'false');
});
});

$(".search-toggle").click(function() {
var $searchMenu = $("#search-menu");
if ($searchMenu.is(':visible')) {
Expand Down
101 changes: 101 additions & 0 deletions src/themes/OLH/assets/scss/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -614,12 +614,42 @@ div.caption span.label {
li {
a {
color: $dark-gray;
padding: 0.5rem 0;
display: block;
text-decoration: none;

@include breakpoint(medium) {
padding: 0.5rem 1rem;
}
}
button {
color: $dark-gray;
background: none;
border: none;
padding: 0.5rem 0;
font: inherit;
cursor: pointer;
text-decoration: none;
text-align: left;
display: block;
width: 100%;

@include breakpoint(medium) {
padding: 0.5rem 1rem;
}
}
&:hover {
background: $medium-gray;
}
i {
margin-top: rem-calc(-5px);
margin-right: 0.5rem;
vertical-align: middle;
}

// Dropdown menu items should stay on single line
.menu.vertical li {
white-space: nowrap;
}
}
}
Expand Down Expand Up @@ -1483,3 +1513,74 @@ span + .btn-background {
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
}


// carousel style overrides
.orbit-bullets button{
min-width: 24px;
min-height: 24px;
}

.orbit-caption{
color: var(--primary-light-color);
background-color: color-mix(in srgb, var(--primary-dark-color) 90%, transparent);
}

/*
* WCAG 2.4.7 Focus Visible - Two-Color Focus Indicator (Technique C40)
* Requires at least 1:9 contrast ratio between the two focus colours.
*/
:root {
--focus-light: #F9F9F9;
--focus-dark: #193146;
--focus-ring-size: 4px;
}

/* Prevent layout shifts */
/* Inline links override to prevent layout shifts without affecting typography */
p a,
span a,
li a {
margin: calc(-1 * var(--focus-ring-size));
padding: var(--focus-ring-size);
box-sizing: border-box;
}

p a,
span a {
display: inline-block;
}


/* General */
*:focus-visible {
outline: 2px var(--focus-light) solid;
outline-offset: 0;
box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-dark);
}

/* focus bounding boxes */
a:focus-visible {
outline: 2px var(--focus-light) solid;
outline-offset: 0;
box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-dark);
display: inline-block;
white-space: normal;
}

input[type="text"]:focus-visible ,
input[type="textarea"].tinymce:focus-visible ,
input[type="email"]:focus-visible ,
input[type="password"]:focus-visible ,
input[type="search"]:focus-visible ,
input[type="number"]:focus-visible ,
input[type="date"]:focus-visible ,
input[type="datetime-local"]:focus-visible ,
input[type="file"]:focus-visible ,
input[type="submit"]:focus-visible {
outline: 2px var(--focus-light) solid;
outline-offset: 0;
box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-dark);
}

/* end of WCAG 2.4.7 Focus Visible - Two-Color Focus Indicator (Technique C40) */
190 changes: 140 additions & 50 deletions src/themes/OLH/templates/core/nav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,96 +6,186 @@
<nav>
<div class="top-bar" id="main-menu" style="display: block;">
<ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
{% if request.journal.nav_home %}<li><a href="{% url 'website_index' %}">{% trans 'Home' %}</a></li>{% endif %}
{% if request.journal.nav_news %}<li><a href="{% url 'core_news_list' %}">{{ journal_settings.news.news_title }}</a></li>{% endif %}
{% for item in navigation_items %}
{% if item.has_sub_nav %}
<li class=".is-dropdown-submenu-parent"><a href="#"
data-options="is_hover:true; hover_timeout:5000">{{ item.link_name }}</a>
<ul class="menu vertical medium-horizontal">
{% if item.link %}<li><a href="{{ item.url }}">{{ item.link_name }}</a></li>{% endif %}
{% for subnav in item.sub_nav_items %}
<li><a href="{{ subnav.url }}">{{ subnav.link_name }}</a></li>
{% endfor %}
</ul>
{% if request.journal.nav_home %}
<li>
<a href="{% url 'website_index' %}">{% trans 'Home' %}</a>
</li>
{% elif not item.for_footer %}
<li><a href="{{ item.url }}">{{ item.link_name }}</a></li>
{% endif %}

{% if request.journal.nav_news %}
<li>
<a href="{% url 'core_news_list' %}">{{ journal_settings.news.news_title }}</a>
</li>
{% endif %}

{% for item in navigation_items %}
{% if item.has_sub_nav %}
<li class="is-dropdown-submenu-parent">
<a href="#" data-options="is_hover:true; hover_timeout:5000"
role="button"
aria-expanded="false"
aria-controls="menu-nav-item-{{ item.counter }}"
>
{{ item.link_name }}
</a>
<ul class="menu vertical medium-horizontal" id="menu-nav-item-{{ item.counter }}">
{% if item.link %}
<li>
<a href="{{ item.url }}">{{ item.link_name }}</a>
</li>
{% endif %}
{% for subnav in item.sub_nav_items %}
<li>
<a href="{{ subnav.url }}">{{ subnav.link_name }}</a>
</li>
{% endfor %}
</ul>
</li>
{% elif not item.for_footer %}
<li>
<a href="{{ item.url }}">{{ item.link_name }}</a>
</li>
{% endif %}
{% endfor %}
{% if request.journal.nav_articles %}<li><a href="{% url 'journal_articles' %}">{% trans 'Articles' %}</a></li>{% endif %}
{% if request.journal.nav_issues %}<li><a href="{% url 'journal_issues' %}">{% trans 'Issues' %}</a></li>{% endif %}

{% if request.journal.nav_articles %}
<li>
<a href="{% url 'journal_articles' %}">{% trans 'Articles' %}</a>
</li>
{% endif %}

{% if request.journal.nav_issues %}
<li>
<a href="{% url 'journal_issues' %}">{% trans 'Issues' %}</a>
</li>
{% endif %}

{% if journal_settings.general.enable_editorial_display %}
{% if journal_settings.general.multi_page_editorial %}
<li class=".is-dropdown-submenu-parent">
<a href="#" data-options="is_hover:true; hover_timeout:5000">{{ journal_settings.styling.editorial_group_page_name }}</a>
<ul class="menu vertical medium-horizontal">
{% for group in request.journal.editorial_groups %}
<li><a href="{% url 'editorial_team_group' group.pk %}">{{ group.name }}</a></li>
{% endfor %}
</ul>
</li>
<li class="is-dropdown-submenu-parent">
<a href="#" data-options="is_hover:true; hover_timeout:5000"
role="button"
aria-expanded="false"
aria-controls="menu-nav-journal"
>
{{ journal_settings.styling.editorial_group_page_name }}
</a>
<ul class="menu vertical medium-horizontal" id="menu-nav-journal">
{% for group in request.journal.editorial_groups %}
<li>
<a href="{% url 'editorial_team_group' group.pk %}">{{ group.name }}</a>
</li>
{% endfor %}
</ul>
</li>
{% else %}
<li><a href="{% url 'editorial_team' %}">{{ journal_settings.styling.editorial_group_page_name }}</a></li>
<li>
<a href="{% url 'editorial_team' %}">{{ journal_settings.styling.editorial_group_page_name }}</a>
</li>
{% endif %}
{% endif %}
{% if request.journal.nav_sub %}<li><a href="{% url 'journal_submissions' %}">{% trans 'Submission' %}</a></li>{% endif %}
{% if request.journal.nav_contact %}<li><a href="{% url 'contact' %}">{% trans 'Contact' %}</a></li>{% endif %}

{% if request.journal.nav_sub %}
<li>
<a href="{% url 'journal_submissions' %}">{% trans 'Submission' %}</a>
</li>
{% endif %}

{% if request.journal.nav_contact %}
<li>
<a href="{% url 'contact' %}">{% trans 'Contact' %}</a>
</li>
{% endif %}

{% hook 'nav_block' %}
{% if request.journal.nav_start and not journal_settings.general.disable_journal_submission %}

{% if request.journal.nav_start and not journal_settings.general.disable_journal_submission %}
<li>
<a href="{% url 'submission_start' %}" class="button">
<a href="{% url 'submission_start' %}" >
<i aria-hidden="true" class="fa fa-cloud-upload"></i> {% trans 'Start Submission' %}
</a>
</li>
{% endif %}

{% if request.journal.nav_review %}
<li>
<a href="{% url 'become_reviewer' %}" class="button">
<a href="{% url 'become_reviewer' %}" >
<i aria-hidden="true" class="fa fa-trophy"></i>
{% trans 'Become a Reviewer' %}
</a>
</li>
{% endif %}

<li class=".is-dropdown-submenu-parent show-for-small-only">
<a href="#" data-options="is_hover:true; hover_timeout:5000">{% trans 'Account' %}</a>
<ul class="menu vertical medium-horizontal">
<li class="is-dropdown-submenu-parent show-for-small-only">
<a href="#" data-options="is_hover:true; hover_timeout:5000"
role="button"
aria-expanded="false"
aria-controls="menu-nav-account"
>
{% trans 'Account' %}
</a>
<ul class="menu vertical medium-horizontal" id="menu-nav-account">
{% if request.user.is_authenticated %}
<li><a href="{% url 'core_dashboard' %}">{% trans 'Dashboard' %}</a></li>
<li>
<a href="{% url 'core_dashboard' %}">{% trans 'Dashboard' %}</a>
</li>
<li class="divider"></li>
{% if not journal_settings.general.disable_journal_submission %}<li><a href="{% url 'submission_start' %}">{% trans 'Submit' %}</a></li>{% endif %}

{% if not journal_settings.general.disable_journal_submission %}
<li>
<a href="{% url 'submission_start' %}">{% trans 'Submit' %}</a>
</li>
{% endif %}

{% user_has_role request 'editor' as user_is_editor %}
{% if user_is_editor or request.user.is_staff%}
{% if user_is_editor or request.user.is_staff %}
<li class="divider"></li>
<li><a href="{% url 'kanban' %}">{% trans 'Kanban' %}</a></li>
<li><a href="{% url 'core_manager_index' %}">{% trans 'Manager' %}</a></li>
<li>
<a href="{% url 'kanban' %}">{% trans 'Kanban' %}</a>
</li>
<li>
<a href="{% url 'core_manager_index' %}">{% trans 'Manager' %}</a>
</li>
{% if request.resolver_match.url_name and request.resolver_match.url_name == 'article_view' and article %}
<li><a href="{% url 'manage_archive_article' article.pk %}">{% trans 'Edit Article' %}</a></li>
<li>
<a href="{% url 'manage_archive_article' article.pk %}">{% trans 'Edit Article' %}</a>
</li>
{% endif %}
{% if request.resolver_match.url_name and request.resolver_match.url_name == 'journal_issue' and issue %}
<li><a href="{% url 'manage_issues_id' issue.pk %}">{% trans 'Edit Issue' %}</a></li>
<li>
<a href="{% url 'manage_issues_id' issue.pk %}">{% trans 'Edit Issue' %}</a>
</li>
{% endif %}
{% if request.resolver_match.url_name and request.resolver_match.url_name == 'core_news_item' and news_item %}
<li><a href="{% url 'core_manager_edit_news' news_item.pk %}">{% trans 'Edit News Item' %}</a></li>
<li>
<a href="{% url 'core_manager_edit_news' news_item.pk %}">{% trans 'Edit News Item' %}</a>
</li>
{% endif %}
{% endif %}

{% if request.user.is_staff %}
<li><a href="/admin/">{% trans 'Admin' %}</a></li>
<li>
<a href="/admin/">{% trans 'Admin' %}</a>
</li>
{% endif %}

<li class="divider"></li>
<li><a href="{% url 'core_edit_profile' %}">{% trans 'Profile' %}</a></li>
<li><a href="{% url 'core_logout' %}">{% trans 'Logout' %}</a></li>
<li>
<a href="{% url 'core_edit_profile' %}">{% trans 'Profile' %}</a>
</li>
<li>
<a href="{% url 'core_logout' %}">{% trans 'Logout' %}</a>
</li>
{% else %}
<li>
<a href="{% url 'core_login' %}">
{% trans "Log in" %}
</a>
<a href="{% url 'core_login' %}">
{% trans "Log in" %}
</a>
</li>
<li>
<a href="{% url 'core_register' %}">
{% trans "Register" %}
</a>
<a href="{% url 'core_register' %}">
{% trans "Register" %}
</a>
</li>
{% endif %}
</ul>
Expand Down
Loading