Make it more accessible

javiereguiluz · javiereguiluz · commit e918a77cb638 · 2023-01-12T19:56:24.000+01:00
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/logger.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/logger.html.twig
@@ -58,18 +58,18 @@
                 <div class="tab-navigation">
                     {% set initially_active_tab = has_error_logs ? 'error' : has_deprecation_logs ? 'deprecation' : 'all' %}
                     <input type="radio" id="filter-log-type-all" name="filter-log-type" value="all" {{ 'all' == initially_active_tab ? 'checked' }}>
-                    <label for="filter-log-type-all" class="tab-control {{ 'all' == initially_active_tab ? 'active' }}">
+                    <label for="filter-log-type-all" class="tab-control">
                         All messages
                     </label>
 
                     <input type="radio" id="filter-log-type-error" name="filter-log-type" value="error" {{ 'error' == initially_active_tab ? 'checked' }}>
-                    <label for="filter-log-type-error" class="tab-control {{ 'error' == initially_active_tab ? 'active' }}">
+                    <label for="filter-log-type-error" class="tab-control">
                         Errors
                         <span class="badge status-{{ collector.counterrors ? 'error' }}">{{ collector.counterrors|default(0) }}</span>
                     </label>
 
                     <input type="radio" id="filter-log-type-deprecation" name="filter-log-type" value="deprecation" {{ 'deprecation' == initially_active_tab ? 'checked' }}>
-                    <label for="filter-log-type-deprecation" class="tab-control {{ 'deprecation' == initially_active_tab ? 'active' }}">
+                    <label for="filter-log-type-deprecation" class="tab-control">
                         Deprecations
                         <span class="badge status-{{ collector.countdeprecations ? 'warning' }}">{{ collector.countdeprecations|default(0) }}</span>
                     </label>
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
@@ -909,10 +909,6 @@ if (typeof Sfjs === 'undefined' || typeof Sfjs.loadToolbar === 'undefined') {
                 /* update the selected totals of all filters */
                 document.querySelector('#log-filter-priority .filter-active-num').innerText = (priorities.length === selectedPriorities.length) ? 'All' : selectedPriorities.length;
                 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 .tab-control').forEach((tab) => tab.classList.remove('active'));
-                document.querySelector(`#log-filter-type input[value="${selectedType}"] + .tab-control`).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
@@ -1554,6 +1554,7 @@ tr.status-warning td {
     background: transparent;
     border: 0;
     box-shadow: none;
+    color: var(--color-text);
     transition: box-shadow .05s ease-in, background-color .05s ease-in;
     cursor: pointer;
     font-size: 14px;
@@ -1793,9 +1794,32 @@ tr.status-warning td {
     font-weight: bold;
     padding: 0 1px;
 }
+.log-filter .tab-navigation {
+    position: relative;
+}
 .log-filter .tab-navigation input[type="radio"] {
-    display: none;
+    position: absolute;
+    pointer-events: none;
+    opacity: 0;
+}
+.tab-navigation input[type="radio"]:checked + .tab-control {
+    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 input[type="radio"]:checked + .tab-control {
+    box-shadow: inset 0 0 0 1px var(--tab-border-color);
 }
+.tab-navigation input[type="radio"]:focus-visible + .tab-control {
+    outline: 1px solid var(--color-link);
+}
+.tab-navigation input[type="radio"]:checked + .tab-control + input[type="radio"] + .tab-control:before{
+    width: 0;
+}
+
 .log-filters .log-filter .log-filter-content {
     background: var(--base-0);
     border: 1px solid var(--table-border-color);
