Skip to content

Commit 63ba688

Browse files
N3koSempaiN3koSempai
authored
Merge pull request #22 from N3koSempai/acesibility
new accesibility system
2 parents 5a7b3ff + 2100f0f commit 63ba688

35 files changed

Lines changed: 1046 additions & 288 deletions

‎io.github.N3kosempai.klia-store.metainfo.xml‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,23 @@
3838
<binary>klia-store</binary>
3939
</provides>
4040
<releases>
41-
<release version="2.9.3" date="2026-04-05">
41+
<release version="2.10.0" date="2026-06-02">
4242
<description>
43-
<p>Solve metadata issues</p>
44-
43+
<p>Klia Store 2.10 — Accessibility First</p>
44+
<p>
45+
This release marks a major milestone in making Klia Store welcoming to everyone,
46+
regardless of how they interact with their computer.
47+
</p>
48+
<ul>
49+
<li>Full keyboard navigation across the entire app — browse, install, and manage apps without ever touching the mouse.</li>
50+
<li>Screen reader support throughout — every button, card, and status message is now properly announced by tools like Orca.</li>
51+
<li>Three color vision modes: Deuteranopia, Protanopia, and Tritanopia — the entire interface adapts its palette so nothing gets lost in translation.</li>
52+
<li>High contrast mode for users who need sharper text and stronger visual boundaries.</li>
53+
<li>Reduced motion option for users sensitive to animations — the app becomes completely still on request.</li>
54+
<li>A new Settings panel in the main toolbar lets you change any of these preferences at any time, not just during first setup.</li>
55+
<li>Accessibility preferences are remembered across sessions — set it once, and Klia Store stays the way you need it.</li>
56+
<li>All interface colors now respond to your chosen accessibility mode — nothing is left hardcoded.</li>
57+
</ul>
4558
</description>
4659
</release>
4760
</releases>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "klia-store",
33
"private": true,
4-
"version": "2.9.3",
4+
"version": "2.10.0",
55
"type": "module",
66
"scripts": {
77
"dev": "vite",

‎src-tauri/Cargo.lock‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src-tauri/Cargo.toml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
[package]
22
name = "klia-store"
3-
version = "2.5.5"
3+
version = "2.10.0"
44
description = "A Tauri App"
55
authors = ["you"]
66
edition = "2021"

‎src-tauri/tauri.conf.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"$schema": "https://schema.tauri.app/config/2",
33
"productName": "klia-store",
4-
"version": "2.2.0",
4+
"version": "2.10.0",
55
"identifier": "io.github.N3kosempai.klia-store",
66
"build": {
77
"beforeDevCommand": "npm run dev",

‎src/components/AboutModal.tsx‎

Lines changed: 18 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,11 @@ import {
77
DialogContent,
88
Divider,
99
IconButton,
10+
Link,
1011
Paper,
1112
styled,
1213
Typography,
14+
useTheme,
1315
} from "@mui/material";
1416
import { openUrl } from "@tauri-apps/plugin-opener";
1517
import { useTranslation } from "react-i18next";
@@ -53,6 +55,7 @@ const StatusIndicator = styled(Box)<{ status: AvailabilityStatus }>(
5355

5456
export const AboutModal = ({ open, onClose }: AboutModalProps) => {
5557
const { t } = useTranslation();
58+
const theme = useTheme();
5659
const currentStatus: AvailabilityStatus = "busy";
5760

5861
const handleOpenLink = async (url: string) => {
@@ -94,7 +97,7 @@ export const AboutModal = ({ open, onClose }: AboutModalProps) => {
9497
sx={{
9598
fontWeight: "bold",
9699
textAlign: "center",
97-
background: "linear-gradient(135deg, #1976d2 0%, #42a5f5 100%)",
100+
background: `linear-gradient(135deg, ${theme.palette.primary.dark} 0%, ${theme.palette.primary.light} 100%)`,
98101
WebkitBackgroundClip: "text",
99102
WebkitTextFillColor: "transparent",
100103
}}
@@ -130,8 +133,8 @@ export const AboutModal = ({ open, onClose }: AboutModalProps) => {
130133
maxWidth: "500px",
131134
textAlign: "center",
132135
background:
133-
"linear-gradient(135deg, rgba(25, 118, 210, 0.1) 0%, rgba(66, 165, 245, 0.05) 100%)",
134-
border: "1px solid rgba(25, 118, 210, 0.2)",
136+
`linear-gradient(135deg, ${theme.palette.primary.dark}1A 0%, ${theme.palette.primary.main}0D 100%)`,
137+
border: `1px solid ${theme.palette.primary.dark}33`,
135138
mt: 2,
136139
}}
137140
>
@@ -143,30 +146,18 @@ export const AboutModal = ({ open, onClose }: AboutModalProps) => {
143146
{t("about.createdBy")}
144147
</Typography>
145148

146-
<Box
147-
component="button"
149+
<Link
148150
onClick={() => handleOpenLink("https://alvaromweb3.com/")}
149151
sx={{
150-
color: "primary.main",
151-
textDecoration: "none",
152152
fontSize: "1.5rem",
153153
fontWeight: "bold",
154-
"&:hover": { textDecoration: "underline" },
155154
mb: 3,
156155
cursor: "pointer",
157-
border: "none",
158-
background: "transparent",
159-
padding: 0,
160-
font: "inherit",
161-
textAlign: "center",
162156
display: "inline-block",
163-
boxShadow: "none",
164-
"&:focus": { outline: "none", boxShadow: "none" },
165-
"&:active": { boxShadow: "none" },
166157
}}
167158
>
168159
@N3koSempai
169-
</Box>
160+
</Link>
170161

171162
{/* Availability Status */}
172163
<Box
@@ -207,15 +198,15 @@ export const AboutModal = ({ open, onClose }: AboutModalProps) => {
207198
py: 1.5,
208199
borderRadius: 2,
209200
background:
210-
"linear-gradient(135deg, #1976d2 0%, #42a5f5 100%)",
201+
`linear-gradient(135deg, ${theme.palette.primary.dark} 0%, ${theme.palette.primary.main} 100%)`,
211202
textTransform: "none",
212203
fontSize: "1rem",
213204
fontWeight: "bold",
214-
boxShadow: "0 4px 15px rgba(25, 118, 210, 0.3)",
205+
boxShadow: `0 4px 15px ${theme.palette.primary.dark}4D`,
215206
"&:hover": {
216207
background:
217-
"linear-gradient(135deg, #1565c0 0%, #1976d2 100%)",
218-
boxShadow: "0 6px 20px rgba(25, 118, 210, 0.4)",
208+
`linear-gradient(135deg, ${theme.palette.primary.dark} 0%, ${theme.palette.primary.dark} 100%)`,
209+
boxShadow: `0 6px 20px ${theme.palette.primary.dark}66`,
219210
},
220211
}}
221212
>
@@ -242,29 +233,16 @@ export const AboutModal = ({ open, onClose }: AboutModalProps) => {
242233
>
243234
{t("about.license")}
244235
</Typography>
245-
<Box
246-
component="button"
236+
<Link
247237
onClick={() =>
248238
handleOpenLink(
249239
"https://github.com/N3koSempai/KliaStore/blob/master/LICENSE.md",
250240
)
251241
}
252-
sx={{
253-
color: "primary.main",
254-
textDecoration: "none",
255-
"&:hover": { textDecoration: "underline" },
256-
cursor: "pointer",
257-
border: "none",
258-
background: "transparent",
259-
padding: 0,
260-
font: "inherit",
261-
boxShadow: "none",
262-
"&:focus": { outline: "none", boxShadow: "none" },
263-
"&:active": { boxShadow: "none" },
264-
}}
242+
sx={{ cursor: "pointer" }}
265243
>
266244
{t("about.viewLicense")}
267-
</Box>
245+
</Link>
268246
</Box>
269247

270248
<Box sx={{ textAlign: "center" }}>
@@ -275,29 +253,16 @@ export const AboutModal = ({ open, onClose }: AboutModalProps) => {
275253
>
276254
{t("about.contributing")}
277255
</Typography>
278-
<Box
279-
component="button"
256+
<Link
280257
onClick={() =>
281258
handleOpenLink(
282259
"https://github.com/N3koSempai/KliaStore/blob/master/CONTRIBUTING.md",
283260
)
284261
}
285-
sx={{
286-
color: "primary.main",
287-
textDecoration: "none",
288-
"&:hover": { textDecoration: "underline" },
289-
cursor: "pointer",
290-
border: "none",
291-
background: "transparent",
292-
padding: 0,
293-
font: "inherit",
294-
boxShadow: "none",
295-
"&:focus": { outline: "none", boxShadow: "none" },
296-
"&:active": { boxShadow: "none" },
297-
}}
262+
sx={{ cursor: "pointer" }}
298263
>
299264
{t("about.viewContributing")}
300-
</Box>
265+
</Link>
301266
</Box>
302267
</Box>
303268
</Box>

‎src/components/AppActionButton.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,11 @@ export const AppActionButton = ({
3434
fontSize: "1rem",
3535
fontWeight: 600,
3636
fontFamily: "Inter, sans-serif",
37-
bgcolor: "#238636",
37+
bgcolor: "success.dark",
3838
color: "white",
3939
textTransform: "uppercase",
4040
"&:hover": {
41-
bgcolor: "#2EA043",
41+
bgcolor: "success.main",
4242
},
4343
}}
4444
>
@@ -61,8 +61,8 @@ export const AppActionButton = ({
6161
fontSize: "1rem",
6262
fontWeight: 600,
6363
fontFamily: "Inter, sans-serif",
64-
color: "#4A86CF",
65-
borderColor: "#4A86CF",
64+
color: "primary.main",
65+
borderColor: "primary.main",
6666
textTransform: "capitalize",
6767
}}
6868
>
@@ -110,11 +110,11 @@ export const AppActionButton = ({
110110
fontSize: "1rem",
111111
fontWeight: 600,
112112
fontFamily: "Inter, sans-serif",
113-
bgcolor: "#4A86CF",
113+
bgcolor: "primary.main",
114114
color: "white",
115115
textTransform: "uppercase",
116116
"&:hover": {
117-
bgcolor: "#3A6FB5",
117+
bgcolor: "primary.dark",
118118
},
119119
}}
120120
>

‎src/components/AppMetaCapsule.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export const AppMetaCapsule = ({
5050

5151
const licenseInfo = parseLicense(license);
5252
const isProprietary = license.toLowerCase().includes("proprietary");
53-
const licenseColor = isProprietary ? "#F6D32D" : "#C9D1D9";
53+
const licenseColor = isProprietary ? "secondary.main" : "text.primary";
5454

5555
const handleLicenseClick = async () => {
5656
if (licenseInfo.url) {
@@ -86,7 +86,7 @@ export const AppMetaCapsule = ({
8686
alignItems: "center",
8787
px: 1.5,
8888
py: 0.5,
89-
color: isVerified ? "#4A86CF" : "#8B949E",
89+
color: isVerified ? "primary.main" : "text.secondary",
9090
}}
9191
>
9292
{isVerified ? (
@@ -150,7 +150,7 @@ export const AppMetaCapsule = ({
150150
gap: 0.5,
151151
px: 1.5,
152152
py: 0.5,
153-
color: "#8B949E",
153+
color: "text.secondary",
154154
fontSize: "0.75rem",
155155
fontWeight: 600,
156156
}}

‎src/components/AppSearchBar.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,9 @@ export const AppSearchBar = ({
7878
onChange={handleInputChange}
7979
placeholder={t("home.searchPlaceholder")}
8080
variant="outlined"
81+
slotProps={{
82+
htmlInput: { role: "searchbox", "aria-label": t("home.searchLabel") },
83+
}}
8184
sx={{
8285
maxWidth: 600,
8386
"& .MuiOutlinedInput-root": {
@@ -112,6 +115,7 @@ export const AppSearchBar = ({
112115
<CircularProgress size={20} sx={{ color: "primary.main" }} />
113116
) : inputValue ? (
114117
<IconButton
118+
aria-label={t("home.searchClear")}
115119
onClick={handleClear}
116120
sx={{
117121
color: "text.secondary",

‎src/components/DependencyStatusCard.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ export const DependencyStatusCard = ({
8383
width: 8,
8484
height: 8,
8585
borderRadius: "50%",
86-
bgcolor: "#F6D32D",
86+
bgcolor: "secondary.main",
8787
ml: 1,
8888
}}
8989
/>
@@ -94,7 +94,7 @@ export const DependencyStatusCard = ({
9494
onClick={handleClick}
9595
sx={{
9696
bgcolor: "rgba(246, 211, 45, 0.1)",
97-
color: "#F6D32D",
97+
color: "secondary.main",
9898
border: "1px solid rgba(246, 211, 45, 0.3)",
9999
fontFamily: "IBM Plex Sans, sans-serif",
100100
fontSize: "0.875rem",
@@ -108,7 +108,7 @@ export const DependencyStatusCard = ({
108108
borderColor: "rgba(246, 211, 45, 0.5)",
109109
},
110110
"& .MuiChip-deleteIcon": {
111-
color: "#F6D32D",
111+
color: "secondary.main",
112112
"&:hover": {
113113
color: "#f8e45c",
114114
},
@@ -131,7 +131,7 @@ export const DependencyStatusCard = ({
131131
slotProps={{
132132
paper: {
133133
sx: {
134-
bgcolor: "#161B22",
134+
bgcolor: "background.paper",
135135
border: "1px solid rgba(255, 255, 255, 0.1)",
136136
borderRadius: 2,
137137
mt: 1,
@@ -147,7 +147,7 @@ export const DependencyStatusCard = ({
147147
fontFamily: "IBM Plex Sans, sans-serif",
148148
fontSize: "0.875rem",
149149
fontWeight: 600,
150-
color: "#C9D1D9",
150+
color: "text.primary",
151151
mb: 1.5,
152152
}}
153153
>
@@ -173,7 +173,7 @@ export const DependencyStatusCard = ({
173173
sx: {
174174
fontFamily: "JetBrains Mono, monospace",
175175
fontSize: "0.8rem",
176-
color: "#F6D32D",
176+
color: "secondary.main",
177177
wordBreak: "break-all",
178178
},
179179
}}
@@ -190,7 +190,7 @@ export const DependencyStatusCard = ({
190190
sx={{
191191
fontFamily: "Inter, sans-serif",
192192
fontSize: "0.75rem",
193-
color: "#8B949E",
193+
color: "text.secondary",
194194
}}
195195
>
196196
{t("dependency.download")}: {dep.download_size}
@@ -199,7 +199,7 @@ export const DependencyStatusCard = ({
199199
sx={{
200200
fontFamily: "Inter, sans-serif",
201201
fontSize: "0.75rem",
202-
color: "#8B949E",
202+
color: "text.secondary",
203203
}}
204204
>
205205
{t("dependency.installed")}: {dep.installed_size}
@@ -213,7 +213,7 @@ export const DependencyStatusCard = ({
213213
sx={{
214214
fontFamily: "Inter, sans-serif",
215215
fontSize: "0.75rem",
216-
color: "#8B949E",
216+
color: "text.secondary",
217217
mt: 2,
218218
fontStyle: "italic",
219219
}}

0 commit comments

Comments
 (0)