Skip to content

Commit 48d2af3

Browse files
lucjastozeklucjastozek
authored
Merge pull request #10 from lucjastozek/small-fixes
small fixes
2 parents aa32169 + f1d9feb commit 48d2af3

File tree

14 files changed

+855
-181
lines changed

14 files changed

+855
-181
lines changed

‎README.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,21 @@ yarn a11y:all
9393
- `yarn lint` - Runs ESLint. Fails on any warning or error.
9494
- `yarn type-check` - Checks TypeScript types without emitting any files.
9595

96+
# Quick Accessibility Reference
97+
98+
## Common Patterns
99+
100+
- `<button>` for actions, `<a>` for navigation
101+
- Every form input needs a `<label>`
102+
- Images need `alt` text (empty `alt=""` for decorative)
103+
- Use headings in order (h1, h2, h3...)
104+
105+
## Quick Tests
106+
107+
- Tab through your page - does it make sense?
108+
- Turn off CSS - is content still usable?
109+
- Run `yarn lint` - fix any a11y warnings
110+
96111
---
97112

98113
<picture>

‎index.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@
99
content="An accessible and warm Vite React template"
1010
/>
1111
<meta name="theme-color" content="#ea8644" />
12+
<link rel="preconnect" href="https://fonts.googleapis.com" />
13+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
14+
<link
15+
href="https://fonts.googleapis.com/css2?family=Inclusive+Sans:ital,wght@0,300..700;1,300..700&display=swap"
16+
rel="stylesheet"
17+
/>
1218
<title>Ally Template</title>
1319
</head>
1420
<body>

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,10 @@
2626
"test:e2e:debug": "npx playwright test --debug"
2727
},
2828
"dependencies": {
29+
"@emotion/react": "^11.14.0",
30+
"@emotion/styled": "^11.14.1",
31+
"@mui/icons-material": "^7.3.2",
32+
"@mui/material": "^7.3.2",
2933
"playwright-core": "^1.55.0",
3034
"react": "^18.3.1",
3135
"react-dom": "^18.3.1",

‎src/Router.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import HomePage from "@/pages/HomePage";
1+
import HomePage from "@/pages/home-page/HomePage";
22
import { createBrowserRouter, RouterProvider } from "react-router-dom";
33

44
const router = createBrowserRouter([

‎src/components/ColorSwatch.tsx‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

src/components/ColorSwatch.module.css renamed to src/components/color-swatch/ColorSwatch.module.css

Lines changed: 44 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,92 @@
11
.colorPaletteGrid {
2-
display: grid;
3-
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
4-
gap: 1.5rem;
5-
margin-bottom: 2rem;
2+
--swatch-orange: #ea8644;
3+
--swatch-orange-rgb: 234, 134, 68;
4+
--swatch-green: #56c876;
5+
--swatch-green-rgb: 86, 200, 118;
6+
}
7+
8+
.colorPaletteGrid.lightMode {
9+
--swatch-orange: #913c03;
10+
--swatch-orange-rgb: 145, 60, 3;
11+
--swatch-green: #205b33;
12+
--swatch-green-rgb: 32, 91, 51;
613
}
714

815
.colorSwatch {
9-
background: var(--black);
10-
border: 1px solid rgba(var(--whiteRgb), 0.1);
11-
border-radius: 12px;
12-
padding: 1rem;
13-
transition: all 0.3s ease;
14-
display: flex;
16+
position: relative;
1517
flex-direction: column;
16-
align-items: center;
1718
text-align: center;
19+
background: var(--black) !important;
1820
}
1921

2022
.colorPaletteGrid.lightMode .colorSwatch {
21-
background: var(--white);
22-
border: 1px solid rgba(var(--blackRgb), 0.1);
23-
}
24-
25-
.colorSwatch:hover {
26-
transform: translateY(-2px);
27-
box-shadow: 0 8px 25px rgba(var(--blackRgb), 0.15);
28-
border-color: rgba(234, 134, 68, 0.3);
29-
}
30-
31-
.colorPaletteGrid.lightMode .colorSwatch:hover {
32-
box-shadow: 0 8px 25px rgba(var(--blackRgb), 0.1);
33-
border-color: rgba(145, 60, 3, 0.3);
23+
background: var(--white) !important;
3424
}
3525

3626
.colorPreview {
3727
width: 60px;
3828
height: 60px;
39-
border-radius: 50%;
40-
margin-bottom: 1rem;
29+
border-radius: var(--radius-full);
30+
margin-bottom: var(--space-md);
4131
border: 3px solid rgba(var(--whiteRgb), 0.2);
42-
box-shadow: 0 4px 12px rgba(var(--blackRgb), 0.2);
32+
box-shadow: var(--shadow-sm);
33+
}
34+
35+
.colorPaletteGrid.lightMode .colorPreview {
36+
border: 3px solid rgba(var(--blackRgb), 0.2);
37+
box-shadow: var(--shadow-sm);
4338
}
4439

4540
.colorInfo h4 {
46-
margin: 0 0 0.5rem 0;
41+
margin: 0 0 var(--space-sm) 0;
4742
font-size: 1rem;
4843
font-weight: 600;
49-
color: var(--white);
44+
color: var(--white) !important;
5045
}
5146

5247
.colorPaletteGrid.lightMode .colorInfo h4 {
53-
color: var(--black);
48+
color: var(--black) !important;
5449
}
5550

5651
.colorInfo code {
5752
display: block;
5853
font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace;
5954
font-size: 0.85rem;
60-
color: rgb(234, 134, 68);
61-
margin-bottom: 0.5rem;
62-
background: rgba(234, 134, 68, 0.1);
63-
padding: 0.25rem 0.5rem;
64-
border-radius: 6px;
65-
border: 1px solid rgba(234, 134, 68, 0.2);
55+
color: var(--swatch-orange);
56+
margin-bottom: var(--space-sm);
57+
background: rgba(var(--swatch-orange-rgb), 0.1);
58+
padding: var(--space-xs) var(--space-sm);
59+
border-radius: var(--radius-sm);
60+
border: 1px solid rgba(var(--swatch-orange-rgb), 0.2);
6661
}
6762

6863
.colorPaletteGrid.lightMode .colorInfo code {
69-
background: rgba(145, 60, 3, 0.1);
70-
border: 1px solid rgba(145, 60, 3, 0.2);
71-
color: #913c03;
64+
background: rgba(var(--swatch-orange-rgb), 0.1);
65+
border: 1px solid rgba(var(--swatch-orange-rgb), 0.2);
66+
color: var(--swatch-orange);
7267
}
7368

7469
.contrastRatio {
7570
display: inline-block;
7671
font-size: 0.75rem;
77-
padding: 0.25rem 0.6rem;
72+
padding: var(--space-xs) 0.6rem;
7873
border-radius: 20px;
7974
font-weight: 600;
80-
background: rgba(86, 200, 118, 0.2);
81-
color: #56c876;
82-
border: 1px solid rgba(86, 200, 118, 0.3);
75+
background: rgba(var(--swatch-green-rgb), 0.2);
76+
color: var(--swatch-green);
77+
border: 1px solid rgba(var(--swatch-green-rgb), 0.3);
8378
}
8479

8580
.colorPaletteGrid.lightMode .contrastRatio {
86-
background: rgba(32, 91, 51, 0.15);
87-
color: #205b33;
88-
border: 1px solid rgba(32, 91, 51, 0.25);
81+
background: rgba(var(--swatch-green-rgb), 0.15);
82+
color: var(--swatch-green);
83+
border: 1px solid rgba(var(--swatch-green-rgb), 0.25);
8984
}
9085

9186
.colorModeToggle {
9287
display: flex;
9388
align-items: center;
94-
gap: 1rem;
89+
gap: var(--space-md);
9590
}
9691

9792
.toggleLabel {
@@ -107,7 +102,7 @@
107102
align-items: center;
108103
background: rgba(var(--fgRgb), 0.1);
109104
border: 2px solid rgba(var(--fgRgb), 0.2);
110-
border-radius: 2rem;
105+
border-radius: var(--radius-2xl);
111106
padding: 0.3rem;
112107
cursor: pointer;
113108
transition: all 0.3s ease;
@@ -174,11 +169,6 @@
174169
}
175170

176171
@media (max-width: 768px) {
177-
.colorPaletteGrid {
178-
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
179-
gap: 1rem;
180-
}
181-
182172
.colorPreview {
183173
width: 50px;
184174
height: 50px;
@@ -190,7 +180,7 @@
190180

191181
.colorModeToggle {
192182
flex-direction: column;
193-
gap: 0.5rem;
183+
gap: var(--space-sm);
194184
align-items: center;
195185
}
196186

@@ -210,11 +200,6 @@
210200
}
211201

212202
@media (max-width: 480px) {
213-
.colorPaletteGrid {
214-
grid-template-columns: repeat(2, 1fr);
215-
gap: 0.8rem;
216-
}
217-
218203
.colorPreview {
219204
width: 40px;
220205
height: 40px;

‎src/components/color-swatch/ColorSwatch.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { useState } from "react";
2+
import { createPortal } from "react-dom";
3+
import styles from "@/components/color-swatch/ColorSwatch.module.css";
4+
5+
interface ColorSwatchProps {
6+
name: string;
7+
hexCode: string;
8+
contrastRatio: string;
9+
}
10+
11+
export function ColorSwatch({
12+
name,
13+
hexCode,
14+
contrastRatio,
15+
}: ColorSwatchProps) {
16+
const [copied, setCopied] = useState(false);
17+
18+
const copyToClipboard = async () => {
19+
try {
20+
await navigator.clipboard.writeText(hexCode);
21+
setCopied(true);
22+
setTimeout(() => setCopied(false), 2000);
23+
} catch (err) {
24+
console.error("Failed to copy: ", err);
25+
}
26+
};
27+
28+
return (
29+
<>
30+
<button
31+
className={`interactive-button ${styles.colorSwatch} ${copied ? "copied" : ""}`}
32+
onClick={copyToClipboard}
33+
aria-label="Copy color to clipboard"
34+
type="button"
35+
>
36+
<div
37+
className={styles.colorPreview}
38+
style={{ backgroundColor: hexCode }}
39+
aria-hidden="true"
40+
></div>
41+
<div className={styles.colorInfo}>
42+
<h4>{name}</h4>
43+
<code>{hexCode}</code>
44+
<span className={styles.contrastRatio}>{contrastRatio}</span>
45+
</div>
46+
</button>
47+
48+
{copied &&
49+
createPortal(
50+
<div
51+
className="notification notification-success"
52+
aria-live="polite"
53+
role="status"
54+
>
55+
Copied color {hexCode} to clipboard
56+
</div>,
57+
document.body,
58+
)}
59+
</>
60+
);
61+
}

0 commit comments

Comments
 (0)