Accessibility: Add missing aria-label to some UIBlock

- Button - Global search - Quick create - Navigation menu - Tab container
2026-05-17 14:28:53 +02:00 · 2021-06-12 18:11:55 +02:00
parent 485262ec0a
commit b965138d57
23 changed files with 73 additions and 13 deletions
--- a/application/cmdbabstract.class.inc.php
+++ b/application/cmdbabstract.class.inc.php
@@ -3216,7 +3216,8 @@ EOF
 			// - Fullscreen toggler for large fields
 			$sFullscreenTogglerTooltip = Dict::S('UI:ToggleFullScreen');
 			$sFullscreenTogglerHTML = (false === in_array($oAttDef->GetEditClass(), static::GetAttEditClassesToRenderAsLargeField())) ? '' : <<<HTML
-<a href="#" class="ibo-field--fullscreen-toggler" data-role="ibo-field--fullscreen-toggler" 
+<a href="#" class="ibo-field--fullscreen-toggler" data-role="ibo-field--fullscreen-toggler"
+aria-label="{$sFullscreenTogglerTooltip}"
 data-tooltip-content="{$sFullscreenTogglerTooltip}" data-fullscreen-toggler-target="$(this).closest('[data-role=\'ibo-field\']')"><span class="fas fa-fw fa-expand-arrows-alt"></span></a>
 HTML;

--- a/dictionaries/ui/layouts/cs.dictionary.itop.tab-container.php
+++ b/dictionaries/ui/layouts/cs.dictionary.itop.tab-container.php
@@ -5,6 +5,7 @@
 */

 Dict::Add('CS CZ', 'Czech', 'Čeština', [
+	'UI:Layout:TabContainer:ExtraTabsListToggler:Label' => 'Other tabs~~',
 	'UIBlock:Error:AddBlockNotTabForbidden' => 'Cannot add block %1$s to %2$s (only Tab blocks are allowed)~~',
 	'UIBlock:TabContainer:RemoteTabLoad' => 'Click to load this tab~~',
 ]);
--- a/dictionaries/ui/layouts/da.dictionary.itop.tab-container.php
+++ b/dictionaries/ui/layouts/da.dictionary.itop.tab-container.php
@@ -5,6 +5,7 @@
 */

 Dict::Add('DA DA', 'Danish', 'Dansk', [
+	'UI:Layout:TabContainer:ExtraTabsListToggler:Label' => 'Other tabs~~',
 	'UIBlock:Error:AddBlockNotTabForbidden' => 'Cannot add block %1$s to %2$s (only Tab blocks are allowed)~~',
 	'UIBlock:TabContainer:RemoteTabLoad' => 'Click to load this tab~~',
 ]);
--- a/dictionaries/ui/layouts/de.dictionary.itop.tab-container.php
+++ b/dictionaries/ui/layouts/de.dictionary.itop.tab-container.php
@@ -5,6 +5,7 @@
 */

 Dict::Add('DE DE', 'German', 'Deutsch', [
+	'UI:Layout:TabContainer:ExtraTabsListToggler:Label' => 'Other tabs~~',
 	'UIBlock:Error:AddBlockNotTabForbidden' => 'Cannot add block %1$s to %2$s (only Tab blocks are allowed)~~',
 	'UIBlock:TabContainer:RemoteTabLoad' => 'Click to load this tab~~',
 ]);
--- a/dictionaries/ui/layouts/en.dictionary.itop.tab-container.php
+++ b/dictionaries/ui/layouts/en.dictionary.itop.tab-container.php
@@ -5,6 +5,7 @@
 */

 Dict::Add('EN US', 'English', 'English', [
+	'UI:Layout:TabContainer:ExtraTabsListToggler:Label' => 'Other tabs',
 	'UIBlock:Error:AddBlockNotTabForbidden' => 'Cannot add block %1$s to %2$s (only Tab blocks are allowed)',
 	'UIBlock:TabContainer:RemoteTabLoad' => 'Click to load this tab',
 ]);
