From 4721076dd970858830fee9a53fe9f915c34ca8ab Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Tue, 1 Apr 2025 07:18:49 +0200
Subject: [PATCH] refactor: enhance button accessibility and simplify rendering
 logic in CompactModeButton and UnreadFilterButton components; adjust layout
 in PageSizeSelect component

---
 src/components/common/CompactModeButton.tsx  | 16 +++++-----------
 src/components/common/PageSizeSelect.tsx     |  4 ++--
 src/components/common/UnreadFilterButton.tsx |  5 ++++-
 3 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/components/common/CompactModeButton.tsx b/src/components/common/CompactModeButton.tsx
index 2068454..0212743 100644
--- a/src/components/common/CompactModeButton.tsx
+++ b/src/components/common/CompactModeButton.tsx
@@ -20,18 +20,12 @@ export function CompactModeButton({ onToggle }: CompactModeButtonProps) {
     <button
       onClick={handleClick}
       className="inline-flex items-center gap-2 px-2 py-1.5 text-sm font-medium rounded-lg hover:bg-accent hover:text-accent-foreground whitespace-nowrap"
+      title={isCompact ? t("series.filters.normal") : t("series.filters.compact")}
     >
-      {isCompact ? (
-        <>
-          <LayoutTemplate className="h-4 w-4" />
-          {t("series.filters.normal")}
-        </>
-      ) : (
-        <>
-          <LayoutGrid className="h-4 w-4" />
-          {t("series.filters.compact")}
-        </>
-      )}
+      {isCompact ? <LayoutTemplate className="h-4 w-4" /> : <LayoutGrid className="h-4 w-4" />}
+      <span className="hidden sm:inline">
+        {isCompact ? t("series.filters.normal") : t("series.filters.compact")}
+      </span>
     </button>
   );
 }
diff --git a/src/components/common/PageSizeSelect.tsx b/src/components/common/PageSizeSelect.tsx
index e45fe93..f16262c 100644
--- a/src/components/common/PageSizeSelect.tsx
+++ b/src/components/common/PageSizeSelect.tsx
@@ -24,8 +24,8 @@ export function PageSizeSelect({ onSizeChange }: PageSizeSelectProps) {
   return (
     <Select value={itemsPerPage.toString()} onValueChange={handleChange}>
       <SelectTrigger className="w-[80px]">
-        <LayoutList className="h-4 w-4 mr-2" />
-        <SelectValue />
+        <LayoutList className="h-4 w-4" />
+        <SelectValue className="ml-2" />
       </SelectTrigger>
       <SelectContent>
         <SelectItem value="20">20</SelectItem>
diff --git a/src/components/common/UnreadFilterButton.tsx b/src/components/common/UnreadFilterButton.tsx
index 0e2e7d6..7cfe2dd 100644
--- a/src/components/common/UnreadFilterButton.tsx
+++ b/src/components/common/UnreadFilterButton.tsx
@@ -13,9 +13,12 @@ export function UnreadFilterButton({ showOnlyUnread, onToggle }: UnreadFilterBut
     <button
       onClick={onToggle}
       className="inline-flex items-center gap-2 px-2 py-1.5 text-sm font-medium rounded-lg hover:bg-accent hover:text-accent-foreground whitespace-nowrap"
+      title={showOnlyUnread ? t("series.filters.showAll") : t("series.filters.unread")}
     >
       <Filter className="h-4 w-4" />
-      {showOnlyUnread ? t("series.filters.showAll") : t("series.filters.unread")}
+      <span className="hidden sm:inline">
+        {showOnlyUnread ? t("series.filters.showAll") : t("series.filters.unread")}
+      </span>
     </button>
   );
 }