From ab7625a3148ba4e39dceaa506fe604c715f12458 Mon Sep 17 00:00:00 2001 From: cj-do-gta-sander Date: Thu, 24 Oct 2024 09:03:48 -0300 Subject: [PATCH 01/19] feat: add aria-label strings to locales for achievements page --- src/locales/en/translation.json | 3 +++ src/locales/pt-BR/translation.json | 5 ++++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 01cfcdf81..ceed90e8a 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -372,5 +372,8 @@ "premium_support": "Premium Support", "show_and_compare_achievements": "Show and compare your achievements to other users", "animated_profile_banner": "Animated profile banner" + }, + "aria-labels": { + "achievement_summary": "{{displayName}} achievements for {{gameTitle}}, {{achievementCount}} unlocked of {{totalAchievementCount}}, {{percentage}} completed" } } diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json index 694a805df..7bfdf2887 100644 --- a/src/locales/pt-BR/translation.json +++ b/src/locales/pt-BR/translation.json @@ -370,5 +370,8 @@ "show_and_compare_achievements": "Exiba e compare suas conquistas com outros usuários", "animated_profile_banner": "Banner animado no perfil", "cloud_saving": "Saves de jogos em nuvem" + }, + "aria-labels": { + "achievement_summary": "Conquistas de {{displayName}} em {{gameTitle}}, {{achievementCount}} desbloqueadas de {{totalAchievementCount}}, {{percentage}} concluídas" } -} +} \ No newline at end of file From 3b02a3c43fa264540d3937de5241fdd0943b3b54 Mon Sep 17 00:00:00 2001 From: cj-do-gta-sander Date: Thu, 24 Oct 2024 09:27:39 -0300 Subject: [PATCH 02/19] chore: move aria-labels strings to their respective pages in locales --- src/locales/en/translation.json | 6 ++---- src/locales/pt-BR/translation.json | 8 +++----- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index ceed90e8a..b53558f93 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -361,7 +361,8 @@ "your_achievements": "Your Achievements", "unlocked_at": "Unlocked at:", "subscription_needed": "A Hydra Cloud subscription is required to see this content", - "new_achievements_unlocked": "Unlocked {{achievementCount}} new achievements from {{gameCount}} games" + "new_achievements_unlocked": "Unlocked {{achievementCount}} new achievements from {{gameCount}} games", + "achievement_summary": "{{displayName}} achievements for {{gameTitle}}, {{achievementCount}} unlocked of {{totalAchievementCount}}, {{percentage}} completed" }, "tour": { "subscription_tour_title": "Hydra Cloud Subscription", @@ -372,8 +373,5 @@ "premium_support": "Premium Support", "show_and_compare_achievements": "Show and compare your achievements to other users", "animated_profile_banner": "Animated profile banner" - }, - "aria-labels": { - "achievement_summary": "{{displayName}} achievements for {{gameTitle}}, {{achievementCount}} unlocked of {{totalAchievementCount}}, {{percentage}} completed" } } diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json index 7bfdf2887..a6de5937f 100644 --- a/src/locales/pt-BR/translation.json +++ b/src/locales/pt-BR/translation.json @@ -359,7 +359,8 @@ "user_achievements": "Conquistas de {{displayName}}", "unlocked_at": "Desbloqueado em:", "subscription_needed": "Você precisa de uma assinatura Hydra Cloud para visualizar este conteúdo", - "new_achievements_unlocked": "{{achievementCount}} novas conquistas de {{gameCount}} jogos" + "new_achievements_unlocked": "{{achievementCount}} novas conquistas de {{gameCount}} jogos", + "achievement_summary": "Conquistas de {{displayName}} em {{gameTitle}}, {{achievementCount}} desbloqueadas de {{totalAchievementCount}}, {{percentage}} concluídas" }, "tour": { "subscription_tour_title": "Assinatura Hydra Cloud", @@ -370,8 +371,5 @@ "show_and_compare_achievements": "Exiba e compare suas conquistas com outros usuários", "animated_profile_banner": "Banner animado no perfil", "cloud_saving": "Saves de jogos em nuvem" - }, - "aria-labels": { - "achievement_summary": "Conquistas de {{displayName}} em {{gameTitle}}, {{achievementCount}} desbloqueadas de {{totalAchievementCount}}, {{percentage}} concluídas" } -} \ No newline at end of file +} From c5d4db0a1e30648e1f34c13ca13ec119006573e4 Mon Sep 17 00:00:00 2001 From: cj-do-gta-sander Date: Thu, 24 Oct 2024 09:37:51 -0300 Subject: [PATCH 03/19] chore: change locale param names to match with args --- src/locales/en/translation.json | 5 +++-- src/locales/pt-BR/translation.json | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index b53558f93..3fb097879 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -362,7 +362,8 @@ "unlocked_at": "Unlocked at:", "subscription_needed": "A Hydra Cloud subscription is required to see this content", "new_achievements_unlocked": "Unlocked {{achievementCount}} new achievements from {{gameCount}} games", - "achievement_summary": "{{displayName}} achievements for {{gameTitle}}, {{achievementCount}} unlocked of {{totalAchievementCount}}, {{percentage}} completed" + "aria_achievement_summary": "{{userDisplayName}} achievements for {{gameTitle}}, {{userAchievementCount}} unlocked of {{userTotalAchievementCount}}, {{percentage}} completed", + "aria_achievement": "Achievement {{achievementStatus}}, {{achievementDisplayName}}, {{achievementDescription}}" }, "tour": { "subscription_tour_title": "Hydra Cloud Subscription", @@ -374,4 +375,4 @@ "show_and_compare_achievements": "Show and compare your achievements to other users", "animated_profile_banner": "Animated profile banner" } -} +} \ No newline at end of file diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json index a6de5937f..680a026f9 100644 --- a/src/locales/pt-BR/translation.json +++ b/src/locales/pt-BR/translation.json @@ -360,7 +360,7 @@ "unlocked_at": "Desbloqueado em:", "subscription_needed": "Você precisa de uma assinatura Hydra Cloud para visualizar este conteúdo", "new_achievements_unlocked": "{{achievementCount}} novas conquistas de {{gameCount}} jogos", - "achievement_summary": "Conquistas de {{displayName}} em {{gameTitle}}, {{achievementCount}} desbloqueadas de {{totalAchievementCount}}, {{percentage}} concluídas" + "achievement_summary": "Conquistas de {{userDisplayName}} em {{gameTitle}}, {{userAchievementCount}} desbloqueadas de {{userTotalAchievementCount}}, {{percentage}} concluídas" }, "tour": { "subscription_tour_title": "Assinatura Hydra Cloud", From e9f68977fe31329700056cca3263b1433ec71c2c Mon Sep 17 00:00:00 2001 From: cj-do-gta-sander Date: Thu, 24 Oct 2024 09:39:15 -0300 Subject: [PATCH 04/19] feat: add aria label to achievement summary --- src/locales/en/translation.json | 2 +- .../achievements/achievements-content.tsx | 21 ++++++++++++++++++- 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 3fb097879..361cda6b2 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -375,4 +375,4 @@ "show_and_compare_achievements": "Show and compare your achievements to other users", "animated_profile_banner": "Animated profile banner" } -} \ No newline at end of file +} diff --git a/src/renderer/src/pages/achievements/achievements-content.tsx b/src/renderer/src/pages/achievements/achievements-content.tsx index 72dfe83f1..2c21c111a 100644 --- a/src/renderer/src/pages/achievements/achievements-content.tsx +++ b/src/renderer/src/pages/achievements/achievements-content.tsx @@ -16,6 +16,7 @@ import { average } from "color.js"; import Color from "color"; import { Link } from "@renderer/components"; import { ComparedAchievementList } from "./compared-achievement-list"; +import { TFunction } from "i18next/typescript/t"; interface UserInfo { id: string; @@ -39,10 +40,26 @@ interface AchievementSummaryProps { isComparison?: boolean; } +const ariaLabelSummary = ( + t: TFunction, + gameTitle: string, + user: UserInfo +): string => { + return t("aria_achievement_summary", { + userDisplayName: user.displayName, + gameTitle: gameTitle, + userAchievementCount: user.unlockedAchievementCount, + userTotalAchievementCount: user.totalAchievementCount, + percentage: formatDownloadProgress( + user.unlockedAchievementCount / user.totalAchievementCount + ), + }); +}; + function AchievementSummary({ user, isComparison }: AchievementSummaryProps) { const { t } = useTranslation("achievement"); const { userDetails, hasActiveSubscription } = useUserDetails(); - const { handleClickOpenCheckout } = useContext(gameDetailsContext); + const { handleClickOpenCheckout, gameTitle } = useContext(gameDetailsContext); const getProfileImage = ( user: Pick @@ -124,6 +141,8 @@ function AchievementSummary({ user, isComparison }: AchievementSummaryProps) { alignItems: "center", padding: `${SPACING_UNIT}px`, }} + role="region" + aria-label={ariaLabelSummary(t, gameTitle, user)} > {getProfileImage(user)}
Date: Thu, 24 Oct 2024 09:55:22 -0300 Subject: [PATCH 05/19] chore: chore: remove unnecessary locale string and use locked status strings --- src/locales/en/translation.json | 4 ++-- src/locales/pt-BR/translation.json | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 361cda6b2..9e39e2fd7 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -357,13 +357,13 @@ }, "achievement": { "achievement_unlocked": "Achievement unlocked", + "achievement_locked": "Achievement locked", "user_achievements": "{{displayName}}'s Achievements", "your_achievements": "Your Achievements", "unlocked_at": "Unlocked at:", "subscription_needed": "A Hydra Cloud subscription is required to see this content", "new_achievements_unlocked": "Unlocked {{achievementCount}} new achievements from {{gameCount}} games", - "aria_achievement_summary": "{{userDisplayName}} achievements for {{gameTitle}}, {{userAchievementCount}} unlocked of {{userTotalAchievementCount}}, {{percentage}} completed", - "aria_achievement": "Achievement {{achievementStatus}}, {{achievementDisplayName}}, {{achievementDescription}}" + "aria_achievement_summary": "{{userDisplayName}} achievements for {{gameTitle}}, {{userAchievementCount}} unlocked of {{userTotalAchievementCount}}, {{percentage}} completed" }, "tour": { "subscription_tour_title": "Hydra Cloud Subscription", diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json index 680a026f9..9ea86fe97 100644 --- a/src/locales/pt-BR/translation.json +++ b/src/locales/pt-BR/translation.json @@ -355,12 +355,13 @@ }, "achievement": { "achievement_unlocked": "Conquista desbloqueada", + "achievement_locked": "Conquista bloqueada", "your_achievements": "Suas Conquistas", "user_achievements": "Conquistas de {{displayName}}", "unlocked_at": "Desbloqueado em:", "subscription_needed": "Você precisa de uma assinatura Hydra Cloud para visualizar este conteúdo", "new_achievements_unlocked": "{{achievementCount}} novas conquistas de {{gameCount}} jogos", - "achievement_summary": "Conquistas de {{userDisplayName}} em {{gameTitle}}, {{userAchievementCount}} desbloqueadas de {{userTotalAchievementCount}}, {{percentage}} concluídas" + "aria_achievement_summary": "Conquistas de {{userDisplayName}} em {{gameTitle}}, {{userAchievementCount}} desbloqueadas de {{userTotalAchievementCount}}, {{percentage}} concluídas" }, "tour": { "subscription_tour_title": "Assinatura Hydra Cloud", From 50303251a2cf61dd4e356e846478c17e6274dd66 Mon Sep 17 00:00:00 2001 From: cj-do-gta-sander Date: Thu, 24 Oct 2024 09:57:11 -0300 Subject: [PATCH 06/19] feat: add semantic roles and aria labels to achievement list --- .../achievements/achievements-content.tsx | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/src/renderer/src/pages/achievements/achievements-content.tsx b/src/renderer/src/pages/achievements/achievements-content.tsx index 2c21c111a..2b4f38a0a 100644 --- a/src/renderer/src/pages/achievements/achievements-content.tsx +++ b/src/renderer/src/pages/achievements/achievements-content.tsx @@ -56,6 +56,15 @@ const ariaLabelSummary = ( }); }; +const ariaLabelAchievement = ( + t: TFunction, + achievement: UserAchievement +): string => { + return `${ + achievement.unlocked ? t("achievement_unlocked") : t("achievement_locked") + }, ${achievement.displayName}, ${achievement.description}`; +}; + function AchievementSummary({ user, isComparison }: AchievementSummaryProps) { const { t } = useTranslation("achievement"); const { userDetails, hasActiveSubscription } = useUserDetails(); @@ -195,9 +204,15 @@ function AchievementList({ achievements }: AchievementListProps) { const { formatDateTime } = useDate(); return ( -
    +
      {achievements.map((achievement, index) => ( -
    • +
    • Date: Thu, 24 Oct 2024 10:04:34 -0300 Subject: [PATCH 07/19] chore: remove redundancy in list semantic markup --- src/renderer/src/pages/achievements/achievements-content.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/renderer/src/pages/achievements/achievements-content.tsx b/src/renderer/src/pages/achievements/achievements-content.tsx index 2b4f38a0a..ffc60a7d0 100644 --- a/src/renderer/src/pages/achievements/achievements-content.tsx +++ b/src/renderer/src/pages/achievements/achievements-content.tsx @@ -204,13 +204,12 @@ function AchievementList({ achievements }: AchievementListProps) { const { formatDateTime } = useDate(); return ( -
        +
          {achievements.map((achievement, index) => (
        • Date: Thu, 24 Oct 2024 10:49:01 -0300 Subject: [PATCH 08/19] chore: remove redundancy in "View Profile" and "Game" button for screen readers --- src/locales/en/translation.json | 3 ++- src/locales/pt-BR/translation.json | 3 ++- src/renderer/src/components/sidebar/sidebar-profile.tsx | 1 + src/renderer/src/components/sidebar/sidebar.tsx | 1 + 4 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 9e39e2fd7..73ccacec7 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -25,7 +25,8 @@ "queued": "{{title}} (Queued)", "game_has_no_executable": "Game has no executable selected", "sign_in": "Sign in", - "friends": "Friends" + "friends": "Friends", + "aria_view_profile": "View profile" }, "header": { "search": "Search games", diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json index 9ea86fe97..a2a3a9acf 100644 --- a/src/locales/pt-BR/translation.json +++ b/src/locales/pt-BR/translation.json @@ -25,7 +25,8 @@ "queued": "{{title}} (Na fila)", "game_has_no_executable": "Jogo não possui executável selecionado", "sign_in": "Login", - "friends": "Amigos" + "friends": "Amigos", + "aria_view_profile": "Ver perfil" }, "header": { "search": "Buscar jogos", diff --git a/src/renderer/src/components/sidebar/sidebar-profile.tsx b/src/renderer/src/components/sidebar/sidebar-profile.tsx index 49e56ab78..af8da63c2 100644 --- a/src/renderer/src/components/sidebar/sidebar-profile.tsx +++ b/src/renderer/src/components/sidebar/sidebar-profile.tsx @@ -89,6 +89,7 @@ export function SidebarProfile() { type="button" className={styles.profileButton} onClick={handleProfileClick} + aria-label={t("aria_view_profile")} >
          handleSidebarGameClick(event, game)} + aria-label={game.title} > {game.iconUrl ? ( Date: Thu, 24 Oct 2024 10:58:00 -0300 Subject: [PATCH 09/19] feat: add tooltip and screen reader support to back button in header --- src/locales/en/translation.json | 3 ++- src/locales/pt-BR/translation.json | 3 ++- src/renderer/src/components/header/header.tsx | 1 + 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 73ccacec7..f73309536 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -36,7 +36,8 @@ "search_results": "Search results", "settings": "Settings", "version_available_install": "Version {{version}} available. Click here to restart and install.", - "version_available_download": "Version {{version}} available. Click here to download." + "version_available_download": "Version {{version}} available. Click here to download.", + "back": "Back" }, "bottom_panel": { "no_downloads_in_progress": "No downloads in progress", diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json index a2a3a9acf..4c78c3b68 100644 --- a/src/locales/pt-BR/translation.json +++ b/src/locales/pt-BR/translation.json @@ -36,7 +36,8 @@ "settings": "Ajustes", "home": "Início", "version_available_install": "Versão {{version}} disponível. Clique aqui para reiniciar e instalar.", - "version_available_download": "Versão {{version}} disponível. Clique aqui para fazer o download." + "version_available_download": "Versão {{version}} disponível. Clique aqui para fazer o download.", + "back": "Voltar" }, "bottom_panel": { "no_downloads_in_progress": "Sem downloads em andamento", diff --git a/src/renderer/src/components/header/header.tsx b/src/renderer/src/components/header/header.tsx index e0721df43..6afef0a09 100644 --- a/src/renderer/src/components/header/header.tsx +++ b/src/renderer/src/components/header/header.tsx @@ -81,6 +81,7 @@ export function Header({ onSearch, onClear, search }: HeaderProps) { })} onClick={handleBackButtonClick} disabled={location.key === "default"} + title={t("back")} > From a54983c3391a25f90b08e4b7134ade14d4dbc6cf Mon Sep 17 00:00:00 2001 From: cj-do-gta-sander Date: Thu, 24 Oct 2024 11:02:48 -0300 Subject: [PATCH 10/19] feat: add tabindex 0 to search bar icon for direct focus --- src/renderer/src/components/header/header.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/renderer/src/components/header/header.tsx b/src/renderer/src/components/header/header.tsx index 6afef0a09..a628750cf 100644 --- a/src/renderer/src/components/header/header.tsx +++ b/src/renderer/src/components/header/header.tsx @@ -101,6 +101,7 @@ export function Header({ onSearch, onClear, search }: HeaderProps) { type="button" className={styles.actionButton} onClick={focusInput} + tabIndex={-1} > From ba7e4c979d0c4218546d91eaff3306951e35113e Mon Sep 17 00:00:00 2001 From: cj-do-gta-sander Date: Thu, 24 Oct 2024 11:06:03 -0300 Subject: [PATCH 11/19] feat: add tooltip and screen reader support to clear search button --- src/locales/en/translation.json | 3 ++- src/locales/pt-BR/translation.json | 3 ++- src/renderer/src/components/header/header.tsx | 2 ++ 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index f73309536..830061df5 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -37,7 +37,8 @@ "settings": "Settings", "version_available_install": "Version {{version}} available. Click here to restart and install.", "version_available_download": "Version {{version}} available. Click here to download.", - "back": "Back" + "back": "Back", + "clear_search": "Clear search" }, "bottom_panel": { "no_downloads_in_progress": "No downloads in progress", diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json index 4c78c3b68..fd848745a 100644 --- a/src/locales/pt-BR/translation.json +++ b/src/locales/pt-BR/translation.json @@ -37,7 +37,8 @@ "home": "Início", "version_available_install": "Versão {{version}} disponível. Clique aqui para reiniciar e instalar.", "version_available_download": "Versão {{version}} disponível. Clique aqui para fazer o download.", - "back": "Voltar" + "back": "Voltar", + "clear_search": "Limpar busca" }, "bottom_panel": { "no_downloads_in_progress": "Sem downloads em andamento", diff --git a/src/renderer/src/components/header/header.tsx b/src/renderer/src/components/header/header.tsx index a628750cf..9624e8b79 100644 --- a/src/renderer/src/components/header/header.tsx +++ b/src/renderer/src/components/header/header.tsx @@ -102,6 +102,7 @@ export function Header({ onSearch, onClear, search }: HeaderProps) { className={styles.actionButton} onClick={focusInput} tabIndex={-1} + title={t("search")} > @@ -123,6 +124,7 @@ export function Header({ onSearch, onClear, search }: HeaderProps) { type="button" onClick={onClear} className={styles.actionButton} + title={t("clear_search")} > From e0ec79b10537ddc07b3b2eb95c5cfeba7e29ac1e Mon Sep 17 00:00:00 2001 From: cj-do-gta-sander Date: Thu, 24 Oct 2024 11:45:41 -0300 Subject: [PATCH 12/19] feat: add keyboard control for sidebar size adjustment --- src/renderer/src/components/sidebar/sidebar.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/renderer/src/components/sidebar/sidebar.tsx b/src/renderer/src/components/sidebar/sidebar.tsx index ae617192a..e561d8ae6 100644 --- a/src/renderer/src/components/sidebar/sidebar.tsx +++ b/src/renderer/src/components/sidebar/sidebar.tsx @@ -68,6 +68,22 @@ export function Sidebar() { sidebarRef.current?.clientWidth || SIDEBAR_INITIAL_WIDTH; }; + const handleKeyDown: React.KeyboardEventHandler = ( + event + ) => { + const { key } = event; + + if (key === "ArrowRight") { + setSidebarWidth((prevWidth) => + prevWidth < SIDEBAR_INITIAL_WIDTH ? SIDEBAR_INITIAL_WIDTH : SIDEBAR_MAX_WIDTH + ); + } else if (key === "ArrowLeft") { + setSidebarWidth((prevWidth) => + prevWidth > SIDEBAR_INITIAL_WIDTH ? SIDEBAR_INITIAL_WIDTH : SIDEBAR_MIN_WIDTH + ); + } + }; + const handleFilter: React.ChangeEventHandler = (event) => { setFilteredLibrary( sortedLibrary.filter((game) => @@ -246,6 +262,7 @@ export function Sidebar() { type="button" className={styles.handle} onMouseDown={handleMouseDown} + onKeyDown={handleKeyDown} /> ); From 455016c1a74b24bc2037b27abae9fc03f12a28ed Mon Sep 17 00:00:00 2001 From: cj-do-gta-sander Date: Thu, 24 Oct 2024 11:46:37 -0300 Subject: [PATCH 13/19] lint: sidebar.tsx --- src/renderer/src/components/sidebar/sidebar.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/renderer/src/components/sidebar/sidebar.tsx b/src/renderer/src/components/sidebar/sidebar.tsx index e561d8ae6..a782e1017 100644 --- a/src/renderer/src/components/sidebar/sidebar.tsx +++ b/src/renderer/src/components/sidebar/sidebar.tsx @@ -74,12 +74,16 @@ export function Sidebar() { const { key } = event; if (key === "ArrowRight") { - setSidebarWidth((prevWidth) => - prevWidth < SIDEBAR_INITIAL_WIDTH ? SIDEBAR_INITIAL_WIDTH : SIDEBAR_MAX_WIDTH + setSidebarWidth((prevWidth) => + prevWidth < SIDEBAR_INITIAL_WIDTH + ? SIDEBAR_INITIAL_WIDTH + : SIDEBAR_MAX_WIDTH ); } else if (key === "ArrowLeft") { - setSidebarWidth((prevWidth) => - prevWidth > SIDEBAR_INITIAL_WIDTH ? SIDEBAR_INITIAL_WIDTH : SIDEBAR_MIN_WIDTH + setSidebarWidth((prevWidth) => + prevWidth > SIDEBAR_INITIAL_WIDTH + ? SIDEBAR_INITIAL_WIDTH + : SIDEBAR_MIN_WIDTH ); } }; From 2a6346cb690db8057e7f546085d42eeb01697bca Mon Sep 17 00:00:00 2001 From: cj-do-gta-sander Date: Thu, 24 Oct 2024 11:50:01 -0300 Subject: [PATCH 14/19] feat: add tooltip and screen reader support to sidebar resize button --- src/locales/en/translation.json | 3 ++- src/locales/pt-BR/translation.json | 3 ++- src/renderer/src/components/sidebar/sidebar.tsx | 1 + 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 830061df5..d26a351dd 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -26,7 +26,8 @@ "game_has_no_executable": "Game has no executable selected", "sign_in": "Sign in", "friends": "Friends", - "aria_view_profile": "View profile" + "aria_view_profile": "View profile", + "resize_sidebar": "Resize sidebar" }, "header": { "search": "Search games", diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json index fd848745a..b9df36b1d 100644 --- a/src/locales/pt-BR/translation.json +++ b/src/locales/pt-BR/translation.json @@ -26,7 +26,8 @@ "game_has_no_executable": "Jogo não possui executável selecionado", "sign_in": "Login", "friends": "Amigos", - "aria_view_profile": "Ver perfil" + "aria_view_profile": "Ver perfil", + "resize_sidebar": "Redimensionar barra lateral" }, "header": { "search": "Buscar jogos", diff --git a/src/renderer/src/components/sidebar/sidebar.tsx b/src/renderer/src/components/sidebar/sidebar.tsx index a782e1017..49935e96f 100644 --- a/src/renderer/src/components/sidebar/sidebar.tsx +++ b/src/renderer/src/components/sidebar/sidebar.tsx @@ -267,6 +267,7 @@ export function Sidebar() { className={styles.handle} onMouseDown={handleMouseDown} onKeyDown={handleKeyDown} + title={t("resize_sidebar")} /> ); From 3adc8662dc51f8b9b0ef11d81ff4f2acdb313148 Mon Sep 17 00:00:00 2001 From: cj-do-gta-sander Date: Thu, 24 Oct 2024 12:11:49 -0300 Subject: [PATCH 15/19] feat: add keyboard shortcut to focus header search bar --- src/renderer/src/components/header/header.tsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/renderer/src/components/header/header.tsx b/src/renderer/src/components/header/header.tsx index 9624e8b79..0dce9e8b6 100644 --- a/src/renderer/src/components/header/header.tsx +++ b/src/renderer/src/components/header/header.tsx @@ -65,6 +65,19 @@ export function Header({ onSearch, onClear, search }: HeaderProps) { navigate(-1); }; + useEffect(() => { + window.onkeydown = (event: KeyboardEvent) => { + const { key, ctrlKey } = event; + if (!isFocused && ctrlKey && key === "k") { + focusInput(); + } + }; + + return () => { + window.onkeydown = null; + }; + }, [isFocused]); + return ( <>
          Date: Thu, 24 Oct 2024 12:24:20 -0300 Subject: [PATCH 16/19] feat: add ability to blur search bar with Escape key --- src/renderer/src/components/header/header.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/renderer/src/components/header/header.tsx b/src/renderer/src/components/header/header.tsx index 0dce9e8b6..edb0b4221 100644 --- a/src/renderer/src/components/header/header.tsx +++ b/src/renderer/src/components/header/header.tsx @@ -71,6 +71,11 @@ export function Header({ onSearch, onClear, search }: HeaderProps) { if (!isFocused && ctrlKey && key === "k") { focusInput(); } + + if (isFocused && key === "Escape" && inputRef.current) { + inputRef.current.blur(); + handleBlur(); + } }; return () => { From c754710171f90dfc337d179be4b440b7255f9574 Mon Sep 17 00:00:00 2001 From: cj-do-gta-sander Date: Thu, 24 Oct 2024 14:27:54 -0300 Subject: [PATCH 17/19] feat: enable tab navigation through carousel previews, replacing arrow buttons --- .../src/pages/game-details/gallery-slider/gallery-slider.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.tsx b/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.tsx index 40bf050a3..a0f5c7482 100644 --- a/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.tsx +++ b/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.tsx @@ -140,7 +140,7 @@ export function GallerySlider() { direction: "left", })} aria-label={t("previous_screenshot")} - tabIndex={0} + tabIndex={-1} > @@ -153,7 +153,7 @@ export function GallerySlider() { direction: "right", })} aria-label={t("next_screenshot")} - tabIndex={0} + tabIndex={-1} > @@ -169,6 +169,7 @@ export function GallerySlider() { })} onClick={() => setMediaIndex(i)} aria-label={t("open_screenshot", { number: i + 1 })} + onFocus={() => setMediaIndex(i)} > Date: Thu, 24 Oct 2024 14:52:54 -0300 Subject: [PATCH 18/19] feat: add aria labels to How Long to Beat and Achievements in game details sidebar --- src/locales/en/translation.json | 1 + src/locales/pt-BR/translation.json | 1 + .../pages/game-details/sidebar/how-long-to-beat-section.tsx | 3 +++ src/renderer/src/pages/game-details/sidebar/sidebar.tsx | 4 ++++ 4 files changed, 9 insertions(+) diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index d26a351dd..5d72b35f5 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -136,6 +136,7 @@ "warning": "Warning:", "hydra_needs_to_remain_open": "for this download, Hydra needs to remain open util its conclusion. In case Hydra closes before the conclusion, you will lose your progress.", "achievements": "Achievements", + "achievement": "Achievement", "achievements_count": "Achievements {{unlockedCount}}/{{achievementsCount}}", "cloud_save": "Cloud save", "cloud_save_description": "Save your progress in the cloud and continue playing on any device", diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json index b9df36b1d..aefdd5b6a 100644 --- a/src/locales/pt-BR/translation.json +++ b/src/locales/pt-BR/translation.json @@ -132,6 +132,7 @@ "warning": "Aviso:", "hydra_needs_to_remain_open": "para este download, o Hydra precisa ficar aberto até a conclusão. Caso o Hydra encerre antes da conclusão, perderá seu progresso.", "achievements": "Conquistas", + "achievement": "Conquista", "achievements_count": "Conquistas ({{unlockedCount}}/{{achievementsCount}})", "cloud_save": "Salvamento em nuvem", "cloud_save_description": "Mantenha seu progresso na nuvem e continue de onde parou em qualquer dispositivo", diff --git a/src/renderer/src/pages/game-details/sidebar/how-long-to-beat-section.tsx b/src/renderer/src/pages/game-details/sidebar/how-long-to-beat-section.tsx index d63879f59..5080ce9d3 100644 --- a/src/renderer/src/pages/game-details/sidebar/how-long-to-beat-section.tsx +++ b/src/renderer/src/pages/game-details/sidebar/how-long-to-beat-section.tsx @@ -38,6 +38,9 @@ export function HowLongToBeatSection({

        • Date: Thu, 24 Oct 2024 14:53:36 -0300 Subject: [PATCH 19/19] lint: how-long-to-beat-section.tsx --- .../src/pages/game-details/sidebar/how-long-to-beat-section.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/src/pages/game-details/sidebar/how-long-to-beat-section.tsx b/src/renderer/src/pages/game-details/sidebar/how-long-to-beat-section.tsx index 5080ce9d3..df31f2fdc 100644 --- a/src/renderer/src/pages/game-details/sidebar/how-long-to-beat-section.tsx +++ b/src/renderer/src/pages/game-details/sidebar/how-long-to-beat-section.tsx @@ -39,7 +39,7 @@ export function HowLongToBeatSection({ key={category.title} className={styles.howLongToBeatCategory} aria-label={`${category.title}, ${getDuration( - category.duration, + category.duration )}`} >