Skip to content

Front of House Page Structure A11y improvement #4653

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 5 commits into
base: master
Choose a base branch
from
Open

Front of House Page Structure A11y improvement #4653

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0bed666
a11y: #4232 remove superfluous favourite space pictures region
StephDriver Mar 13, 2025
d514c8d
a11y: #4232 create page landmarks
StephDriver Mar 13, 2025
30d5df8
a11y: #4232 restructure heading levels
StephDriver Mar 21, 2025
51b3629
a11y: #4232 headings logic for nested templates
StephDriver Mar 25, 2025
83f8777
a11y: #4232 aria markup added to hr tags
StephDriver Mar 28, 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
6 changes: 5 additions & 1 deletion src/templates/common/elements/guest_editors.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
{% if issue.editors.all %}
<p>
{% if small %}<small>{% endif %}
<strong>Editors: </strong>
{% if level == "issuepage" %}
<h2>Editors: </h2>
{% else %}
<h3>Editors: </h3>
{% endif %}
{% for editor in issue.issueeditor_set.all %}{{ editor.account.full_name }} ({{ editor.role }}){% if not forloop.last %}, {% endif %}{% endfor %}
{% if small %}</small>{% endif %}
</p>
Expand Down
2 changes: 1 addition & 1 deletion src/templates/common/elements/journal/article_issue_list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{% load i18n %}

