Use tabindex instead of button element to make pride buttons focusable

This commit is contained in:
Helen Chong 2024-07-08 10:16:23 +08:00
parent 1d9d54bed5
commit 7d088e4728
1 changed files with 1 additions and 3 deletions

View File

@ -76,9 +76,7 @@ eleventyComputed:
<div class="flag-progress-intersex-lesbian" role="img" aria-label="Custom pride flag which combines the lesbian pride flag and the progress pride flag triangle" style="height: 20rem; margin-bottom: 1em;"></div>
{%- macro prideButton(file, alt, tooltip=alt, width=88, height=31) -%}
<li data-tooltip>
<button data-tooltip-trigger title="{{ tooltip }}" style="cursor: unset; padding: 0; margin: 0; border: 0;">
<img src="/assets/buttons/pride/{{ file }}.png" alt="{{ alt }}" width="{{ width }}" height="{{ height }}" loading="lazy">
</button>
<img src="/assets/buttons/pride/{{ file }}.png" alt="{{ alt }}" data-tooltip-trigger title="{{ tooltip }}" width="{{ width }}" height="{{ height }}" loading="lazy" tabindex="0">
</li>
{%- endmacro -%}
<ul class="web-btn-wrapper">