Skip to content

Commit b5867bd

Browse files
javiereguiluzjaviereguiluz
committed
feature #367 Accessibility fixes (mik-laj)
This PR was squashed before being merged into the master branch (closes #367). Discussion ---------- Accessibility fixes Hello, Today I wanted to learn this framework, and I discovered a few problems with the availability of this application for people with disabilities. First problem, fonts awesome icons missing `aria-hidden` attribute. You can read more about it on page: http://fontawesome.io/accessibility/ Second problem, missing `scope` attribute on table headers. You can read more about in on page: http://webaim.org/techniques/tables/data This application is a role model for other applications, and therefore accessibility for disabled persons should be important. Thanks in advnace! Commits ------- 44e180a Accessibility fixes
2 parents 1a5030e + 44e180a commit b5867bd

File tree

10 files changed

+43
-37
lines changed

10 files changed

+43
-37
lines changed

‎app/Resources/TwigBundle/views/Exception/error403.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
{% block body_id 'error' %}
1414

1515
{% block main %}
16-
<h1 class="text-danger"><i class="fa fa-unlock-alt"></i> {{ 'http_error.name'|trans({ '%status_code%': 403 }) }}</h1>
16+
<h1 class="text-danger"><i class="fa fa-unlock-alt" aria-hidden="true"></i> {{ 'http_error.name'|trans({ '%status_code%': 403 }) }}</h1>
1717

1818
<p class="lead">
1919
{{ 'http_error_403.description'|trans }}

‎app/Resources/views/admin/blog/index.html.twig

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88
<table class="table table-striped">
99
<thead>
1010
<tr>
11-
<th>{{ 'label.title'|trans }}</th>
12-
<th><i class="fa fa-user"></i> {{ 'label.author'|trans }}</th>
13-
<th><i class="fa fa-calendar"></i> {{ 'label.published_at'|trans }}</th>
14-
<th><i class="fa fa-cogs"></i> {{ 'label.actions'|trans }}</th>
11+
<th scope="col">{{ 'label.title'|trans }}</th>
12+
<th scope="col"><i class="fa fa-user" aria-hidden="true"></i> {{ 'label.author'|trans }}</th>
13+
<th scope="col"><i class="fa fa-calendar" aria-hidden="true"></i> {{ 'label.published_at'|trans }}</th>
14+
<th scope="col"><i class="fa fa-cogs" aria-hidden="true"></i> {{ 'label.actions'|trans }}</th>
1515
</tr>
1616
</thead>
1717
<tbody>
@@ -31,7 +31,7 @@
3131

3232
{% if post.isAuthor(app.user) %}
3333
<a href="{{ path('admin_post_edit', { id: post.id }) }}" class="btn btn-sm btn-primary">
34-
<i class="fa fa-edit"></i> {{ 'action.edit'|trans }}
34+
<i class="fa fa-edit" aria-hidden="true"></i> {{ 'action.edit'|trans }}
3535
</a>
3636
{% endif %}
3737
</div>
@@ -49,7 +49,7 @@
4949
{% block sidebar %}
5050
<div class="section actions">
5151
<a href="{{ path('admin_post_new') }}" class="btn btn-lg btn-block btn-success">
52-
<i class="fa fa-plus"></i> {{ 'action.create_post'|trans }}
52+
<i class="fa fa-plus" aria-hidden="true"></i> {{ 'action.create_post'|trans }}
5353
</a>
5454
</div>
5555

‎app/Resources/views/admin/blog/show.html.twig

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,19 @@
88
<table class="table">
99
<tbody>
1010
<tr>
11-
<th>{{ 'label.summary'|trans }}</th>
11+
<th scope="row">{{ 'label.summary'|trans }}</th>
1212
<td>{{ post.summary|md2html }}</td>
1313
</tr>
1414
<tr>
15-
<th>{{ 'label.content'|trans }}</th>
15+
<th scope="row">{{ 'label.content'|trans }}</th>
1616
<td>{{ post.content|md2html }}</td>
1717
</tr>
1818
<tr>
19-
<th>{{ 'label.author'|trans }}</th>
19+
<th scope="row">{{ 'label.author'|trans }}</th>
2020
<td><p>{{ post.authorEmail }}</p></td>
2121
</tr>
2222
<tr>
23-
<th>{{ 'label.published_at'|trans }}</th>
23+
<th scope="row">{{ 'label.published_at'|trans }}</th>
2424
{# it's not mandatory to set the timezone in localizeddate(). This is done to
2525
avoid errors when the 'intl' PHP extension is not available and the application
2626
is forced to use the limited "intl polyfill", which only supports UTC and GMT #}
@@ -33,7 +33,7 @@
3333
{% block sidebar %}
3434
<div class="section">
3535
<a href="{{ path('admin_post_edit', { id: post.id }) }}" class="btn btn-lg btn-block btn-success">
36-
<i class="fa fa-edit"></i> {{ 'action.edit_contents'|trans }}
36+
<i class="fa fa-edit" aria-hidden="true"></i> {{ 'action.edit_contents'|trans }}
3737
</a>
3838
</div>
3939

‎app/Resources/views/admin/layout.html.twig

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@
1010
{% block header_navigation_links %}
1111
<li>
1212
<a href="{{ path('admin_post_index') }}">
13-
<i class="fa fa-list-alt"></i> {{ 'menu.post_list'|trans }}
13+
<i class="fa fa-list-alt" aria-hidden="true"></i> {{ 'menu.post_list'|trans }}
1414
</a>
1515
</li>
1616
<li>
1717
<a href="{{ path('blog_index') }}">
18-
<i class="fa fa-home"></i> {{ 'menu.back_to_blog'|trans }}
18+
<i class="fa fa-home" aria-hidden="true"></i> {{ 'menu.back_to_blog'|trans }}
1919
</a>
2020
</li>
2121
{% endblock %}

‎app/Resources/views/base.html.twig

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
See http://symfony.com/doc/current/book/templating.html#template-inheritance-and-layouts
55
#}
66
<!DOCTYPE html>
7-
<html>
7+
<html lang="{{ app.request.locale }}">
88
<head>
99
<meta charset="UTF-8" />
1010
<meta name="viewport" content="width=device-width, initial-scale=1"/>
@@ -54,14 +54,14 @@
5454
{% block header_navigation_links %}
5555
<li>
5656
<a href="{{ path('blog_index') }}">
57-
<i class="fa fa-home"></i> {{ 'menu.homepage'|trans }}
57+
<i class="fa fa-home" aria-hidden="true"></i> {{ 'menu.homepage'|trans }}
5858
</a>
5959
</li>
6060

6161
{% if is_granted('ROLE_ADMIN') %}
6262
<li>
6363
<a href="{{ path('admin_post_index') }}">
64-
<i class="fa fa-lock"></i> {{ 'menu.admin'|trans }}
64+
<i class="fa fa-lock" aria-hidden="true"></i> {{ 'menu.admin'|trans }}
6565
</a>
6666
</li>
6767
{% endif %}
@@ -70,16 +70,16 @@
7070
{% if app.user %}
7171
<li>
7272
<a href="{{ path('security_logout') }}">
73-
<i class="fa fa-sign-out"></i> {{ 'menu.logout'|trans }}
73+
<i class="fa fa-sign-out" aria-hidden="true"></i> {{ 'menu.logout'|trans }}
7474
</a>
7575
</li>
7676
{% endif %}
7777

7878
<li class="dropdown">
79-
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-globe"></i> <span class="caret"></span></a>
80-
<ul class="dropdown-menu locales" role="menu">
79+
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" id="locales"><i class="fa fa-globe" aria-hidden="true"></i> <span class="caret"></span></a>
80+
<ul class="dropdown-menu locales" role="menu" aria-labelledby="locales">
8181
{% for locale in locales() %}
82-
<li {% if app.request.locale == locale.code %}class="active"{% endif %}><a href="{{ path(app.request.get('_route', 'blog_index'), app.request.get('_route_params', [])|merge({ _locale: locale.code })) }}">{{ locale.name|capitalize }}</a></li>
82+
<li {% if app.request.locale == locale.code %}aria-checked="true" class="active"{%else%}aria-checked="false"{% endif %} role="menuitem"><a href="{{ path(app.request.get('_route', 'blog_index'), app.request.get('_route_params', [])|merge({ _locale: locale.code })) }}">{{ locale.name|capitalize }}</a></li>
8383
{% endfor %}
8484
</ul>
8585
</li>
@@ -122,9 +122,15 @@
122122
</div>
123123
<div id="footer-resources" class="col-md-6">
124124
<p>
125-
<a href="https://twitter.com/symfony"><i class="fa fa-twitter"></i></a>
126-
<a href="https://www.facebook.com/SensioLabs"><i class="fa fa-facebook"></i></a>
127-
<a href="https://symfony.com/blog/"><i class="fa fa-rss"></i></a>
125+
<a href="https://twitter.com/symfony" title="Symfony Twitter">
126+
<i class="fa fa-twitter" aria-hidden="true"></i>
127+
</a>
128+
<a href="https://www.facebook.com/SensioLabs" title="SensioLabs Facebook">
129+
<i class="fa fa-facebook" aria-hidden="true"></i>
130+
</a>
131+
<a href="https://symfony.com/blog/" title="Symfony Blog">
132+
<i class="fa fa-rss" aria-hidden="true"></i>
133+
</a>
128134
</p>
129135
</div>
130136
</div>

‎app/Resources/views/blog/post_show.html.twig

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
{% else %}
2020
<p>
2121
<a class="btn btn-success" href="{{ path('security_login') }}">
22-
<i class="fa fa-sign-in"></i> {{ 'action.sign_in'|trans }}
22+
<i class="fa fa-sign-in" aria-hidden="true"></i> {{ 'action.sign_in'|trans }}
2323
</a>
2424
{{ 'post.to_publish_a_comment'|trans }}
2525
</p>
@@ -52,7 +52,7 @@
5252
{% if app.user and post.isAuthor(app.user) %}
5353
<div class="section">
5454
<a class="btn btn-lg btn-block btn-success" href="{{ path('admin_post_edit', { id: post.id }) }}">
55-
<i class="fa fa-edit"></i> {{ 'action.edit_post'|trans }}
55+
<i class="fa fa-edit" aria-hidden="true"></i> {{ 'action.edit_post'|trans }}
5656
</a>
5757
</div>
5858
{% endif %}

‎app/Resources/views/default/homepage.html.twig

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
</p>
2323
<p>
2424
<a class="btn btn-primary btn-lg" href="{{ path('blog_index') }}">
25-
<i class="fa fa-users"></i> {{ 'action.browse_app'|trans }}
25+
<i class="fa fa-users" aria-hidden="true"></i> {{ 'action.browse_app'|trans }}
2626
</a>
2727
</p>
2828
</div>
@@ -35,7 +35,7 @@
3535
</p>
3636
<p>
3737
<a class="btn btn-primary btn-lg" href="{{ path('admin_index') }}">
38-
<i class="fa fa-lock"></i> {{ 'action.browse_admin'|trans }}
38+
<i class="fa fa-lock" aria-hidden="true"></i> {{ 'action.browse_admin'|trans }}
3939
</a>
4040
</p>
4141
</div>

‎app/Resources/views/form/fields.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<div class="input-group date" data-toggle="datetimepicker">
1313
{{ block('datetime_widget') }}
1414
<span class="input-group-addon">
15-
<span class="fa fa-calendar"></span>
15+
<span class="fa fa-calendar" aria-hidden="true"></span>
1616
</span>
1717
</div>
1818
{% endspaceless %}

‎app/Resources/views/security/login.html.twig

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<div class="well">
1515
<form action="{{ path('security_login') }}" method="post">
1616
<fieldset>
17-
<legend><i class="fa fa-lock"></i> {{ 'title.login'|trans }}</legend>
17+
<legend><i class="fa fa-lock" aria-hidden="true"></i> {{ 'title.login'|trans }}</legend>
1818
<div class="form-group">
1919
<label for="username">{{ 'label.username'|trans }}</label>
2020
<input type="text" id="username" name="_username" value="{{ last_username }}" class="form-control"/>
@@ -25,7 +25,7 @@
2525
</div>
2626
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}"/>
2727
<button type="submit" class="btn btn-primary">
28-
<i class="fa fa-sign-in"></i> {{ 'action.sign_in'|trans }}
28+
<i class="fa fa-sign-in" aria-hidden="true"></i> {{ 'action.sign_in'|trans }}
2929
</button>
3030
</fieldset>
3131
</form>
@@ -34,16 +34,16 @@
3434

3535
<div id="login-help" class="col-sm-7">
3636
<h3>
37-
<i class="fa fa-long-arrow-left"></i>
37+
<i class="fa fa-long-arrow-left" aria-hidden="true"></i>
3838
{{ 'help.login_users'|trans }}
3939
</h3>
4040

4141
<table class="table table-striped table-bordered table-hover">
4242
<thead>
4343
<tr>
44-
<th>{{ 'label.username'|trans }}</th>
45-
<th>{{ 'label.password'|trans }}</th>
46-
<th>{{ 'label.role'|trans }}</th>
44+
<th scope="col">{{ 'label.username'|trans }}</th>
45+
<th scope="col">{{ 'label.password'|trans }}</th>
46+
<th scope="col">{{ 'label.role'|trans }}</th>
4747
</tr>
4848
</thead>
4949
<tbody>

‎src/CodeExplorerBundle/Resources/views/source_code.html.twig

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
</p>
55

66
<button type="button" class="btn btn-default btn-lg btn-block" data-toggle="modal" data-target="#sourceCodeModal">
7-
<i class="fa fa-cogs"></i> {{ 'action.show_code'|trans }}
7+
<i class="fa fa-cogs" aria-hidden="true"></i> {{ 'action.show_code'|trans }}
88
</button>
99

1010
<div class="modal fade" id="sourceCodeModal" tabindex="-1">
@@ -14,7 +14,7 @@
1414
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
1515
<span aria-hidden="true">&times;</span>
1616
</button>
17-
<h4 class="modal-title"><i class="fa fa-code"></i> {{ 'title.source_code'|trans }}</h4>
17+
<h4 class="modal-title"><i class="fa fa-code" aria-hidden="true"></i> {{ 'title.source_code'|trans }}</h4>
1818
</div>
1919

2020
<div class="modal-body">

0 commit comments

Comments
 (0)