Improve accessibility of page feedback links by using semantic list and ARIA label (#40255)

Co-authored-by: Darren Griffin <darren.griffin@live.co.uk>
This commit is contained in:
Eric Silva 2025-08-05 04:10:00 -05:00 committed by GitHub
parent 48360fb776
commit 3652a68500
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 26 additions and 10 deletions

View File

@ -574,6 +574,15 @@ a.material-card:hover {
font-weight: 400; font-weight: 400;
text-transform: none; text-transform: none;
} }
.links ul {
list-style: none;
margin: 0;
}
.links li {
display: inline;
}
} }
.installation-survey { .installation-survey {

View File

@ -3,36 +3,43 @@
<h4>{% icon "mdi:feedback" %} <b> Help us improve our documentation</b><a href="#feedback_section" class="title-link" name="feedback_section"></a></h4> <h4>{% icon "mdi:feedback" %} <b> Help us improve our documentation</b><a href="#feedback_section" class="title-link" name="feedback_section"></a></h4>
Suggest an edit to this page, or provide/view feedback for this page. Suggest an edit to this page, or provide/view feedback for this page.
<div class="links"> <div class="links">
<a <ul aria-label="Page feedback options">
<li><a
href="{{ site.netlify.repository_url }}/tree/{{ site.netlify.head }}/source/{{ page.path }}" href="{{ site.netlify.repository_url }}/tree/{{ site.netlify.head }}/source/{{ page.path }}"
target="_blank" target="_blank"
title="Edit this page"
><iconify-icon inline icon="mdi:edit" /> Edit</a ><iconify-icon inline icon="mdi:edit" /> Edit</a
> ></li>
{% if page.ha_domain %} {% if page.ha_domain %}
<a <li><a
href="{{ site.netlify.repository_url }}/issues/new?template=feedback.yml&url={{ site.netlify.url | url_encode }}{{ page.url | url_encode }}&version={{ site.current_major_version }}.{{ href="{{ site.netlify.repository_url }}/issues/new?template=feedback.yml&url={{ site.netlify.url | url_encode }}{{ page.url | url_encode }}&version={{ site.current_major_version }}.{{
site.current_minor_version }}.{{ site.current_patch_version }}&labels={{ site.netlify.branch }},integration%3A%20{{ page.ha_domain }}" site.current_minor_version }}.{{ site.current_patch_version }}&labels={{ site.netlify.branch }},integration%3A%20{{ page.ha_domain }}"
target="_blank" target="_blank"
title="Provide feedback on this page"
><iconify-icon inline icon="mdi:comment-edit-outline" /> Provide feedback</a ><iconify-icon inline icon="mdi:comment-edit-outline" /> Provide feedback</a
> ></li>
<a <li><a
href="{{ site.netlify.repository_url }}/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22integration%3A+{{ page.ha_domain }}%22" href="{{ site.netlify.repository_url }}/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22integration%3A+{{ page.ha_domain }}%22"
target="_blank" target="_blank"
title="View pending feedback for this page"
><iconify-icon inline icon="mdi:comment-text-multiple-outline" /> View pending feedback</a ><iconify-icon inline icon="mdi:comment-text-multiple-outline" /> View pending feedback</a
> ></li>
{% else %} {% else %}
<a <li><a
href="{{ site.netlify.repository_url }}/issues/new?template=feedback.yml&url={{ site.netlify.url | url_encode }}{{ page.url | url_encode }}&version={{ site.current_major_version }}.{{ href="{{ site.netlify.repository_url }}/issues/new?template=feedback.yml&url={{ site.netlify.url | url_encode }}{{ page.url | url_encode }}&version={{ site.current_major_version }}.{{
site.current_minor_version }}.{{ site.current_patch_version }}&labels={{ site.netlify.branch }}" site.current_minor_version }}.{{ site.current_patch_version }}&labels={{ site.netlify.branch }}"
target="_blank" target="_blank"
title="Provide feedback on this page"
><iconify-icon inline icon="mdi:comment-edit-outline" /> Provide feedback</a ><iconify-icon inline icon="mdi:comment-edit-outline" /> Provide feedback</a
> ></li>
<a <li><a
href="{{ site.netlify.repository_url }}/issues?utf8=%E2%9C%93&q=%22{{ page.url | url_encode }}%22&in=body" href="{{ site.netlify.repository_url }}/issues?utf8=%E2%9C%93&q=%22{{ page.url | url_encode }}%22&in=body"
target="_blank" target="_blank"
title="View given feedback for this page"
><iconify-icon inline icon="mdi:comment-text-multiple-outline" /> View given feedback</a ><iconify-icon inline icon="mdi:comment-text-multiple-outline" /> View given feedback</a
> ></li>
{% endif %} {% endif %}
</ul>
</div> </div>
</div> </div>
{% endunless %} {% endunless %}