From 3652a68500255b974bce0fb1008ca7da014f168b Mon Sep 17 00:00:00 2001
From: Eric Silva <eric@ericsilva.me>
Date: Tue, 5 Aug 2025 04:10:00 -0500
Subject: [PATCH] Improve accessibility of page feedback links by using
 semantic list and ARIA label (#40255)

Co-authored-by: Darren Griffin <darren.griffin@live.co.uk>
---
 sass/homeassistant/_overrides.scss |  9 +++++++++
 source/_includes/feedback.html     | 27 +++++++++++++++++----------
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/sass/homeassistant/_overrides.scss b/sass/homeassistant/_overrides.scss
index dabc80f663d..9b080ca0355 100644
--- a/sass/homeassistant/_overrides.scss
+++ b/sass/homeassistant/_overrides.scss
@@ -574,6 +574,15 @@ a.material-card:hover {
     font-weight: 400;
     text-transform: none;
   }
+
+  .links ul {
+    list-style: none;
+    margin: 0;
+}
+
+  .links li {
+    display: inline;
+}
 }
 
 .installation-survey {
diff --git a/source/_includes/feedback.html b/source/_includes/feedback.html
index 6014e030f85..a9eb3aee408 100644
--- a/source/_includes/feedback.html
+++ b/source/_includes/feedback.html
@@ -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>
   Suggest an edit to this page, or provide/view feedback for this page.
   <div class="links">
-    <a
+    <ul aria-label="Page feedback options">
+    <li><a
       href="{{ site.netlify.repository_url }}/tree/{{ site.netlify.head }}/source/{{ page.path }}"
       target="_blank"
+      title="Edit this page"
       ><iconify-icon inline icon="mdi:edit" /> Edit</a
-    >
+    ></li>
     {% 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 }}.{{
         site.current_minor_version }}.{{ site.current_patch_version }}&labels={{ site.netlify.branch }},integration%3A%20{{ page.ha_domain }}"
       target="_blank"
+      title="Provide feedback on this page"
       ><iconify-icon inline icon="mdi:comment-edit-outline" /> Provide feedback</a
-    >
-    <a
+    ></li>
+    <li><a
       href="{{ site.netlify.repository_url }}/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22integration%3A+{{ page.ha_domain }}%22"
       target="_blank"
+      title="View pending feedback for this page"
       ><iconify-icon inline icon="mdi:comment-text-multiple-outline" /> View pending feedback</a
-    >
+    ></li>
     {% 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 }}.{{
         site.current_minor_version }}.{{ site.current_patch_version }}&labels={{ site.netlify.branch }}"
       target="_blank"
+      title="Provide feedback on this page"
       ><iconify-icon inline icon="mdi:comment-edit-outline" /> Provide feedback</a
-    >
-    <a
+    ></li>
+    <li><a
       href="{{ site.netlify.repository_url }}/issues?utf8=%E2%9C%93&q=%22{{ page.url | url_encode }}%22&in=body"
       target="_blank"
+      title="View given feedback for this page"
       ><iconify-icon inline icon="mdi:comment-text-multiple-outline" /> View given feedback</a
-    >
+    ></li>
     {% endif %}
+  </ul>
   </div>
 </div>
 {% endunless %}