Skip to content

Commit 826dfe5

Browse files
dustin-jwdustin-jw
committed
fix: minor accessibility issues
- remove improper aria roles - address accessibility tree issues - heading levels - disambiguate the pagination navigation
1 parent eb9f261 commit 826dfe5

File tree

7 files changed

+133
-131
lines changed

7 files changed

+133
-131
lines changed

‎src/php/index.php‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,10 @@
1212

1313
$context = Timber\Timber::context();
1414
$context['posts'] = new Timber\PostQuery();
15-
$context['foo'] = 'bar';
1615
$templates = array( 'index.twig' );
1716
if ( is_home() && ! is_front_page() ) {
1817
$context['title'] = single_post_title();
18+
} else {
19+
$context['title'] = 'Recent Posts';
1920
}
2021
Timber\Timber::render( $templates, $context );

‎src/php/views/base.twig‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
11
{% include 'header.twig' %}
22

3-
<article id="post-{{ post.id }}" role="main" class="post-type-{{ post.post_type }} {{ function('get_post_class')|join(' ') }}">
3+
<article id="post-{{ post.id }}" class="post-type-{{ post.post_type }} {{ function('get_post_class')|join(' ') }}">
44

5-
{% if post.title %}
6-
<div class="obj-width-limiter">
7-
{# equivalent to the_title() #}
8-
<h1>{{ post.title }}</h1>
9-
</div>
10-
{% endif %}
5+
{% if post.title %}
6+
<div class="obj-width-limiter">
7+
{# equivalent to the_title() #}
8+
<h1>{{ post.title }}</h1>
9+
</div>
10+
{% endif %}
1111

12-
{# content block from child templates #}
13-
{% block content %}
14-
<div class="obj-width-limiter">
15-
Sorry, no content
16-
</div>
17-
{% endblock %}
12+
{# content block from child templates #}
13+
{% block content %}
14+
<div class="obj-width-limiter">
15+
Sorry, no content
16+
</div>
17+
{% endblock %}
1818

19-
{% if sidebar %}
20-
<aside>
21-
{{ sidebar }}
22-
</aside>
23-
{% endif %}
24-
</article>
19+
{% if sidebar %}
20+
<aside>
21+
{{ sidebar }}
22+
</aside>
23+
{% endif %}
24+
</article>
2525

2626
{% include 'footer.twig' %}

‎src/php/views/header.twig‎

Lines changed: 33 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,39 @@
11
<!doctype html>
22
<html {{ site.language_attributes }} class="no-js safe-focus">
3-
<head>
4-
<meta charset="{{ site.charset }}" />
5-
<meta name="description" content="{{ site.description }}">
6-
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<link rel="profile" href="https://gmpg.org/xfn/11">
8-
{{ function('wp_head') }}
9-
</head>
10-
<body {{ body_class }}>
11-
{{ function('wp_body_open') }}
12-
<div class="obj-page">
3+
<head>
4+
<meta charset="{{ site.charset }}"/>
5+
<meta name="description" content="{{ site.description }}">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="profile" href="https://gmpg.org/xfn/11">
8+
{{ function('wp_head') }}
9+
</head>
10+
<body {{ body_class }}>
11+
{{ function('wp_body_open') }}
12+
<div class="obj-page">
1313

14-
<div class="obj-width-limiter">
15-
<a class="cmp-skip-to-content" href="#main">Skip to content</a>
16-
<a class="cmp-skip-to-content" href="#nav">Skip to navigation</a>
17-
</div>
14+
<div class="obj-width-limiter">
15+
<a class="cmp-skip-to-content" href="#main">Skip to content</a>
16+
<a class="cmp-skip-to-content" href="#nav">Skip to navigation</a>
17+
</div>
1818

19-
<header class="cmp-header">
20-
<div id="nav" class="obj-width-limiter">
19+
<header class="cmp-header">
20+
<div id="nav" class="obj-width-limiter">
2121

22-
{% block header %}
23-
<div class="wrapper cmp-header">
24-
<h1 class="cmp-header__logo" role="banner">
25-
<a class="cmp-header__link" href="{{ site.url }}" rel="home">{{ site.name }}</a>
26-
</h1>
27-
<nav id="nav-main" class="nav-main" role="navigation">
28-
{# replaces wp_nav_menu() #}
29-
{% include "menu.twig" with {'items': menu.get_items} %}
30-
</nav><!-- #nav -->
31-
</div>
32-
{% endblock %}
33-
</div>
34-
</header><!-- .cmp-header -->
22+
{% block header %}
23+
<div class="wrapper cmp-header">
24+
<div class="cmp-header__logo">
25+
<a class="cmp-header__link" href="{{ site.url }}" rel="home">{{ site.name }}</a>
26+
</div>
27+
<nav
28+
id="nav-main" class="nav-main" aria-label="Main">
29+
{# replaces wp_nav_menu() #}
30+
{% include "menu.twig" with {'items': menu.get_items} %}
31+
</nav>
32+
<!-- #nav -->
33+
</div>
34+
{% endblock %}
35+
</div>
36+
</header>
37+
<!-- .cmp-header -->
3538

36-
<main id="main">
39+
<main id="main">

‎src/php/views/menu.twig‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
11
{% if menu %}
2-
<nav>
3-
<ul class="nav-main">
4-
{% for item in menu.items %}
5-
<li class="nav-main-item {{ item.classes|join(' ') }}">
6-
<a class="cmp-menu__link" href="{{ item.link }}">{{ item.title }}</a>
7-
{% if item.children %}
8-
<ul class="nav-drop">
9-
{% for child in item.children %}
10-
<li class="nav-drop-item">
11-
<a href="{{ child.link }}">{{ child.title }}</a>
12-
</li>
13-
{% endfor %}
14-
</ul>
15-
{% endif %}
16-
</li>
17-
{% endfor %}
18-
</ul>
19-
</nav>
20-
{% endif %}
2+
<ul class="nav-main">
3+
{% for item in menu.items %}
4+
<li class="nav-main-item {{ item.classes|join(' ') }}">
5+
<a class="cmp-menu__link" href="{{ item.link }}">{{ item.title }}</a>
6+
{% if item.children %}
7+
<ul class="nav-drop">
8+
{% for child in item.children %}
9+
<li class="nav-drop-item">
10+
<a href="{{ child.link }}">{{ child.title }}</a>
11+
</li>
12+
{% endfor %}
13+
</ul>
14+
{% endif %}
15+
</li>
16+
{% endfor %}
17+
</ul>
18+
{% endif %}

‎src/php/views/partials/content-search.twig‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<article id="post-{{ post.id }}" class="util-padding-bottom-md">
2-
<h4>
2+
<h2>
33
<a href="{{ post.link }}">{{ post.title }}</a>
4-
</h4>
4+
</h2>
55
<div>
6-
{{ post.preview ? post.preview : post.content }}
6+
{{ post.preview ? post.preview : post.content }}
77
</div>
88
</article>

‎src/php/views/partials/content-single.twig‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<article id="post-{{ post.id }}" class="util-padding-bottom-md">
2-
<h4>
2+
<h2>
33
{{ post.title }}
4-
</h4>
4+
</h2>
55
<div class="util-padding-b-md">
6-
{{ post.preview }}
6+
{{ post.preview }}
77
</div>
88
</article>

‎src/php/views/partials/pagination.twig‎

Lines changed: 56 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,64 @@
11
{% if posts.pagination.pages is not empty %}
2-
<nav>
3-
<ul>
2+
<nav aria-label="Pagination">
3+
<ul>
44

5-
{# First #}
6-
{% if posts.pagination.pages|first and posts.pagination.pages|first.current != true %}
7-
<li class="first btn">
8-
<a href="{{ posts.pagination.pages|first.link }}">First</a>
9-
</li>
10-
{% else %}
11-
<li class="first btn disabled">
12-
<button disabled>First</button>
13-
</li>
14-
{% endif %}
5+
{# First #}
6+
{% if posts.pagination.pages|first and posts.pagination.pages|first.current != true %}
7+
<li class="first btn">
8+
<a href="{{ posts.pagination.pages|first.link }}">First</a>
9+
</li>
10+
{% else %}
11+
<li class="first btn disabled">
12+
<button disabled>First</button>
13+
</li>
14+
{% endif %}
1515

16-
{# Previous #}
17-
{% if posts.pagination.prev %}
18-
<li class="prev btn">
19-
<a href="{{ posts.pagination.prev.link }}">Previous</a>
20-
</li>
21-
{% else %}
22-
<li class="prev btn disabled">
23-
<button disabled>Previous</button>
24-
</li>
25-
{% endif %}
16+
{# Previous #}
17+
{% if posts.pagination.prev %}
18+
<li class="prev btn">
19+
<a href="{{ posts.pagination.prev.link }}">Previous</a>
20+
</li>
21+
{% else %}
22+
<li class="prev btn disabled">
23+
<button disabled>Previous</button>
24+
</li>
25+
{% endif %}
2626

27-
{# Pages #}
28-
{% for page in posts.pagination.pages %}
29-
{% if page.link %}
30-
<li>
31-
<a href="{{ page.link }}" class="{{ page.class }}">{{ page.title }}</a>
32-
</li>
33-
{% else %}
34-
<li class="current">
35-
<span class="{{ page.class }}">{{ page.title }}</span>
36-
</li>
37-
{% endif %}
38-
{% endfor %}
27+
{# Pages #}
28+
{% for page in posts.pagination.pages %}
29+
{% if page.link %}
30+
<li>
31+
<a href="{{ page.link }}" class="{{ page.class }}">{{ page.title }}</a>
32+
</li>
33+
{% else %}
34+
<li class="current">
35+
<span class="{{ page.class }}">{{ page.title }}</span>
36+
</li>
37+
{% endif %}
38+
{% endfor %}
3939

40-
{# Next #}
41-
{% if posts.pagination.next %}
42-
<li class="next btn">
43-
<a href="{{ posts.pagination.next.link }}">Next</a>
44-
</li>
45-
{% else %}
46-
<li class="next btn disabled">
47-
<button disabled>Next</button>
48-
</li>
49-
{% endif %}
40+
{# Next #}
41+
{% if posts.pagination.next %}
42+
<li class="next btn">
43+
<a href="{{ posts.pagination.next.link }}">Next</a>
44+
</li>
45+
{% else %}
46+
<li class="next btn disabled">
47+
<button disabled>Next</button>
48+
</li>
49+
{% endif %}
5050

51-
{# Last #}
52-
{% if posts.pagination.pages|last and posts.pagination.pages|last.current != true %}
53-
<li class="last btn">
54-
<a href="{{ posts.pagination.pages|last.link }}">Last</a>
55-
</li>
56-
{% else %}
57-
<li class="last btn disabled">
58-
<button disabled>Last</button>
59-
</li>
60-
{% endif %}
51+
{# Last #}
52+
{% if posts.pagination.pages|last and posts.pagination.pages|last.current != true %}
53+
<li class="last btn">
54+
<a href="{{ posts.pagination.pages|last.link }}">Last</a>
55+
</li>
56+
{% else %}
57+
<li class="last btn disabled">
58+
<button disabled>Last</button>
59+
</li>
60+
{% endif %}
6161

62-
</ul>
63-
</nav>
62+
</ul>
63+
</nav>
6464
{% endif %}

0 commit comments

Comments
 (0)