Update the HTML structure of tabs

symfony · Dec 26, 2022 · be0e362 · be0e362
1 parent 39b7a91
commit be0e362
Show file tree

Hide file tree

Showing 13 changed files with 47 additions and 40 deletions.
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/cache.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/cache.html.twig
@@ -54,7 +54,7 @@
         {{ _self.render_metrics(collector.totals, true) }}
 
         <h2>Pools</h2>
-        <div class="sf-tabs" role="tablist">
+        <div class="sf-tabs">
             {# the empty merge is needed to turn the iterator into an array #}
             {% set cache_pools_with_calls = collector.calls|filter(calls => calls|length > 0)|merge([]) %}
             {% for name, calls in cache_pools_with_calls %}

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/events.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/events.html.twig
@@ -17,7 +17,7 @@
             <p>No events have been recorded. Check that debugging is enabled in the kernel.</p>
         </div>
     {% else %}
-        <div class="sf-tabs" role="tablist">
+        <div class="sf-tabs">
             <div class="tab">
                 <h3 class="tab-title">Called Listeners <span class="badge">{{ collector.calledlisteners|length }}</span></h3>
 

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig
@@ -457,7 +457,7 @@
         {% endif %}
 
         {% set form_has_errors = data.errors ?? [] is not empty %}
-        <div class="sf-tabs" role="tablist">
+        <div class="sf-tabs">
             <div class="tab {{ form_has_errors ? 'active' : 'disabled' }}">
                 <h3 class="tab-title">Errors</h3>
 

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/http_client.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/http_client.html.twig
@@ -53,7 +53,7 @@
             </div>
         </div>
         <h2>Clients</h2>
-        <div class="sf-tabs" role="tablist">
+        <div class="sf-tabs">
             {% for name, client in collector.clients %}
                 <div class="tab {{ client.traces|length == 0 ? 'disabled' }}">
                     <h3 class="tab-title">{{ name }} <span class="badge">{{ client.traces|length }}</span></h3>

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/logger.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/logger.html.twig
@@ -57,27 +57,27 @@
         {% set filters = collector.filters %}
         <div class="log-filters">
             <div id="log-filter-type" class="log-filter">
-                <ul class="tab-navigation">
-                    <li class="{{ not has_error_logs and not has_deprecation_logs ? 'active' }}">
+                <ul class="tab-navigation" role="tablist">
+                    <button role="tab" class="tab-control {{ not has_error_logs and not has_deprecation_logs ? 'active' }}">
                         <input {{ not has_error_logs and not has_deprecation_logs ? 'checked' }} type="radio" id="filter-log-type-all" name="filter-log-type" value="all">
                         <label for="filter-log-type-all">All messages</label>
-                    </li>
+                    </button>
 
-                    <li class="{{ has_error_logs ? 'active' }}">
+                    <button role="tab" class="tab-control {{ has_error_logs ? 'active' }}">
                         <input {{ has_error_logs ? 'checked' }} type="radio" id="filter-log-type-error" name="filter-log-type" value="error">
                         <label for="filter-log-type-error">
                             Errors
                             <span class="badge status-{{ collector.counterrors ? 'error' }}">{{ collector.counterrors|default(0) }}</span>
                         </label>
-                    </li>
+                    </button>
 
-                    <li class="{{ not has_error_logs and has_deprecation_logs ? 'active' }}">
+                    <button role="tab" class="tab-control {{ not has_error_logs and has_deprecation_logs ? 'active' }}">
                         <input {{ not has_error_logs and has_deprecation_logs ? 'checked' }} type="radio" id="filter-log-type-deprecation" name="filter-log-type" value="deprecation">
                         <label for="filter-log-type-deprecation">
                             Deprecations
                             <span class="badge status-{{ collector.countdeprecations ? 'warning' }}">{{ collector.countdeprecations|default(0) }}</span>
                         </label>
-                    </li>
+                    </button>
                 </ul>
             </div>
 

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/mailer.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/mailer.html.twig
@@ -131,7 +131,7 @@
 
             <pre class="prewrap" style="max-height: 600px; margin-left: 5px">{{ message.toString() }}</pre>
         {% else %}
-            <div class="sf-tabs" role="tablist">
+            <div class="sf-tabs">
                 <div class="tab">
                     <h3 class="tab-title">Email contents</h3>
                     <div class="tab-content">
@@ -179,7 +179,7 @@
 
                         {% if message.htmlBody or message.textBody %}
                             <div class="card-block">
-                                <div class="sf-tabs sf-tabs-sm" role="tablist">
+                                <div class="sf-tabs sf-tabs-sm">
                                     {% if message.htmlBody %}
                                         {% set htmlBody = message.htmlBody() %}
                                         <div class="tab">

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/messenger.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/messenger.html.twig
@@ -73,7 +73,7 @@
         <p class="text-muted">Ordered list of dispatched messages across all your buses</p>
         {{ helper.render_bus_messages(collector.messages, true) }}
     {% else %}
-        <div class="sf-tabs message-bus" role="tablist">
+        <div class="sf-tabs message-bus">
             <div class="tab">
                 {% set messages = collector.messages %}
                 {% set exceptionsCount = collector.exceptionsCount %}

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/notifier.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/notifier.html.twig
@@ -103,7 +103,7 @@
         <h3>{{ transport }}</h3>
 
         <div class="card-block">
-            <div class="sf-tabs sf-tabs-sm" role="tablist">
+            <div class="sf-tabs sf-tabs-sm">
                 {% for event in events.events(transport) %}
                     {% set message = event.message %}
                     <div class="tab">
@@ -127,7 +127,7 @@
                                     </div>
                                 {% endif %}
                                     <div class="card-block">
-                                        <div class="sf-tabs sf-tabs-sm" role="tablist">
+                                        <div class="sf-tabs sf-tabs-sm">
                                             {% if message.getNotification is defined %}
                                                 <div class="tab">
                                                     <h3 class="tab-title">Notification</h3>

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/request.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/request.html.twig
@@ -109,7 +109,7 @@
         {{ 'n/a' in controller_name ? 'Request / Response' : controller_name }}
     </h2>
 
-    <div class="sf-tabs" role="tablist">
+    <div class="sf-tabs">
         <div class="tab">
             <h3 class="tab-title">Request</h3>
 
@@ -182,7 +182,7 @@
                         <p>Request content not available (it was retrieved as a resource).</p>
                     </div>
                 {% elseif collector.content %}
-                    <div class="sf-tabs" role="tablist">
+                    <div class="sf-tabs">
                         {% set prettyJson = collector.isJsonRequest ? collector.prettyJson : null %}
                         {% if prettyJson is not null %}
                         <div class="tab">

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/serializer.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/serializer.html.twig
@@ -88,7 +88,7 @@
                 </div>
             </div>
 
-            <div class="sf-tabs" role="tablist">
+            <div class="sf-tabs">
                 {{ helper.render_serialize_tab(collector.data, true) }}
                 {{ helper.render_serialize_tab(collector.data, false) }}
 

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/translation.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/translation.html.twig
@@ -90,7 +90,7 @@
             {% endif %}
         {% endfor %}
 
-        <div class="sf-tabs" role="tablist">
+        <div class="sf-tabs">
             <div class="tab {{ collector.countMissings == 0 ? 'active' }}">
                 <h3 class="tab-title">Defined <span class="badge">{{ collector.countDefines }}</span></h3>
 

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig
@@ -670,17 +670,20 @@ if (typeof Sfjs === 'undefined' || typeof Sfjs.loadToolbar === 'undefined') {
                 /* create the tab navigation for each group of tabs */
                 for (var i = 0; i < tabGroups.length; i++) {
                     var tabs = tabGroups[i].querySelectorAll(':scope > .tab');
-                    var tabNavigation = document.createElement('ul');
+                    var tabNavigation = document.createElement('div');
                     tabNavigation.className = 'tab-navigation';
+                    tabNavigation.setAttribute('role', 'tablist');
 
                     var selectedTabId = 'tab-' + i + '-0'; /* select the first tab by default */
                     for (var j = 0; j < tabs.length; j++) {
                         var tabId = 'tab-' + i + '-' + j;
                         var tabTitle = tabs[j].querySelector('.tab-title').innerHTML;
 
-                        var tabNavigationItem = document.createElement('li');
+                        var tabNavigationItem = document.createElement('button');
+                        tabNavigationItem.classList.add('tab-control');
                         tabNavigationItem.setAttribute('data-tab-id', tabId);
                         tabNavigationItem.setAttribute('role', 'tab');
+                        tabNavigationItem.setAttribute('aria-controls', tabId);
                         if (hasClass(tabs[j], 'active')) { selectedTabId = tabId; }
                         if (hasClass(tabs[j], 'disabled')) {
                             addClass(tabNavigationItem, 'disabled');
@@ -698,15 +701,14 @@ if (typeof Sfjs === 'undefined' || typeof Sfjs.loadToolbar === 'undefined') {
 
                 /* display the active tab and add the 'click' event listeners */
                 for (i = 0; i < tabGroups.length; i++) {
-                    tabNavigation = tabGroups[i].querySelectorAll(':scope > .tab-navigation li');
+                    tabNavigation = tabGroups[i].querySelectorAll(':scope > .tab-navigation .tab-control');
 
                     for (j = 0; j < tabNavigation.length; j++) {
                         tabId = tabNavigation[j].getAttribute('data-tab-id');
                         const tabPanel = document.getElementById(tabId);
                         tabPanel.setAttribute('role', 'tabpanel');
                         tabPanel.setAttribute('aria-labelledby', tabId);
                         tabPanel.querySelector('.tab-title').className = 'hidden';
-                        tabNavigation[j].setAttribute('aria-controls', tabId);
 
                         if (hasClass(tabNavigation[j], 'active')) {
                             tabPanel.className = 'block';
@@ -722,8 +724,8 @@ if (typeof Sfjs === 'undefined' || typeof Sfjs.loadToolbar === 'undefined') {
                             var activeTab = e.target || e.srcElement;
 
                             /* needed because when the tab contains HTML contents, user can click */
-                            /* on any of those elements instead of their parent '<li>' element */
-                            while (activeTab.tagName.toLowerCase() !== 'li') {
+                            /* on any of those elements instead of their parent '<button>' element */
+                            while (activeTab.tagName.toLowerCase() !== 'button') {
                                 activeTab = activeTab.parentNode;
                             }
 
@@ -911,7 +913,7 @@ if (typeof Sfjs === 'undefined' || typeof Sfjs.loadToolbar === 'undefined') {
                 document.querySelector('#log-filter-channel .filter-active-num').innerText = (channels.length === selectedChannels.length) ? 'All' : selectedChannels.length;
 
                 /* update the currently selected "log type" tab */
-                document.querySelectorAll('#log-filter-type li').forEach((tab) => tab.classList.remove('active'));
+                document.querySelectorAll('#log-filter-type .tab-control').forEach((tab) => tab.classList.remove('active'));
                 document.querySelector(`#log-filter-type input[value="${selectedType}"]`).parentElement.classList.add('active');
             },
         };

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig
@@ -1545,23 +1545,26 @@ tr.status-warning td {
     box-shadow: inset 0 0 0 1px var(--tab-border-color), 0 0 0 4px var(--page-background);
     margin: 0 0 10px;
 }
-.tab-navigation li {
+.tab-navigation .tab-control {
+    background: transparent;
+    border: 0;
     box-shadow: none;
     transition: box-shadow .05s ease-in, background-color .05s ease-in;
     cursor: pointer;
+    font-size: 14px;
     font-weight: 500;
-    list-style: none;
+    line-height: 1.4;
     margin: 0;
     padding: 4px 14px;
     position: relative;
     text-align: center;
     z-index: 1;
 }
-.sf-tabs-sm .tab-navigation li {
+.sf-tabs-sm .tab-navigation .tab-control {
     font-size: 13px;
     padding: 2.5px 10px;
 }
-.tab-navigation li:before {
+.tab-navigation .tab-control:before {
     background: var(--tab-border-color);
     bottom: 15%;
     content: "";
@@ -1570,10 +1573,12 @@ tr.status-warning td {
     top: 15%;
     width: 1px;
 }
-.tab-navigation li:first-child:before, .tab-navigation li.active + li:before, .tab-navigation li.active:before {
+.tab-navigation .tab-control:first-child:before,
+.tab-navigation .tab-control.active + .tab-control:before,
+.tab-navigation .tab-control.active:before {
     width: 0;
 }
-.tab-navigation li .badge {
+.tab-navigation .tab-control .badge {
     background: var(--selected-badge-background);
     box-shadow: var(--selected-badge-shadow);
     color: var(--selected-badge-color);
@@ -1587,29 +1592,29 @@ tr.status-warning td {
     text-align: center;
     white-space: nowrap;
 }
-.tab-navigation li.disabled {
+.tab-navigation .tab-control.disabled {
     color: var(--tab-disabled-color);
 }
-.tab-navigation li.active {
+.tab-navigation .tab-control.active {
     background-color: var(--tab-active-background);
     border-radius: 6px;
     box-shadow: inset 0 0 0 1.5px var(--tab-active-border-color);
     color: var(--tab-active-color);
     position: relative;
     z-index: 1;
 }
-.theme-dark .tab-navigation li.active {
+.theme-dark .tab-navigation .tab-control.active {
     box-shadow: inset 0 0 0 1px var(--tab-border-color);
 }
 .tab-content > *:first-child {
     margin-top: 0;
 }
-.tab-navigation li .badge.status-warning {
+.tab-navigation .tab-control .badge.status-warning {
     background: var(--selected-badge-warning-background);
     box-shadow: var(--selected-badge-warning-shadow);
     color: var(--selected-badge-warning-color);
 }
-.tab-navigation li .badge.status-error {
+.tab-navigation .tab-control .badge.status-error {
     background: var(--selected-badge-danger-background);
     box-shadow: var(--selected-badge-danger-shadow);
     color: var(--selected-badge-danger-color);
@@ -1783,10 +1788,10 @@ tr.status-warning td {
     font-weight: bold;
     padding: 0 1px;
 }
-.log-filter .tab-navigation li input {
+.log-filter .tab-navigation .tab-control input {
     display: none;
 }
-.log-filter .tab-navigation li label {
+.log-filter .tab-navigation .tab-control label {
     cursor: pointer;
 }
 .log-filters .log-filter .log-filter-content {