composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-24 11:08:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

Accessibility: Add missing aria-label to some UIBlock

Browse Source 
- Button
- Global search
- Quick create
- Navigation menu
- Tab container
This commit is contained in:
Molkobain
2021-06-12 18:11:55 +02:00
parent 485262ec0a
commit b965138d57
23 changed files with 73 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
templates/base/components/button/buttonjs.html.twig
View File

@@ -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>

14
templates/base/components/button/buttonurl.html.twig
View File

@@ -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>

15
templates/base/components/button/layout.html.twig
View File

@@ -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>

7
templates/base/components/global-search/layout.html.twig
View File

@@ -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">

8
templates/base/components/quick-create/layout.html.twig
View File

@@ -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">