diogo/symfony
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Toolbar toggler accessibility

Browse Source
This commit is contained in:
Chi-teck 2020-08-19 17:04:29 +00:00 committed by Fabien Potencier
parent 6288449f61
commit 4333dd0ac9
3 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig
View File

@ -473,7 +473,11 @@
} }
}; };
} }
addEventListener(document.getElementById('sfToolbarHideButton-' + newToken), 'click', function (event) { var hideButton = document.getElementById('sfToolbarHideButton-' + newToken);
var hideButtonSvg = hideButton.querySelector('svg');
hideButtonSvg.setAttribute('aria-hidden', 'true');
hideButtonSvg.setAttribute('focusable', 'false');
addEventListener(hideButton, 'click', function (event) {
event.preventDefault(); event.preventDefault();
var p = this.parentNode; var p = this.parentNode;
@ -482,7 +486,11 @@
document.getElementById('sfMiniToolbar-' + newToken).style.display = 'block'; document.getElementById('sfMiniToolbar-' + newToken).style.display = 'block';
setPreference('toolbar/displayState', 'none'); setPreference('toolbar/displayState', 'none');
}); });
addEventListener(document.getElementById('sfToolbarMiniToggler-' + newToken), 'click', function (event) { var showButton = document.getElementById('sfToolbarMiniToggler-' + newToken);
var showButtonSvg = showButton.querySelector('svg');
showButtonSvg.setAttribute('aria-hidden', 'true');
showButtonSvg.setAttribute('focusable', 'false');
addEventListener(showButton, 'click', function (event) {
event.preventDefault(); event.preventDefault();
var elem = this.parentNode; var elem = this.parentNode;

11
src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig
View File

@ -14,8 +14,10 @@
z-index: 99999; z-index: 99999;
} }
.sf-minitoolbar a { .sf-minitoolbar button {
display: block; background-color: transparent;
padding: 0;
border: none;
} }
.sf-minitoolbar svg, .sf-minitoolbar svg,
.sf-minitoolbar img { .sf-minitoolbar img {
@ -81,10 +83,13 @@
height: 36px; height: 36px;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
border: none;
margin: 0;
padding: 0;
} }
.sf-toolbarreset .hide-button svg { .sf-toolbarreset .hide-button svg {
max-height: 18px; max-height: 18px;
margin-top: 10px; margin-top: 1px;
} }
.sf-toolbar-block { .sf-toolbar-block {

8
src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.html.twig
View File

@ -1,8 +1,8 @@
<!-- START of Symfony Web Debug Toolbar --> <!-- START of Symfony Web Debug Toolbar -->
<div id="sfMiniToolbar-{{ token }}" class="sf-minitoolbar" data-no-turbolink> <div id="sfMiniToolbar-{{ token }}" class="sf-minitoolbar" data-no-turbolink>
<a href="#" title="Show Symfony toolbar" tabindex="-1" id="sfToolbarMiniToggler-{{ token }}" accesskey="D"> <button type="button" title="Show Symfony toolbar" id="sfToolbarMiniToggler-{{ token }}" accesskey="D" aria-expanded="false" aria-controls="sfToolbarMainContent-{{ token }}">
{{ include('@WebProfiler/Icon/symfony.svg') }} {{ include('@WebProfiler/Icon/symfony.svg') }}
</a> </button>
</div> </div>
<div id="sfToolbarClearer-{{ token }}" class="sf-toolbar-clearer"></div> <div id="sfToolbarClearer-{{ token }}" class="sf-toolbar-clearer"></div>
@ -23,8 +23,8 @@
{% endif %} {% endif %}
{% endfor %} {% endfor %}
<a class="hide-button" id="sfToolbarHideButton-{{ token }}" title="Close Toolbar" tabindex="-1" accesskey="D"> <button class="hide-button" type="button" id="sfToolbarHideButton-{{ token }}" title="Close Toolbar" accesskey="D" aria-expanded="true" aria-controls="sfToolbarMainContent-{{ token }}">
{{ include('@WebProfiler/Icon/close.svg') }} {{ include('@WebProfiler/Icon/close.svg') }}
</a> </button>
</div> </div>
<!-- END of Symfony Web Debug Toolbar --> <!-- END of Symfony Web Debug Toolbar -->