From f3a899f2c54834f42818bb553d0d8458a2b21699 Mon Sep 17 00:00:00 2001 From: Vlad Shilov Date: Fri, 24 Sep 2021 10:01:16 +0300 Subject: [PATCH] Better a11y: Use `grid` role in `Saturation` component --- src/components/common/Interactive.tsx | 4 ++-- src/components/common/Saturation.tsx | 32 ++++++++++++++++----------- 2 files changed, 21 insertions(+), 15 deletions(-) diff --git a/src/components/common/Interactive.tsx b/src/components/common/Interactive.tsx index 5f041667..922d07ae 100644 --- a/src/components/common/Interactive.tsx +++ b/src/components/common/Interactive.tsx @@ -36,7 +36,7 @@ const isInvalid = (event: MouseEvent | TouchEvent, hasTouch: boolean): boolean = return hasTouch && !isTouch(event); }; -interface Props { +interface Props extends React.HTMLAttributes { onMove: (interaction: Interaction) => void; onKey: (offset: Interaction) => void; children: React.ReactNode; @@ -118,7 +118,6 @@ const InteractiveBase = ({ onMove, onKey, ...rest }: Props) => { return (
{ onKeyDown={handleKeyDown} tabIndex={0} role="slider" + {...rest} /> ); }; diff --git a/src/components/common/Saturation.tsx b/src/components/common/Saturation.tsx index a197d569..9557e6c5 100644 --- a/src/components/common/Saturation.tsx +++ b/src/components/common/Saturation.tsx @@ -33,19 +33,25 @@ const SaturationBase = ({ hsva, onChange }: Props) => { return (
- - - +
+
+ + + +
+
); };