--- a/dictionaries/ui/layouts/es_cr.dictionary.itop.tab-container.php
+++ b/dictionaries/ui/layouts/es_cr.dictionary.itop.tab-container.php
@@ -5,6 +5,7 @@
 */

 Dict::Add('ES CR', 'Spanish', 'Español, Castellaño', [
+	'UI:Layout:TabContainer:ExtraTabsListToggler:Label' => 'Other tabs~~',
 	'UIBlock:Error:AddBlockNotTabForbidden' => 'Cannot add block %1$s to %2$s (only Tab blocks are allowed)~~',
 	'UIBlock:TabContainer:RemoteTabLoad' => 'Click to load this tab~~',
 ]);
--- a/dictionaries/ui/layouts/fr.dictionary.itop.tab-container.php
+++ b/dictionaries/ui/layouts/fr.dictionary.itop.tab-container.php
@@ -5,6 +5,7 @@
 */

 Dict::Add('FR FR', 'French', 'Français', [
+	'UI:Layout:TabContainer:ExtraTabsListToggler:Label' => 'Autres onglets',
 	'UIBlock:Error:AddBlockNotTabForbidden' => 'Impossible d\'ajouter le bloc %1$s à %2$s (seul les blocs de type Tab sont autorisés) : Veuillez contacter votre administrateur',
 	'UIBlock:TabContainer:RemoteTabLoad' => 'Cliquez pour charger cet onglet',
 ]);
--- a/dictionaries/ui/layouts/hu.dictionary.itop.tab-container.php
+++ b/dictionaries/ui/layouts/hu.dictionary.itop.tab-container.php
@@ -5,6 +5,7 @@
 */

 Dict::Add('HU HU', 'Hungarian', 'Magyar', [
+	'UI:Layout:TabContainer:ExtraTabsListToggler:Label' => 'Other tabs~~',
 	'UIBlock:Error:AddBlockNotTabForbidden' => 'Cannot add block %1$s to %2$s (only Tab blocks are allowed)~~',
 	'UIBlock:TabContainer:RemoteTabLoad' => 'Click to load this tab~~',
 ]);
--- a/dictionaries/ui/layouts/it.dictionary.itop.tab-container.php
+++ b/dictionaries/ui/layouts/it.dictionary.itop.tab-container.php
@@ -5,6 +5,7 @@
 */

 Dict::Add('IT IT', 'Italian', 'Italiano', [
+	'UI:Layout:TabContainer:ExtraTabsListToggler:Label' => 'Other tabs~~',
 	'UIBlock:Error:AddBlockNotTabForbidden' => 'Cannot add block %1$s to %2$s (only Tab blocks are allowed)~~',
 	'UIBlock:TabContainer:RemoteTabLoad' => 'Click to load this tab~~',
 ]);
--- a/dictionaries/ui/layouts/ja.dictionary.itop.tab-container.php
+++ b/dictionaries/ui/layouts/ja.dictionary.itop.tab-container.php
@@ -5,6 +5,7 @@
 */

 Dict::Add('JA JP', 'Japanese', '日本語', [
+	'UI:Layout:TabContainer:ExtraTabsListToggler:Label' => 'Other tabs~~',
 	'UIBlock:Error:AddBlockNotTabForbidden' => 'Cannot add block %1$s to %2$s (only Tab blocks are allowed)~~',
 	'UIBlock:TabContainer:RemoteTabLoad' => 'Click to load this tab~~',
 ]);
--- a/dictionaries/ui/layouts/nl.dictionary.itop.tab-container.php
+++ b/dictionaries/ui/layouts/nl.dictionary.itop.tab-container.php
@@ -5,6 +5,7 @@
 */

 Dict::Add('NL NL', 'Dutch', 'Nederlands', [
+	'UI:Layout:TabContainer:ExtraTabsListToggler:Label' => 'Other tabs~~',
 	'UIBlock:Error:AddBlockNotTabForbidden' => 'Cannot add block %1$s to %2$s (only Tab blocks are allowed)~~',
 	'UIBlock:TabContainer:RemoteTabLoad' => 'Click to load this tab~~',
 ]);
