Use sr display classes for collection/wishlist filters and options
Makes them accessible while retaining the exact same behaviour
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user