Skip to content

Commit

Permalink
Apply something similar to omgovich#159 PR
Browse files Browse the repository at this point in the history
  • Loading branch information
@royeden
royeden committed Jun 25, 2022
1 parent 1c832e2 commit f86f9ce
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 58 deletions.
5 changes: 2 additions & 3 deletions src/components/common/Interactive.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,9 @@ const isInvalid = (event: MouseEvent | TouchEvent, hasTouch: boolean): boolean =
return hasTouch && !isTouch(event);
};

interface Props {
interface Props extends React.HTMLAttributes<HTMLDivElement> {
onMove: (interaction: Interaction) => void;
onKey: (offset: Interaction) => void;
children: React.ReactNode;
}

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

return (
<div
{...rest}
onTouchStart={handleMoveStart}
onMouseDown={handleMoveStart}
className="react-colorful__interactive"
ref={container}
onKeyDown={handleKeyDown}
tabIndex={0}
role="slider"
{...rest}
/>
);
};
Expand Down
32 changes: 19 additions & 13 deletions src/components/common/Saturation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,19 +33,25 @@ const SaturationBase = ({ hsva, onChange }: Props) => {

return (
<div className="react-colorful__saturation" style={containerStyle}>
<Interactive
onMove={handleMove}
onKey={handleKey}
aria-label="Color"
aria-valuetext={`Saturation ${round(hsva.s)}%, Brightness ${round(hsva.v)}%`}
>
<Pointer
className="react-colorful__saturation-pointer"
top={1 - hsva.v / 100}
left={hsva.s / 100}
color={hsvaToHslString(hsva)}
/>
</Interactive>
<div role="grid" aria-rowcount={100} aria-label="Saturation and Brightness">
<div role="row" aria-rowindex={round(hsva.v)} aria-label={`Brightness ${round(hsva.v)}%`}>
<Interactive
onMove={handleMove}
onKey={handleKey}
role="gridcell"
aria-colcount={100}
aria-colindex={round(hsva.s)}
aria-label={`Saturation ${round(hsva.s)}%`}
>
<Pointer
className="react-colorful__saturation-pointer"
top={1 - hsva.v / 100}
left={hsva.s / 100}
color={hsvaToHslString(hsva)}
/>
</Interactive>
</div>
</div>
</div>
);
};
Expand Down
132 changes: 92 additions & 40 deletions tests/__snapshots__/components.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,20 +11,33 @@ exports[`Accepts any valid \`div\` attributes 1`] = `
style="background-color: rgb(255, 0, 0);"
>
<div
aria-label="Color"
aria-valuetext="Saturation 0%, Brightness 0%"
class="react-colorful__interactive"
role="slider"
tabindex="0"
aria-label="Saturation and Brightness"
aria-rowcount="100"
role="grid"
>
<div
class="react-colorful__pointer react-colorful__saturation-pointer"
style="top: 100%; left: 0%;"
aria-label="Brightness 0%"
aria-rowindex="0"
role="row"
>
<div
class="react-colorful__pointer-fill"
style="background-color: rgb(0, 0, 0);"
/>
aria-colcount="100"
aria-colindex="0"
aria-label="Saturation 0%"
class="react-colorful__interactive"
role="gridcell"
tabindex="0"
>
<div
class="react-colorful__pointer react-colorful__saturation-pointer"
style="top: 100%; left: 0%;"
>
<div
class="react-colorful__pointer-fill"
style="background-color: rgb(0, 0, 0);"
/>
</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -72,20 +85,33 @@ exports[`Renders proper alpha color picker markup 1`] = `
style="background-color: rgb(255, 0, 0);"
>
<div
aria-label="Color"
aria-valuetext="Saturation 100%, Brightness 100%"
class="react-colorful__interactive"
role="slider"
tabindex="0"
aria-label="Saturation and Brightness"
aria-rowcount="100"
role="grid"
>
<div
class="react-colorful__pointer react-colorful__saturation-pointer"
style="top: 0%; left: 100%;"
aria-label="Brightness 100%"
aria-rowindex="100"
role="row"
>
<div
class="react-colorful__pointer-fill"
style="background-color: rgb(255, 0, 0);"
/>
aria-colcount="100"
aria-colindex="100"
aria-label="Saturation 100%"
class="react-colorful__interactive"
role="gridcell"
tabindex="0"
>
<div
class="react-colorful__pointer react-colorful__saturation-pointer"
style="top: 0%; left: 100%;"
>
<div
class="react-colorful__pointer-fill"
style="background-color: rgb(255, 0, 0);"
/>
</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -151,20 +177,33 @@ exports[`Renders proper color picker markup 1`] = `
style="background-color: rgb(255, 0, 0);"
>
<div
aria-label="Color"
aria-valuetext="Saturation 100%, Brightness 100%"
class="react-colorful__interactive"
role="slider"
tabindex="0"
aria-label="Saturation and Brightness"
aria-rowcount="100"
role="grid"
>
<div
class="react-colorful__pointer react-colorful__saturation-pointer"
style="top: 0%; left: 100%;"
aria-label="Brightness 100%"
aria-rowindex="100"
role="row"
>
<div
class="react-colorful__pointer-fill"
style="background-color: rgb(255, 0, 0);"
/>
aria-colcount="100"
aria-colindex="100"
aria-label="Saturation 100%"
class="react-colorful__interactive"
role="gridcell"
tabindex="0"
>
<div
class="react-colorful__pointer react-colorful__saturation-pointer"
style="top: 0%; left: 100%;"
>
<div
class="react-colorful__pointer-fill"
style="background-color: rgb(255, 0, 0);"
/>
</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -203,20 +242,33 @@ exports[`Works with no props 1`] = `
style="background-color: rgb(255, 0, 0);"
>
<div
aria-label="Color"
aria-valuetext="Saturation 0%, Brightness 0%"
class="react-colorful__interactive"
role="slider"
tabindex="0"
aria-label="Saturation and Brightness"
aria-rowcount="100"
role="grid"
>
<div
class="react-colorful__pointer react-colorful__saturation-pointer"
style="top: 100%; left: 0%;"
aria-label="Brightness 0%"
aria-rowindex="0"
role="row"
>
<div
class="react-colorful__pointer-fill"
style="background-color: rgb(0, 0, 0);"
/>
aria-colcount="100"
aria-colindex="0"
aria-label="Saturation 0%"
class="react-colorful__interactive"
role="gridcell"
tabindex="0"
>
<div
class="react-colorful__pointer react-colorful__saturation-pointer"
style="top: 100%; left: 0%;"
>
<div
class="react-colorful__pointer-fill"
style="background-color: rgb(0, 0, 0);"
/>
</div>
</div>
</div>
</div>
</div>
Expand Down
11 changes: 9 additions & 2 deletions tests/components.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -323,13 +323,20 @@ it("Sets proper `aria-valuetext` attribute value", async () => {
const saturation = result.container.querySelector(
".react-colorful__saturation .react-colorful__interactive"
);
const brightness = saturation.parentElement;

expect(saturation.getAttribute("aria-valuetext")).toBe("Saturation 0%, Brightness 0%");
expect(saturation.getAttribute("aria-label")).toBe("Saturation 0%");
expect(saturation.getAttribute("aria-colindex")).toBe("0");
expect(brightness.getAttribute("aria-label")).toBe("Brightness 0%");
expect(brightness.getAttribute("aria-rowindex")).toBe("0");

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

expect(saturation.getAttribute("aria-valuetext")).toBe("Saturation 100%, Brightness 100%");
expect(saturation.getAttribute("aria-label")).toBe("Saturation 100%");
expect(saturation.getAttribute("aria-colindex")).toBe("100");
expect(brightness.getAttribute("aria-label")).toBe("Brightness 100%");
expect(brightness.getAttribute("aria-rowindex")).toBe("100");
});

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

0 comments on commit f86f9ce

Please sign in to comment.