--- a/dictionaries/ui/layouts/pt_br.dictionary.itop.tab-container.php
+++ b/dictionaries/ui/layouts/pt_br.dictionary.itop.tab-container.php
@@ -5,6 +5,7 @@
 */

 Dict::Add('PT BR', 'Brazilian', 'Brazilian', [
+	'UI:Layout:TabContainer:ExtraTabsListToggler:Label' => 'Other tabs~~',
 	'UIBlock:Error:AddBlockNotTabForbidden' => 'Cannot add block %1$s to %2$s (only Tab blocks are allowed)~~',
 	'UIBlock:TabContainer:RemoteTabLoad' => 'Click to load this tab~~',
 ]);
--- a/dictionaries/ui/layouts/ru.dictionary.itop.tab-container.php
+++ b/dictionaries/ui/layouts/ru.dictionary.itop.tab-container.php
@@ -5,6 +5,7 @@
 */

 Dict::Add('RU RU', 'Russian', 'Русский', [
+	'UI:Layout:TabContainer:ExtraTabsListToggler:Label' => 'Other tabs~~',
 	'UIBlock:Error:AddBlockNotTabForbidden' => 'Cannot add block %1$s to %2$s (only Tab blocks are allowed)~~',
 	'UIBlock:TabContainer:RemoteTabLoad' => 'Click to load this tab~~',
 ]);
--- a/dictionaries/ui/layouts/sk.dictionary.itop.tab-container.php
+++ b/dictionaries/ui/layouts/sk.dictionary.itop.tab-container.php
@@ -5,6 +5,7 @@
 */

 Dict::Add('SK SK', 'Slovak', 'Slovenčina', [
+	'UI:Layout:TabContainer:ExtraTabsListToggler:Label' => 'Other tabs~~',
 	'UIBlock:Error:AddBlockNotTabForbidden' => 'Cannot add block %1$s to %2$s (only Tab blocks are allowed)~~',
 	'UIBlock:TabContainer:RemoteTabLoad' => 'Click to load this tab~~',
 ]);
--- a/dictionaries/ui/layouts/tr.dictionary.itop.tab-container.php
+++ b/dictionaries/ui/layouts/tr.dictionary.itop.tab-container.php
@@ -5,6 +5,7 @@
 */

 Dict::Add('TR TR', 'Turkish', 'Türkçe', [
+	'UI:Layout:TabContainer:ExtraTabsListToggler:Label' => 'Other tabs~~',
 	'UIBlock:Error:AddBlockNotTabForbidden' => 'Cannot add block %1$s to %2$s (only Tab blocks are allowed)~~',
 	'UIBlock:TabContainer:RemoteTabLoad' => 'Click to load this tab~~',
 ]);
--- a/dictionaries/ui/layouts/zh_cn.dictionary.itop.tab-container.php
+++ b/dictionaries/ui/layouts/zh_cn.dictionary.itop.tab-container.php
@@ -5,6 +5,7 @@
 */

 Dict::Add('ZH CN', 'Chinese', '简体中文', [
+	'UI:Layout:TabContainer:ExtraTabsListToggler:Label' => 'Other tabs~~',
 	'UIBlock:Error:AddBlockNotTabForbidden' => 'Cannot add block %1$s to %2$s (only Tab blocks are allowed)~~',
 	'UIBlock:TabContainer:RemoteTabLoad' => 'Click to load this tab~~',
 ]);
--- a/templates/base/components/button/buttonjs.html.twig
+++ b/templates/base/components/button/buttonjs.html.twig
@@ -1,5 +1,6 @@
+{% set sAriaLabel = oUIBlock.GetLabel() is not empty ? oUIBlock.GetLabel() : (oUIBlock.GetTooltip() is not empty ? oUIBlock.GetTooltip() : '') %}
 <button id="{{ oUIBlock.GetId() }}"
