Accessibility: Add missing aria-label to some UIBlock

- 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

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>