Files
iTop/templates/base/components/button/buttonjs.html.twig
Molkobain b965138d57 Accessibility: Add missing aria-label to some UIBlock
- Button
- Global search
- Quick create
- Navigation menu
- Tab container
2021-06-12 18:35:55 +02:00

30 lines
1.5 KiB
Twig

{% 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 %}"
{% if oUIBlock.GetDataAttributes() %}
{% for sName, sValue in oUIBlock.GetDataAttributes() %}
data-{{ sName }}="{{ sValue }}"
{% endfor %}
{% endif %}
type="{{ oUIBlock.GetType() }}"
name="{{ oUIBlock.GetName() }}"
value="{{ oUIBlock.GetValue() }}"
{% if oUIBlock.IsDisabled() %} disabled {% 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>
{% endif %}
{% if oUIBlock.GetLabel() is not empty %}
<span class="ibo-button--label">{{ oUIBlock.GetLabel() }}</span>
{% endif %}
</button>