-        class="ibo-button ibo-is-{{ oUIBlock.GetActionType() }} ibo-is-{{ oUIBlock.GetColor() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}"
+        class="ibo-button ibo-is-{{ oUIBlock.GetActionType() }} ibo-is-{{ oUIBlock.GetColor() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
        {% if oUIBlock.GetDataAttributes() %}
            {% for sName, sValue in oUIBlock.GetDataAttributes() %}
                data-{{ sName }}="{{ sValue }}"
@@ -9,7 +10,16 @@
        name="{{ oUIBlock.GetName() }}"
        value="{{ oUIBlock.GetValue() }}"
        {% if oUIBlock.IsDisabled() %} disabled {% endif %}
-        {% if oUIBlock.GetTooltip() is not empty %} data-tooltip-content="{{ oUIBlock.GetTooltip() }}" {% else %} title="{{ oUIBlock.GetLabel() }}" {% endif %}
+        {# Visual tooltip... #}
+        {% if oUIBlock.GetTooltip() is not empty %}
+            data-tooltip-content="{{ oUIBlock.GetTooltip() }}"
+        {% else %}
+            title="{{ oUIBlock.GetLabel() }}"
+        {% endif %}
+        {# ... and accessibility title. Important especially in case the button has no label, but only an icon #}
+        {% if sAriaLabel is not empty %}
+            aria-label="{{ sAriaLabel }}"
+        {% endif %}
 >
    {% if oUIBlock.GetIconClass() is not empty %}
        <span class="ibo-button--icon {{ oUIBlock.GetIconClass() }}"></span>
--- a/templates/base/components/button/buttonurl.html.twig
+++ b/templates/base/components/button/buttonurl.html.twig
@@ -1,5 +1,6 @@
+{% set sAriaLabel = oUIBlock.GetLabel() is not empty ? oUIBlock.GetLabel() : (oUIBlock.GetTooltip() is not empty ? oUIBlock.GetTooltip() : '') %}
 <a id="{{ oUIBlock.GetId() }}"
-        class="ibo-button ibo-is-{{ oUIBlock.GetActionType() }} ibo-is-{{ oUIBlock.GetColor() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}"
+        class="ibo-button ibo-is-{{ oUIBlock.GetActionType() }} ibo-is-{{ oUIBlock.GetColor() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
        {% if oUIBlock.GetDataAttributes() %}
            {% for sName, sValue in oUIBlock.GetDataAttributes() %}
                data-{{ sName }}="{{ sValue }}"
@@ -7,7 +8,16 @@
        {% endif %}
        href="{{ oUIBlock.GetURL() }}"
        target="{{ oUIBlock.GetTarget() }}"
-        {% if oUIBlock.GetTooltip() is not empty %} data-tooltip-content="{{ oUIBlock.GetTooltip() }}" {% else %} title="{{ oUIBlock.GetLabel() }}" {% endif %}
+        {# Visual tooltip... #}
+        {% if oUIBlock.GetTooltip() is not empty %}
+            data-tooltip-content="{{ oUIBlock.GetTooltip() }}"
+        {% else %}
+            title="{{ oUIBlock.GetLabel() }}"
+        {% endif %}
+        {# ... and accessibility title. Important especially in case the button has no label, but only an icon #}
+        {% if sAriaLabel is not empty %}
+            aria-label="{{ sAriaLabel }}"
+        {% endif %}
 >
    {% if oUIBlock.GetIconClass() is not empty %}
        <span class="ibo-button--icon {{ oUIBlock.GetIconClass() }}"></span>
--- a/templates/base/components/button/layout.html.twig
+++ b/templates/base/components/button/layout.html.twig
@@ -1,11 +1,22 @@
+{% set sAriaLabel = oUIBlock.GetLabel() is not empty ? oUIBlock.GetLabel() : (oUIBlock.GetTooltip() is not empty ? oUIBlock.GetTooltip() : '') %}
 <button id="{{ oUIBlock.GetId() }}"
-        class="ibo-button ibo-is-{{ oUIBlock.GetActionType() }} ibo-is-{{ oUIBlock.GetColor() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}"
+        class="ibo-button ibo-is-{{ oUIBlock.GetActionType() }} ibo-is-{{ oUIBlock.GetColor() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
        {% if oUIBlock.GetDataAttributes() %}
                {% for sName, sValue in oUIBlock.GetDataAttributes() %}
                        data-{{ sName }}="{{ sValue }}"
                {% endfor %}
        {% endif %}
-        {% if oUIBlock.GetTooltip() is not empty %} data-tooltip-content="{{ oUIBlock.GetTooltip() }}" {% else %} title="{{ oUIBlock.GetLabel() }}" {% endif %}
+        {# Visual tooltip... #}
+        {% if oUIBlock.GetTooltip() is not empty %}
+            data-tooltip-content="{{ oUIBlock.GetTooltip() }}"
+        {% else %}
+            title="{{ oUIBlock.GetLabel() }}"
+        {% endif %}
+        {# ... and accessibility title. Important especially in case the button has no label, but only an icon #}
+        {% if sAriaLabel is not empty %}
+            aria-label="{{ sAriaLabel }}"
+        {% endif %}
+
 >
    {% if oUIBlock.GetIconClass() is not empty %}
        <span class="ibo-button--icon {{ oUIBlock.GetIconClass() }}"></span>
--- a/templates/base/components/global-search/layout.html.twig
+++ b/templates/base/components/global-search/layout.html.twig
@@ -4,7 +4,12 @@
     class="ibo-global-search {% if oUIBlock.HasQuery() %}ibo-is-opened{% endif %}"
     data-role="ibo-global-search">
 	<form action="{{ oUIBlock.GetEndpoint() }}" method="get" class="ibo-global-search--head" data-role="ibo-global-search--head">
-		<a href="#" class="ibo-global-search--icon" data-role="ibo-global-search--icon" data-tooltip-content="{{ 'UI:Component:GlobalSearch:Tooltip'|dict_s }}" data-tooltip-placement="bottom-start" data-tooltip-distance-offset="25">
+		<a href="#" class="ibo-global-search--icon" data-role="ibo-global-search--icon"
+           aria-label="{{ 'UI:Component:GlobalSearch:Tooltip'|dict_s }}"
+           data-tooltip-content="{{ 'UI:Component:GlobalSearch:Tooltip'|dict_s }}"
+           data-tooltip-placement="bottom-start"
+           data-tooltip-distance-offset="25"
+        >
 			<span class="fas fa-search"></span>
 		</a>
 		<input type="text" name="text" class="ibo-global-search--input" data-role="ibo-global-search--input" placeholder="{{ 'UI:Component:GlobalSearch:Input:Placeholder'|dict_s }}" value="{{ oUIBlock.GetQuery() }}" autocomplete="off">
--- a/templates/base/components/quick-create/layout.html.twig
+++ b/templates/base/components/quick-create/layout.html.twig
@@ -1,8 +1,12 @@
 <div id="{{ oUIBlock.GetId() }}" class="ibo-quick-create" data-role="ibo-quick-create">
 	<form action="{{ oUIBlock.GetEndpoint() }}" method="get" class="ibo-quick-create--head" data-role="ibo-quick-create--head">
 		<input type="hidden" name="operation" value="new">
-		<a href="#" class="ibo-quick-create--icon" data-role="ibo-quick-create--icon" data-tooltip-content="{{ 'UI:Component:QuickCreate:Tooltip'|dict_s }}"
-		   data-tooltip-placement="bottom-start" data-tooltip-distance-offset="25">
+		<a href="#" class="ibo-quick-create--icon" data-role="ibo-quick-create--icon"
+           aria-label="{{ 'UI:Component:QuickCreate:Tooltip'|dict_s }}"
+           data-tooltip-content="{{ 'UI:Component:QuickCreate:Tooltip'|dict_s }}"
+		   data-tooltip-placement="bottom-start"
+           data-tooltip-distance-offset="25"
+        >
 			<span class="fas fa-plus"></span>
 		</a>
 		<select name="class" class="ibo-quick-create--input" data-role="ibo-quick-create--input">
--- a/templates/base/layouts/navigation-menu/layout.html.twig
+++ b/templates/base/layouts/navigation-menu/layout.html.twig
@@ -8,7 +8,8 @@
 				<img src="{{ oUIBlock.AppFullIconUrl }}" alt="{{ 'UI:Layout:NavigationMenu:CompanyLogo:AltText'|dict_s }}">
 			</a>
 			<a class="ibo-navigation-menu--toggler" data-role="ibo-navigation-menu--toggler"
-			   data-tooltip-content="{% if oUIBlock.HasSiloSelected() %}{{ 'UI:Layout:NavigationMenu:Toggler:TooltipWithSiloLabel'|dict_format(oUIBlock.GetSiloLabel()) }}{% else %}{{ 'UI:Layout:NavigationMenu:Toggler:Tooltip'|dict_s }}{% endif %}"
+               aria-label="{% if oUIBlock.HasSiloSelected() %}{{ 'UI:Layout:NavigationMenu:Toggler:TooltipWithSiloLabel'|dict_format(oUIBlock.GetSiloLabel()) }}{% else %}{{ 'UI:Layout:NavigationMenu:Toggler:Tooltip'|dict_s }}{% endif %}"
+               data-tooltip-content="{% if oUIBlock.HasSiloSelected() %}{{ 'UI:Layout:NavigationMenu:Toggler:TooltipWithSiloLabel'|dict_format(oUIBlock.GetSiloLabel()) }}{% else %}{{ 'UI:Layout:NavigationMenu:Toggler:Tooltip'|dict_s }}{% endif %}"
 			   data-tooltip-placement="right"
 			   data-tooltip-distance-offset="20"
 			   href="#">
@@ -102,7 +103,7 @@
            {% if oUIBlock.HasMenuFilterHint() %}
                <div class="ibo-navigation-menu--menu-filter-hint" data-role="ibo-navigation-menu--menu-filter-hint">
                    {{ 'UI:Layout:NavigationMenu:MenuFilter:Input:Hint'|dict_s }}
-                    <a class="ibo-navigation-menu--menu-filter-hint-close" data-role="ibo-navigation-menu--menu-filter-hint-close" href="#"><span class="fas fa-times"></span></a>
+                    <a class="ibo-navigation-menu--menu-filter-hint-close" data-role="ibo-navigation-menu--menu-filter-hint-close" aria-label="{{ 'UI:Button:Close'|dict_s }}" href="#"><span class="fas fa-times"></span></a>
                </div>
            {% endif %}
        </div>
--- a/templates/base/layouts/tab-container/layout.html.twig
+++ b/templates/base/layouts/tab-container/layout.html.twig
@@ -32,7 +32,10 @@
                        {% endblock %}
                    {% endfor %}
                    <li class="ibo-tab-container--extra-tabs-container ibo-tab-container--tab-header" data-role="ibo-tab-container--extra-tabs-container">
-                        <a href="#" class="ibo-tab-container--extra-tabs-list-toggler" data-role="ibo-tab-container--extra-tabs-list-toggler">
+                        <a href="#" class="ibo-tab-container--extra-tabs-list-toggler" data-role="ibo-tab-container--extra-tabs-list-toggler"
+                           aria-label="{{ 'UI:Layout:TabContainer:ExtraTabsListToggler:Label'|dict_s }}"
+                           data-tooltip-content="{{ 'UI:Layout:TabContainer:ExtraTabsListToggler:Label'|dict_s }}"
+                        >
                            <span class="fas fa-ellipsis-v"></span>
                        </a>
                        <div class="ibo-tab-container--extra-tabs-list ibo-is-hidden" data-role="ibo-tab-container--extra-tabs-list">