From d1790bfeeee0d6f8b522cbef9f94068cc808663b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc=20Busqu=C3=A9?= <marc@lamarciana.com>
Date: Fri, 21 Jul 2023 13:03:21 +0200
Subject: [PATCH] Make admin pagination accessible

We label the pagination icon wrappers with "aria-label", while hiding
the icon itself to screen readers. We also mark as "aria-disable"'d when
the first/last page is reached.
---
 .../ui/table/pagination/component.html.erb       | 16 ++++++++--------
 .../ui/table/pagination/component.yml            |  3 +++
 2 files changed, 11 insertions(+), 8 deletions(-)
 create mode 100644 admin/app/components/solidus_admin/ui/table/pagination/component.yml

diff --git a/admin/app/components/solidus_admin/ui/table/pagination/component.html.erb b/admin/app/components/solidus_admin/ui/table/pagination/component.html.erb
index d5fad852a04..67feede010b 100644
--- a/admin/app/components/solidus_admin/ui/table/pagination/component.html.erb
+++ b/admin/app/components/solidus_admin/ui/table/pagination/component.html.erb
@@ -3,24 +3,24 @@
     <ul class="flex items-center">
       <li>
         <% if @page.first? %>
-          <span class="<%= link_classes(rounded: :left) %>">
-            <%= icon_tag("arrow-left-s-line", class: "fill-current text-grey-400 w-5 h-5") %>
+          <span class="<%= link_classes(rounded: :left) %>", "aria-label"=<%= t(".prev") %>, "aria-disabled"=true>
+            <%= icon_tag("arrow-left-s-line", class: "fill-current text-grey-400 w-5 h-5", "aria-hidden" => true) %>
           </span>
         <% else %>
-          <%= link_to @path.call(@page.number - 1), class: link_classes(rounded: :left) do %>
-            <%= icon_tag("arrow-left-s-line", class: "w-5 h-5") %>
+          <%= link_to @path.call(@page.number - 1), class: link_classes(rounded: :left), "aria-label" => t(".prev") do %>
+            <%= icon_tag("arrow-left-s-line", class: "w-5 h-5", "aria-hidden" => true) %>
           <% end %>
         <% end %>
       </li>
 
       <li>
         <% if @page.last? %>
-          <span class="<%= link_classes(rounded: :right) %>">
-            <%= icon_tag("arrow-right-s-line", class: "fill-current text-grey-400 w-5 h-5") %>
+          <span class="<%= link_classes(rounded: :right) %>", "aria-label"=<%= t(".next") %>, "aria-disabled"=true>
+            <%= icon_tag("arrow-right-s-line", class: "fill-current text-grey-400 w-5 h-5", "aria-hidden" => true) %>
           </span>
         <% else %>
-          <%= link_to @path.call(@page.next_param), class: link_classes(rounded: :right) do %>
-            <%= icon_tag("arrow-right-s-line", class: "w-5 h-5") %>
+          <%= link_to @path.call(@page.next_param), class: link_classes(rounded: :right), "aria-label" => t(".next") do %>
+            <%= icon_tag("arrow-right-s-line", class: "w-5 h-5", "aria-hidden" => true) %>
           <% end %>
         <% end %>
       </li>
diff --git a/admin/app/components/solidus_admin/ui/table/pagination/component.yml b/admin/app/components/solidus_admin/ui/table/pagination/component.yml
new file mode 100644
index 00000000000..5c1302b2527
--- /dev/null
+++ b/admin/app/components/solidus_admin/ui/table/pagination/component.yml
@@ -0,0 +1,3 @@
+en:
+  next: Next
+  prev: Previous