{% with issue_length=article.issues_list|length %}
<h3>{% if issue_length > 1 %}{% trans 'Issues' %}{% else %}{% trans 'Issue' %}{% endif %}</h3>
<h2>{% if issue_length > 1 %}{% trans 'Issues' %}{% else %}{% trans 'Issue' %}{% endif %}</h2>
{% endwith %}
<ul>
{% if article.primary_issue %}
Expand Down
27 changes: 23 additions & 4 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 @@ -1267,17 +1267,18 @@ button.list-group-item-danger.active:focus {
#journal-title {
padding: 0px;
height:100%;
font-family: "Proxima Nova", Montserrat, Helvetica, Roboto, Arial, sans-serif;
@include breakpoint(large down){
max-width: 550px;
h1 {
p {
padding-top: 0px;
font-size:1.5vw;
}
}
@include breakpoint(medium down){
max-width:80%; // Avoid running over the search and burger menus
padding-top: 0.7rem;
h1 {
p {
font-size: 100%;
}
}
Expand All @@ -1286,14 +1287,14 @@ button.list-group-item-danger.active:focus {
}
@include breakpoint(xlarge){
max-width: 800px;
h1 {
p {
padding-top: 0px;
font-size:1.6vw;
}
}
@include breakpoint(xxlarge){
max-width: 1000px;
h1 {
p {
padding-top: 0px;
font-size:1.70rem;
}
Expand Down Expand Up @@ -1335,3 +1336,21 @@ button.list-group-item-danger.active:focus {
text-decoration: underline;
}

.byline{
font-size: 1.11111rem;
font-family: "Proxima Nova", Montserrat, Helvetica, Roboto, Arial, sans-serif;
font-weight: 300;
font-style: normal;
color: inherit;
text-rendering: optimizeLegibility;
margin-top: 0;
margin-bottom: 0.5rem;
line-height: 1.4;
}

.profile-name{
font-family: "Merriweather", serif;
font-size: 98%;
font-weight: bold;
}

4 changes: 2 additions & 2 deletions src/themes/OLH/templates/403.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@
<section id="content">
<div class="row column">
{% if request.META.maintenance_mode %}
<h2>{% trans 'Maintenance Mode' %}</h2>
<h1>{% trans 'Maintenance Mode' %}</h1>
<p>{{ request.META.maintenance_mode.value|safe }}</p>
{% else %}
<h2>{% trans "Permission Denied" %}</h2>
<h1>{% trans "Permission Denied" %}</h1>
{% if exception %}
<p>{{ exception }}</p>
{% endif %}
Expand Down
2 changes: 1 addition & 1 deletion src/themes/OLH/templates/404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
{% block body %}
<section id="content">
<div class="row column">
<h4>{% trans "Page Not Found" %}</h4>
<h1>{% trans "Page Not Found" %}</h1>
<p>{% trans "Sorry, the page you were looking for was not found." %}</p>
</div>
</section>
Expand Down
16 changes: 9 additions & 7 deletions src/themes/OLH/templates/cms/page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@
{% block page_title %}{{ page.display_name }}{% endblock %}

{% block body %}
<section id="content">
<section id="content" aria-labelledby="cms-title">
<div class="row">
<div class="{% if page.display_toc %}border-right medium-8 small-12{% else %}medium-12{% endif %} columns">
<h1 id="cms-title">{{ page.display_name }}</h1>
<hr/>
<hr aria-hidden="true" />
<div id="main_article">
{{ page.content|safe }}
</div>
Expand All @@ -18,12 +18,14 @@ <h1 id="cms-title">{{ page.display_name }}</h1>
<aside class="medium-4 columns sticky-container hide-for-small-only">
<div class="sticky" data-sticky data-margin-top="0"
data-anchor="content" data-sticky-on="large">
<div class="section">
<h3>{% trans "Table of Contents" %}</h3>
<ul id="toc">
<section aria-labelledby="toc-title">
<div class="section">
<h2 id="toc-title">{% trans "Table of Contents" %}</h2>
<ul id="toc">

</ul>
</div>
</ul>
</div>
</section>
</div>
</aside>
{% endif %}
Expand Down
14 changes: 7 additions & 7 deletions src/themes/OLH/templates/core/accounts/public_profile.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<div class="row column">
<div class="large-3 columns">
{% include "common/elements/profile_image.html" with classes="thumbnail editorial-image" user=user %}
<h3>{{ user.full_name }}</h3>
<h1>{{ user.full_name }}</h1>
{% if roles %}
<p>
<strong>{% trans "Roles" %}: </strong><br>
Expand Down Expand Up @@ -42,17 +42,17 @@ <h3>{{ user.full_name }}</h3>
</div>
<div class="large-9 columns">
{% if user.biography %}
<h3>{% trans "Biography" %}</h3>
<hr />
<h2>{% trans "Biography" %}</h2>
<hr aria-hidden="true" />
{{ user.biography|safe }}
<br/><br/>
{% endif %}
{% if user.published_articles %}
<h3>{% trans "Publications" %}</h3>
<hr />
<h2>{% trans "Publications" %}</h2>
<hr aria-hidden="true" />
{% for article in user.published_articles %}
{% include "elements/journal/box_article.html" with article=article %}
<hr />
{% include "elements/journal/box_article.html" with article=article level="shallow" %}
<hr aria-hidden="true" />
{% endfor %}
{% endif %}
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/themes/OLH/templates/core/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
<body>
{% include "common/elements/skip_to_main_content.html" %}
<div class="wrapper">
<header class="main-header" role="banner">
<header class="main-header">
<div class="main top-bar">
<div class="top-bar-left header-image-bar border-right">
{% if request.journal %}
Expand All @@ -75,7 +75,7 @@
{% endif %}
{% if request.journal and journal_settings.styling.display_journal_title %}
<div class="hide-for-medium-only{% if journal_settings.general.switch_language %} border-right{% endif %}" id="journal-title">
<h1 class="menu-text">{{ request.journal.name }}</h1>
<p class="menu-text">{{ request.journal.name }}</p>
</div>
{% endif %}

Expand Down
2 changes: 1 addition & 1 deletion src/themes/OLH/templates/core/homepage_elements/search_bar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{% load i18n %}

<section>
<section aria-label="{% trans 'Search' %}">
<div class="row" class="homepage-element" id="homepage-element-search-bar">
<div class="columns large-12">
{% if request.journal %}
Expand Down
182 changes: 92 additions & 90 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 @@ -3,101 +3,103 @@
{% load hooks %}
{% load next_url %}

<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>
</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 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>
<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">
{% for group in request.journal.editorial_groups %}
<li><a href="{% url 'editorial_team_group' group.pk %}">{{ group.name }}</a></li>
{% endfor %}
{% 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>
{% else %}
<li><a href="{% url 'editorial_team' %}">{{ journal_settings.styling.editorial_group_page_name }}</a></li>
</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 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>
{% else %}
<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 %}
{% hook 'nav_block' %}
{% if request.journal.nav_start and not journal_settings.general.disable_journal_submission %}
<li>
<a href="{% url 'submission_start' %}" class="button">
<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">
<i aria-hidden="true" class="fa fa-trophy"></i>
{% trans 'Become a Reviewer' %}
</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 %}
{% hook 'nav_block' %}
{% if request.journal.nav_start and not journal_settings.general.disable_journal_submission %}
<li>
<a href="{% url 'submission_start' %}" class="button">
<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">
<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">
{% if request.user.is_authenticated %}
<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 %}
{% user_has_role request 'editor' as user_is_editor %}
{% if user_is_editor or request.user.is_staff%}
<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">
{% if request.user.is_authenticated %}
<li><a href="{% url 'core_dashboard' %}">{% trans 'Dashboard' %}</a></li>
<li class="divider"></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>
{% 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>
{% 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%}
<li class="divider"></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>
{% 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>
{% 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>
{% endif %}
{% 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>
{% if request.user.is_staff %}
<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>
{% else %}
<li>
<a href="{% url 'core_login' %}">
{% trans "Log in" %}
</a>
</li>
<li>
<a href="{% url 'core_register' %}">
{% trans "Register" %}
</a>
</li>
{% endif %}
{% if request.user.is_staff %}
<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>
{% else %}
<li>
<a href="{% url 'core_login' %}">
{% trans "Log in" %}
</a>
</li>
<li>
<a href="{% url 'core_register' %}">
{% trans "Register" %}
</a>
</li>
{% endif %}
</ul>
</li>
</ul>
</div>
</ul>
</li>
</ul>
</div>
</nav>
Loading