Use sr display classes for collection/wishlist filters and options

Makes them accessible while retaining the exact same behaviour
This commit is contained in:
Claudio Ortolina
2025-11-25 22:27:39 +00:00
parent 80763b8192
commit 2ed653e3b9
2 changed files with 9 additions and 9 deletions
@@ -39,7 +39,7 @@
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
<span class="hidden sm:inline">{gettext("Purchase")}</span> <span class="sr-only sm:not-sr-only">{gettext("Purchase")}</span>
</.button> </.button>
<.button <.button
patch={order_path(@record_list_params, :alphabetical)} patch={order_path(@record_list_params, :alphabetical)}
@@ -49,7 +49,7 @@
]} ]}
> >
<.icon name="hero-user-solid" class="icon" aria-hidden="true" data-slot="icon" /> <.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>
<.button <.button
patch={order_path(@record_list_params, :release)} patch={order_path(@record_list_params, :release)}
@@ -59,7 +59,7 @@
]} ]}
> >
<.icon name="hero-calendar-days" class="icon" aria-hidden="true" data-slot="icon" /> <.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>
</.button_group> </.button_group>
@@ -78,7 +78,7 @@
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
<span class="hidden sm:inline"> <span class="sr-only sm:not-sr-only">
{gettext("Grid")} {gettext("Grid")}
</span> </span>
</.button> </.button>
@@ -91,7 +91,7 @@
]} ]}
> >
<.icon name="hero-list-bullet" class="icon" aria-hidden="true" data-slot="icon" /> <.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")} {gettext("List")}
</span> </span>
</.button> </.button>
@@ -25,7 +25,7 @@
]} ]}
> >
<.icon name="hero-star" class="icon" aria-hidden="true" data-slot="icon" /> <.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>
<.button <.button
patch={order_path(@record_list_params, :alphabetical)} patch={order_path(@record_list_params, :alphabetical)}
@@ -36,7 +36,7 @@
]} ]}
> >
<.icon name="hero-user-solid" class="icon" aria-hidden="true" data-slot="icon" /> <.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>
</.button_group> </.button_group>
@@ -55,7 +55,7 @@
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
<span class="hidden sm:inline"> <span class="sr-only sm:not-sr-only">
{gettext("Grid")} {gettext("Grid")}
</span> </span>
</.button> </.button>
@@ -68,7 +68,7 @@
]} ]}
> >
<.icon name="hero-list-bullet" class="icon" aria-hidden="true" data-slot="icon" /> <.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")} {gettext("List")}
</span> </span>
</.button> </.button>