From 2ed653e3b93cd6dd40f68507203189ed8b04d851 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Tue, 25 Nov 2025 22:27:39 +0000
Subject: [PATCH] Use sr display classes for collection/wishlist filters and
 options

Makes them accessible while retaining the exact same behaviour
---
 .../live/collection_live/index.html.heex               | 10 +++++-----
 .../live/wishlist_live/index.html.heex                 |  8 ++++----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/lib/music_library_web/live/collection_live/index.html.heex b/lib/music_library_web/live/collection_live/index.html.heex
index fb7a2c7a..622b670a 100644
--- a/lib/music_library_web/live/collection_live/index.html.heex
+++ b/lib/music_library_web/live/collection_live/index.html.heex
@@ -39,7 +39,7 @@
             aria-hidden="true"
             data-slot="icon"
           />
-          <span class="hidden sm:inline">{gettext("Purchase")}</span>
+          <span class="sr-only sm:not-sr-only">{gettext("Purchase")}</span>
         </.button>
         <.button
           patch={order_path(@record_list_params, :alphabetical)}
@@ -49,7 +49,7 @@
           ]}
         >
           <.icon name="hero-user-solid" class="icon" aria-hidden="true" data-slot="icon" />
-          <span class="hidden sm:inline">{gettext("A->Z")}</span>
+          <span class="sr-only sm:not-sr-only">{gettext("A->Z")}</span>
         </.button>
         <.button
           patch={order_path(@record_list_params, :release)}
@@ -59,7 +59,7 @@
           ]}
         >
           <.icon name="hero-calendar-days" class="icon" aria-hidden="true" data-slot="icon" />
-          <span class="hidden sm:inline">{gettext("Release")}</span>
+          <span class="sr-only sm:not-sr-only">{gettext("Release")}</span>
         </.button>
       </.button_group>
 
@@ -78,7 +78,7 @@
             aria-hidden="true"
             data-slot="icon"
           />
-          <span class="hidden sm:inline">
+          <span class="sr-only sm:not-sr-only">
             {gettext("Grid")}
           </span>
         </.button>
@@ -91,7 +91,7 @@
           ]}
         >
           <.icon name="hero-list-bullet" class="icon" aria-hidden="true" data-slot="icon" />
-          <span class="hidden sm:inline">
+          <span class="sr-only sm:not-sr-only">
             {gettext("List")}
           </span>
         </.button>
diff --git a/lib/music_library_web/live/wishlist_live/index.html.heex b/lib/music_library_web/live/wishlist_live/index.html.heex
index 16613c63..878977ae 100644
--- a/lib/music_library_web/live/wishlist_live/index.html.heex
+++ b/lib/music_library_web/live/wishlist_live/index.html.heex
@@ -25,7 +25,7 @@
           ]}
         >
           <.icon name="hero-star" class="icon" aria-hidden="true" data-slot="icon" />
-          <span class="hidden sm:inline">{gettext("Insertion")}</span>
+          <span class="sr-only sm:not-sr-only">{gettext("Insertion")}</span>
         </.button>
         <.button
           patch={order_path(@record_list_params, :alphabetical)}
@@ -36,7 +36,7 @@
           ]}
         >
           <.icon name="hero-user-solid" class="icon" aria-hidden="true" data-slot="icon" />
-          <span class="hidden sm:inline">{gettext("A->Z")}</span>
+          <span class="sr-only sm:not-sr-only">{gettext("A->Z")}</span>
         </.button>
       </.button_group>
 
@@ -55,7 +55,7 @@
             aria-hidden="true"
             data-slot="icon"
           />
-          <span class="hidden sm:inline">
+          <span class="sr-only sm:not-sr-only">
             {gettext("Grid")}
           </span>
         </.button>
@@ -68,7 +68,7 @@
           ]}
         >
           <.icon name="hero-list-bullet" class="icon" aria-hidden="true" data-slot="icon" />
-          <span class="hidden sm:inline">
+          <span class="sr-only sm:not-sr-only">
             {gettext("List")}
           </span>
         </.button>