Skip to content

Commit f86f9ce

Browse files
royedenroyeden
committed
Apply something similar to omgovich#159 PR
1 parent 1c832e2 commit f86f9ce

File tree

4 files changed

+122
-58
lines changed

4 files changed

+122
-58
lines changed

‎src/components/common/Interactive.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -54,10 +54,9 @@ const isInvalid = (event: MouseEvent | TouchEvent, hasTouch: boolean): boolean =
5454
return hasTouch && !isTouch(event);
5555
};
5656

57-
interface Props {
57+
interface Props extends React.HTMLAttributes<HTMLDivElement> {
5858
onMove: (interaction: Interaction) => void;
5959
onKey: (offset: Interaction) => void;
60-
children: React.ReactNode;
6160
}
6261

6362
const InteractiveBase = ({ onMove, onKey, ...rest }: Props) => {
@@ -143,14 +142,14 @@ const InteractiveBase = ({ onMove, onKey, ...rest }: Props) => {
143142

144143
return (
145144
<div
146-
{...rest}
147145
onTouchStart={handleMoveStart}
148146
onMouseDown={handleMoveStart}
149147
className="react-colorful__interactive"
150148
ref={container}
151149
onKeyDown={handleKeyDown}
152150
tabIndex={0}
153151
role="slider"
152+
{...rest}
154153
/>
155154
);
156155
};

‎src/components/common/Saturation.tsx

+19-13
Original file line numberDiff line numberDiff line change
@@ -33,19 +33,25 @@ const SaturationBase = ({ hsva, onChange }: Props) => {
3333

3434
return (
3535
<div className="react-colorful__saturation" style={containerStyle}>
36-
<Interactive
37-
onMove={handleMove}
38-
onKey={handleKey}
39-
aria-label="Color"
40-
aria-valuetext={`Saturation ${round(hsva.s)}%, Brightness ${round(hsva.v)}%`}
41-
>
42-
<Pointer
43-
className="react-colorful__saturation-pointer"
44-
top={1 - hsva.v / 100}
45-
left={hsva.s / 100}
46-
color={hsvaToHslString(hsva)}
47-
/>
48-
</Interactive>
36+
<div role="grid" aria-rowcount={100} aria-label="Saturation and Brightness">
37+
<div role="row" aria-rowindex={round(hsva.v)} aria-label={`Brightness ${round(hsva.v)}%`}>
38+
<Interactive
39+
onMove={handleMove}
40+
onKey={handleKey}
41+
role="gridcell"
42+
aria-colcount={100}
43+
aria-colindex={round(hsva.s)}
44+
aria-label={`Saturation ${round(hsva.s)}%`}
45+
>
46+
<Pointer
47+
className="react-colorful__saturation-pointer"
48+
top={1 - hsva.v / 100}
49+
left={hsva.s / 100}
50+
color={hsvaToHslString(hsva)}
51+
/>
52+
</Interactive>
53+
</div>
54+
</div>
4955
</div>
5056
);
5157
};

‎tests/__snapshots__/components.test.js.snap

+92-40
Original file line numberDiff line numberDiff line change
@@ -11,20 +11,33 @@ exports[`Accepts any valid \`div\` attributes 1`] = `
1111
style="background-color: rgb(255, 0, 0);"
1212
>
1313
<div
14-
aria-label="Color"
15-
aria-valuetext="Saturation 0%, Brightness 0%"
16-
class="react-colorful__interactive"
17-
role="slider"
18-
tabindex="0"
14+
aria-label="Saturation and Brightness"
15+
aria-rowcount="100"
16+
role="grid"
1917
>
2018
<div
21-
class="react-colorful__pointer react-colorful__saturation-pointer"
22-
style="top: 100%; left: 0%;"
19+
aria-label="Brightness 0%"
20+
aria-rowindex="0"
21+
role="row"
2322
>
2423
<div
25-
class="react-colorful__pointer-fill"
26-
style="background-color: rgb(0, 0, 0);"
27-
/>
24+
aria-colcount="100"
25+
aria-colindex="0"
26+
aria-label="Saturation 0%"
27+
class="react-colorful__interactive"
28+
role="gridcell"
29+
tabindex="0"
30+
>
31+
<div
32+
class="react-colorful__pointer react-colorful__saturation-pointer"
33+
style="top: 100%; left: 0%;"
34+
>
35+
<div
36+
class="react-colorful__pointer-fill"
37+
style="background-color: rgb(0, 0, 0);"
38+
/>
39+
</div>
40+
</div>
2841
</div>
2942
</div>
3043
</div>
@@ -72,20 +85,33 @@ exports[`Renders proper alpha color picker markup 1`] = `
7285
style="background-color: rgb(255, 0, 0);"
7386
>
7487
<div
75-
aria-label="Color"
76-
aria-valuetext="Saturation 100%, Brightness 100%"
77-
class="react-colorful__interactive"
78-
role="slider"
79-
tabindex="0"
88+
aria-label="Saturation and Brightness"
89+
aria-rowcount="100"
90+
role="grid"
8091
>
8192
<div
82-
class="react-colorful__pointer react-colorful__saturation-pointer"
83-
style="top: 0%; left: 100%;"
93+
aria-label="Brightness 100%"
94+
aria-rowindex="100"
95+
role="row"
8496
>
8597
<div
86-
class="react-colorful__pointer-fill"
87-
style="background-color: rgb(255, 0, 0);"
88-
/>
98+
aria-colcount="100"
99+
aria-colindex="100"
100+
aria-label="Saturation 100%"
101+
class="react-colorful__interactive"
102+
role="gridcell"
103+
tabindex="0"
104+
>
105+
<div
106+
class="react-colorful__pointer react-colorful__saturation-pointer"
107+
style="top: 0%; left: 100%;"
108+
>
109+
<div
110+
class="react-colorful__pointer-fill"
111+
style="background-color: rgb(255, 0, 0);"
112+
/>
113+
</div>
114+
</div>
89115
</div>
90116
</div>
91117
</div>
@@ -151,20 +177,33 @@ exports[`Renders proper color picker markup 1`] = `
151177
style="background-color: rgb(255, 0, 0);"
152178
>
153179
<div
154-
aria-label="Color"
155-
aria-valuetext="Saturation 100%, Brightness 100%"
156-
class="react-colorful__interactive"
157-
role="slider"
158-
tabindex="0"
180+
aria-label="Saturation and Brightness"
181+
aria-rowcount="100"
182+
role="grid"
159183
>
160184
<div
161-
class="react-colorful__pointer react-colorful__saturation-pointer"
162-
style="top: 0%; left: 100%;"
185+
aria-label="Brightness 100%"
186+
aria-rowindex="100"
187+
role="row"
163188
>
164189
<div
165-
class="react-colorful__pointer-fill"
166-
style="background-color: rgb(255, 0, 0);"
167-
/>
190+
aria-colcount="100"
191+
aria-colindex="100"
192+
aria-label="Saturation 100%"
193+
class="react-colorful__interactive"
194+
role="gridcell"
195+
tabindex="0"
196+
>
197+
<div
198+
class="react-colorful__pointer react-colorful__saturation-pointer"
199+
style="top: 0%; left: 100%;"
200+
>
201+
<div
202+
class="react-colorful__pointer-fill"
203+
style="background-color: rgb(255, 0, 0);"
204+
/>
205+
</div>
206+
</div>
168207
</div>
169208
</div>
170209
</div>
@@ -203,20 +242,33 @@ exports[`Works with no props 1`] = `
203242
style="background-color: rgb(255, 0, 0);"
204243
>
205244
<div
206-
aria-label="Color"
207-
aria-valuetext="Saturation 0%, Brightness 0%"
208-
class="react-colorful__interactive"
209-
role="slider"
210-
tabindex="0"
245+
aria-label="Saturation and Brightness"
246+
aria-rowcount="100"
247+
role="grid"
211248
>
212249
<div
213-
class="react-colorful__pointer react-colorful__saturation-pointer"
214-
style="top: 100%; left: 0%;"
250+
aria-label="Brightness 0%"
251+
aria-rowindex="0"
252+
role="row"
215253
>
216254
<div
217-
class="react-colorful__pointer-fill"
218-
style="background-color: rgb(0, 0, 0);"
219-
/>
255+
aria-colcount="100"
256+
aria-colindex="0"
257+
aria-label="Saturation 0%"
258+
class="react-colorful__interactive"
259+
role="gridcell"
260+
tabindex="0"
261+
>
262+
<div
263+
class="react-colorful__pointer react-colorful__saturation-pointer"
264+
style="top: 100%; left: 0%;"
265+
>
266+
<div
267+
class="react-colorful__pointer-fill"
268+
style="background-color: rgb(0, 0, 0);"
269+
/>
270+
</div>
271+
</div>
220272
</div>
221273
</div>
222274
</div>

‎tests/components.test.js

+9-2
Original file line numberDiff line numberDiff line change
@@ -323,13 +323,20 @@ it("Sets proper `aria-valuetext` attribute value", async () => {
323323
const saturation = result.container.querySelector(
324324
".react-colorful__saturation .react-colorful__interactive"
325325
);
326+
const brightness = saturation.parentElement;
326327

327-
expect(saturation.getAttribute("aria-valuetext")).toBe("Saturation 0%, Brightness 0%");
328+
expect(saturation.getAttribute("aria-label")).toBe("Saturation 0%");
329+
expect(saturation.getAttribute("aria-colindex")).toBe("0");
330+
expect(brightness.getAttribute("aria-label")).toBe("Brightness 0%");
331+
expect(brightness.getAttribute("aria-rowindex")).toBe("0");
328332

329333
fireEvent(saturation, new FakeMouseEvent("mousedown", { pageX: 0, pageY: 0 }));
330334
fireEvent(saturation, new FakeMouseEvent("mousemove", { pageX: 500, pageY: 0 })); // '#ff0000'
331335

332-
expect(saturation.getAttribute("aria-valuetext")).toBe("Saturation 100%, Brightness 100%");
336+
expect(saturation.getAttribute("aria-label")).toBe("Saturation 100%");
337+
expect(saturation.getAttribute("aria-colindex")).toBe("100");
338+
expect(brightness.getAttribute("aria-label")).toBe("Brightness 100%");
339+
expect(brightness.getAttribute("aria-rowindex")).toBe("100");
333340
});
334341

335342
it("Accepts any valid `div` attributes", () => {

0 commit comments

Comments
 (0)