From cec68e7cf9cbd7fd95224180b3a0375f96608dd3 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Fri, 19 Oct 2018 20:06:34 +0200
Subject: [PATCH] Make the color picker saturation control work with windows
 screen readers. (#10807)

---
 packages/components/src/color-picker/saturation.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/color-picker/saturation.js b/packages/components/src/color-picker/saturation.js
index 6ba852756609a9..8e86655025e920 100644
--- a/packages/components/src/color-picker/saturation.js
+++ b/packages/components/src/color-picker/saturation.js
@@ -150,7 +150,7 @@ export class Saturation extends Component {
 			home: () => this.saturate( -1 ),
 		};
 
-		/* eslint-disable jsx-a11y/no-static-element-interactions */
+		/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/no-noninteractive-element-interactions */
 		return (
 			<KeyboardShortcuts shortcuts={ shortcuts }>
 				<div
@@ -159,7 +159,9 @@ export class Saturation extends Component {
 					ref={ this.container }
 					onMouseDown={ this.handleMouseDown }
 					onTouchMove={ this.handleChange }
-					onTouchStart={ this.handleChange }>
+					onTouchStart={ this.handleChange }
+					role="application"
+				>
 					<div className="components-color-picker__saturation-white" />
 					<div className="components-color-picker__saturation-black" />
 					<button
@@ -179,7 +181,7 @@ export class Saturation extends Component {
 				</div>
 			</KeyboardShortcuts>
 		);
-		/* eslint-enable jsx-a11y/no-static-element-interactions */
+		/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/no-noninteractive-element-interactions */
 	}
 }