Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 39b7a91

Browse files
javiereguiluzjaviereguiluz
committed
[WebProfilerBundle] Improve accessibility of tabs and some links
1 parent a826eb3 commit 39b7a91

12 files changed

+34
-18
lines changed

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/cache.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
{{ _self.render_metrics(collector.totals, true) }}
5555

5656
<h2>Pools</h2>
57-
<div class="sf-tabs">
57+
<div class="sf-tabs" role="tablist">
5858
{# the empty merge is needed to turn the iterator into an array #}
5959
{% set cache_pools_with_calls = collector.calls|filter(calls => calls|length > 0)|merge([]) %}
6060
{% for name, calls in cache_pools_with_calls %}

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/events.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<p>No events have been recorded. Check that debugging is enabled in the kernel.</p>
1818
</div>
1919
{% else %}
20-
<div class="sf-tabs">
20+
<div class="sf-tabs" role="tablist">
2121
<div class="tab">
2222
<h3 class="tab-title">Called Listeners <span class="badge">{{ collector.calledlisteners|length }}</span></h3>
2323

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -457,7 +457,7 @@
457457
{% endif %}
458458

459459
{% set form_has_errors = data.errors ?? [] is not empty %}
460-
<div class="sf-tabs">
460+
<div class="sf-tabs" role="tablist">
461461
<div class="tab {{ form_has_errors ? 'active' : 'disabled' }}">
462462
<h3 class="tab-title">Errors</h3>
463463

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/http_client.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
</div>
5454
</div>
5555
<h2>Clients</h2>
56-
<div class="sf-tabs">
56+
<div class="sf-tabs" role="tablist">
5757
{% for name, client in collector.clients %}
5858
<div class="tab {{ client.traces|length == 0 ? 'disabled' }}">
5959
<h3 class="tab-title">{{ name }} <span class="badge">{{ client.traces|length }}</span></h3>

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/mailer.html.twig

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@
131131

132132
<pre class="prewrap" style="max-height: 600px; margin-left: 5px">{{ message.toString() }}</pre>
133133
{% else %}
134-
<div class="sf-tabs">
134+
<div class="sf-tabs" role="tablist">
135135
<div class="tab">
136136
<h3 class="tab-title">Email contents</h3>
137137
<div class="tab-content">
@@ -179,7 +179,7 @@
179179

180180
{% if message.htmlBody or message.textBody %}
181181
<div class="card-block">
182-
<div class="sf-tabs sf-tabs-sm">
182+
<div class="sf-tabs sf-tabs-sm" role="tablist">
183183
{% if message.htmlBody %}
184184
{% set htmlBody = message.htmlBody() %}
185185
<div class="tab">

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/messenger.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
<p class="text-muted">Ordered list of dispatched messages across all your buses</p>
7474
{{ helper.render_bus_messages(collector.messages, true) }}
7575
{% else %}
76-
<div class="sf-tabs message-bus">
76+
<div class="sf-tabs message-bus" role="tablist">
7777
<div class="tab">
7878
{% set messages = collector.messages %}
7979
{% set exceptionsCount = collector.exceptionsCount %}

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/notifier.html.twig

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@
103103
<h3>{{ transport }}</h3>
104104

105105
<div class="card-block">
106-
<div class="sf-tabs sf-tabs-sm">
106+
<div class="sf-tabs sf-tabs-sm" role="tablist">
107107
{% for event in events.events(transport) %}
108108
{% set message = event.message %}
109109
<div class="tab">
@@ -127,7 +127,7 @@
127127
</div>
128128
{% endif %}
129129
<div class="card-block">
130-
<div class="sf-tabs sf-tabs-sm">
130+
<div class="sf-tabs sf-tabs-sm" role="tablist">
131131
{% if message.getNotification is defined %}
132132
<div class="tab">
133133
<h3 class="tab-title">Notification</h3>

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/request.html.twig

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@
109109
{{ 'n/a' in controller_name ? 'Request / Response' : controller_name }}
110110
</h2>
111111

112-
<div class="sf-tabs">
112+
<div class="sf-tabs" role="tablist">
113113
<div class="tab">
114114
<h3 class="tab-title">Request</h3>
115115

@@ -182,7 +182,7 @@
182182
<p>Request content not available (it was retrieved as a resource).</p>
183183
</div>
184184
{% elseif collector.content %}
185-
<div class="sf-tabs">
185+
<div class="sf-tabs" role="tablist">
186186
{% set prettyJson = collector.isJsonRequest ? collector.prettyJson : null %}
187187
{% if prettyJson is not null %}
188188
<div class="tab">

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/serializer.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@
8888
</div>
8989
</div>
9090

91-
<div class="sf-tabs">
91+
<div class="sf-tabs" role="tablist">
9292
{{ helper.render_serialize_tab(collector.data, true) }}
9393
{{ helper.render_serialize_tab(collector.data, false) }}
9494

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/translation.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@
9090
{% endif %}
9191
{% endfor %}
9292

93-
<div class="sf-tabs">
93+
<div class="sf-tabs" role="tablist">
9494
<div class="tab {{ collector.countMissings == 0 ? 'active' }}">
9595
<h3 class="tab-title">Defined <span class="badge">{{ collector.countDefines }}</span></h3>
9696

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -663,6 +663,8 @@ if (typeof Sfjs === 'undefined' || typeof Sfjs.loadToolbar === 'undefined') {
663663
},
664664
665665
createTabs: function() {
666+
/* the accessibility options of this component have been defined according to: */
667+
/* https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html */
666668
var tabGroups = document.querySelectorAll('.sf-tabs:not([data-processed=true])');
667669
668670
/* create the tab navigation for each group of tabs */
@@ -678,8 +680,11 @@ if (typeof Sfjs === 'undefined' || typeof Sfjs.loadToolbar === 'undefined') {
678680
679681
var tabNavigationItem = document.createElement('li');
680682
tabNavigationItem.setAttribute('data-tab-id', tabId);
683+
tabNavigationItem.setAttribute('role', 'tab');
681684
if (hasClass(tabs[j], 'active')) { selectedTabId = tabId; }
682-
if (hasClass(tabs[j], 'disabled')) { addClass(tabNavigationItem, 'disabled'); }
685+
if (hasClass(tabs[j], 'disabled')) {
686+
addClass(tabNavigationItem, 'disabled');
687+
}
683688
tabNavigationItem.innerHTML = tabTitle;
684689
tabNavigation.appendChild(tabNavigationItem);
685690
@@ -697,12 +702,20 @@ if (typeof Sfjs === 'undefined' || typeof Sfjs.loadToolbar === 'undefined') {
697702
698703
for (j = 0; j < tabNavigation.length; j++) {
699704
tabId = tabNavigation[j].getAttribute('data-tab-id');
700-
document.getElementById(tabId).querySelector('.tab-title').className = 'hidden';
705+
const tabPanel = document.getElementById(tabId);
706+
tabPanel.setAttribute('role', 'tabpanel');
707+
tabPanel.setAttribute('aria-labelledby', tabId);
708+
tabPanel.querySelector('.tab-title').className = 'hidden';
709+
tabNavigation[j].setAttribute('aria-controls', tabId);
701710
702711
if (hasClass(tabNavigation[j], 'active')) {
703-
document.getElementById(tabId).className = 'block';
712+
tabPanel.className = 'block';
713+
tabNavigation[j].setAttribute('aria-selected', 'true');
714+
tabNavigation[j].removeAttribute('tabindex');
704715
} else {
705-
document.getElementById(tabId).className = 'hidden';
716+
tabPanel.className = 'hidden';
717+
tabNavigation[j].removeAttribute('aria-selected');
718+
tabNavigation[j].setAttribute('tabindex', '-1');
706719
}
707720
708721
tabNavigation[j].addEventListener('click', function(e) {
@@ -720,9 +733,13 @@ if (typeof Sfjs === 'undefined' || typeof Sfjs.loadToolbar === 'undefined') {
720733
var tabId = tabNavigation[k].getAttribute('data-tab-id');
721734
document.getElementById(tabId).className = 'hidden';
722735
removeClass(tabNavigation[k], 'active');
736+
tabNavigation[k].removeAttribute('aria-selected');
737+
tabNavigation[k].setAttribute('tabindex', '-1');
723738
}
724739
725740
addClass(activeTab, 'active');
741+
activeTab.setAttribute('aria-selected', 'true');
742+
activeTab.removeAttribute('tabindex');
726743
var activeTabId = activeTab.getAttribute('data-tab-id');
727744
document.getElementById(activeTabId).className = 'block';
728745
});

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -516,7 +516,6 @@ input[type="radio"], input[type="checkbox"] {
516516
color: var(--color-link);
517517
text-decoration: none;
518518
background-color: transparent;
519-
outline: none;
520519
border: 0;
521520
padding: 0;
522521
cursor: pointer;

0 commit comments

Comments
 (0)