From 180400b2b8089c43058e2945635d61a8edc788ba 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.
---
 .../components/solidus_admin/base_component.rb   |  2 +-
 .../ui/table/pagination/component.html.erb       | 16 ++++++++--------
 .../ui/table/pagination/component.yml            |  3 +++
 3 files changed, 12 insertions(+), 9 deletions(-)
 create mode 100644 admin/app/components/solidus_admin/ui/table/pagination/component.yml

diff --git a/admin/app/components/solidus_admin/base_component.rb b/admin/app/components/solidus_admin/base_component.rb
index 1e0695bda57..612c833c860 100644
--- a/admin/app/components/solidus_admin/base_component.rb
+++ b/admin/app/components/solidus_admin/base_component.rb
@@ -14,7 +14,7 @@ class BaseComponent < ViewComponent::Base
     def icon_tag(name, **attrs)
       href = image_path("solidus_admin/remixicon.symbol.svg") + "#ri-#{name}"
       tag.svg(
-        class: attrs[:class],
+        **attrs
       ) do
         tag.use(
           "xlink:href": href
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