Made color tool carousel better described for accessibility.
This commit is contained in:
+10
-3
@@ -87,17 +87,24 @@ function MobileRightNav({ onClick, isOpen }: MenuButtonProps) {
|
|||||||
function MobileFirstZone() {
|
function MobileFirstZone() {
|
||||||
return (
|
return (
|
||||||
<section className={styles.mobileFirstZone} aria-label="Color tools">
|
<section className={styles.mobileFirstZone} aria-label="Color tools">
|
||||||
<div className={styles.tabWrapper} role="tablist">
|
<div
|
||||||
|
className={styles.tabWrapper}
|
||||||
|
role="region"
|
||||||
|
aria-roledescription="carousel"
|
||||||
|
aria-label="Swipe left or right to view different tools"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
className={clsx(styles.tab, styles.colorPickerWrapper)}
|
className={clsx(styles.tab, styles.colorPickerWrapper)}
|
||||||
role="tabpanel"
|
role="group"
|
||||||
|
aria-roledescription="slide"
|
||||||
aria-label="Color Picker"
|
aria-label="Color Picker"
|
||||||
>
|
>
|
||||||
<ColorPicker />
|
<ColorPicker />
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className={clsx(styles.tab, styles.colorValuesWrapper)}
|
className={clsx(styles.tab, styles.colorValuesWrapper)}
|
||||||
role="tabpanel"
|
role="group"
|
||||||
|
aria-roledescription="slide"
|
||||||
aria-label="Color values"
|
aria-label="Color values"
|
||||||
>
|
>
|
||||||
<ColorValues />
|
<ColorValues />
|
||||||
|
|||||||
Reference in New Issue
Block a user