From 7464b16de24df464b2abc4ada6a53861d180b2aa Mon Sep 17 00:00:00 2001
From: Johan Girod <johangirod@gmail.com>
Date: Thu, 24 May 2018 14:38:21 +0200
Subject: [PATCH] =?UTF-8?q?:wheelchair:=20am=C3=A9liore=20l'accessibilit?=
 =?UTF-8?q?=C3=A9=20de=20la=20page=20r=C3=A8gle=20et=20de=20la=20modale=20?=
 =?UTF-8?q?(navigation=20clavier=20++)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                          |  2 ++
 source/components/AttachDictionary.js |  6 ++---
 source/components/Overlay.css         |  8 ++++++-
 source/components/Overlay.js          | 32 ++++++++++++++++++++-------
 source/components/SearchButton.js     | 32 ++++++++++++++++-----------
 source/components/rule/Algorithm.css  | 18 ++++++++++-----
 source/containers/Layout.css          |  2 ++
 yarn.lock                             | 16 ++++++++++++++
 8 files changed, 85 insertions(+), 31 deletions(-)

diff --git a/package.json b/package.json
index b31fd0d4b..80561f8a3 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,8 @@
 		"fantasy-tuples": "^1.0.0",
 		"file-loader": "^1.1.11",
 		"flow": "^0.2.3",
+		"focus-trap": "^2.4.5",
+		"focus-trap-react": "^3.1.2",
 		"fuse.js": "^3.2.0",
 		"global": "^4.3.2",
 		"google-translate-api": "^2.3.0",
diff --git a/source/components/AttachDictionary.js b/source/components/AttachDictionary.js
index 71ac28081..e568944c7 100644
--- a/source/components/AttachDictionary.js
+++ b/source/components/AttachDictionary.js
@@ -1,7 +1,7 @@
+import marked from 'Engine/marked'
 import { path } from 'ramda'
 import React, { Component } from 'react'
 import ReactDOM from 'react-dom'
-import marked from 'Engine/marked'
 import './Dictionary.css'
 import Overlay from './Overlay'
 
@@ -35,9 +35,7 @@ export let AttachDictionary = dictionary => Decorated =>
 					/>
 					{explanation && (
 						<Overlay
-							onOuterClick={() =>
-								this.setState({ term: null, explanation: null })
-							}>
+							onClose={() => this.setState({ term: null, explanation: null })}>
 							<div
 								id="dictionaryPanel"
 								dangerouslySetInnerHTML={{
diff --git a/source/components/Overlay.css b/source/components/Overlay.css
index 4b9b55e5b..c4276c152 100644
--- a/source/components/Overlay.css
+++ b/source/components/Overlay.css
@@ -20,7 +20,13 @@
 	position: fixed;
 	min-height: 6em;
 }
-
+#overlayCloseButton {
+	position: absolute;
+	top: 0;
+	font-size: 150%;
+	color: rgba(51, 51, 80, 0.8);
+	right: 0;
+}
 @media (min-width: 600px) {
 	#overlayContent {
 		width: 70%;
diff --git a/source/components/Overlay.js b/source/components/Overlay.js
index ed6963dd1..5fafed402 100644
--- a/source/components/Overlay.js
+++ b/source/components/Overlay.js
@@ -1,18 +1,34 @@
+import FocusTrap from 'focus-trap-react'
 import React, { Component } from 'react'
 import './Overlay.css'
 
 export default class Overlay extends Component {
 	render() {
+		const { onClose, children, otherProps } = this.props
 		return (
-			<div id="overlayWrapper" onClick={this.props.onOuterClick}>
-				<div
-					id="overlayContent"
-					onClick={e => {
-						e.preventDefault()
-						e.stopPropagation()
+			<div id="overlayWrapper" onClick={onClose}>
+				<FocusTrap
+					focusTrapOptions={{
+						onDeactivate: onClose
 					}}>
-					{this.props.children}
-				</div>
+					<div
+						aria-modal="true"
+						id="overlayContent"
+						{...otherProps}
+						onClick={e => {
+							e.preventDefault()
+							e.stopPropagation()
+						}}>
+						{children}
+						<button
+							aria-label="close"
+							onClick={onClose}
+							className="unstyledButton"
+							id="overlayCloseButton">
+							x
+						</button>
+					</div>
+				</FocusTrap>
 			</div>
 		)
 	}
diff --git a/source/components/SearchButton.js b/source/components/SearchButton.js
index 59d1c2069..f78c4ab05 100644
--- a/source/components/SearchButton.js
+++ b/source/components/SearchButton.js
@@ -1,16 +1,14 @@
+import withColours from 'Components/withColours'
 import React, { Component } from 'react'
 import { Trans, translate } from 'react-i18next'
 import { connect } from 'react-redux'
-import './SearchButton.css'
 import Overlay from './Overlay'
+import './SearchButton.css'
 import { SearchBar } from './pages/RulesList'
-import withColours from 'Components/withColours'
 
-@connect(
-	state => ({
-		flatRules: state.flatRules
-	})
-)
+@connect(state => ({
+	flatRules: state.flatRules
+}))
 @withColours
 @translate()
 export default class SearchButton extends Component {
@@ -39,17 +37,25 @@ export default class SearchButton extends Component {
 		return (
 			<div id="searchButton">
 				{this.state.visible ? (
-					<Overlay onOuterClick={this.close}>
-						<h2><Trans>Chercher une règle</Trans></h2>
-						<SearchBar showDefaultList={false} finally={this.close} rules={flatRules} />
+					<Overlay onClose={this.close}>
+						<h2>
+							<Trans>Chercher une règle</Trans>
+						</h2>
+						<SearchBar
+							showDefaultList={false}
+							finally={this.close}
+							rules={flatRules}
+						/>
 					</Overlay>
 				) : (
 					<button
 						onClick={() => this.setState({ visible: true })}
-						style={{ color: this.props.colours.colour }}
-					>
+						style={{ color: this.props.colours.colour }}>
 						<i className="fa fa-search" aria-hidden="true" />
-						<span> <Trans>Recherche</Trans></span>
+						<span>
+							{' '}
+							<Trans>Recherche</Trans>
+						</span>
 					</button>
 				)}
 			</div>
diff --git a/source/components/rule/Algorithm.css b/source/components/rule/Algorithm.css
index da09aa195..c518927e2 100644
--- a/source/components/rule/Algorithm.css
+++ b/source/components/rule/Algorithm.css
@@ -53,7 +53,8 @@
 	text-align: center;
 	font-size: 200%;
 	color: inherit;
-	margin: 1em 0;
+	margin-bottom: 2em;
+	margin-top: 0.4em;
 }
 
 #declenchement > ul {
@@ -88,7 +89,6 @@
 	padding: 0.2em 1em;
 	border: 1px solid;
 	border-color: inherit;
-	font-size: 90%;
 	font-weight: 600;
 	border-bottom: none;
 	border-right: none;
@@ -158,17 +158,25 @@
 	color: #f22c40;
 }
 
-.variable .name {
+.variable a {
 	color: blue;
+	border: 1px solid transparent;
 	border-bottom: 1px solid blue;
 	text-align: center;
 	font-weight: 600;
 	font-size: 90%;
+	display: inline-block;
 	white-space: nowrap;
 }
 
-.variable .name:hover {
-	color: rgb(0, 0, 200);
+.variable a:hover {
+	color: rgb(0, 0, 150) !important;
+	border-bottom-color: rgb(0, 0, 150);
+}
+.variable a:focus {
+	border: 1px dotted;
+	outline: none;
+
 }
 
 .percentage .name {
diff --git a/source/containers/Layout.css b/source/containers/Layout.css
index 6da8dd81d..672d53ac0 100644
--- a/source/containers/Layout.css
+++ b/source/containers/Layout.css
@@ -50,6 +50,8 @@ h2 {
 .unstyledButton {
 	color: inherit;
 	padding: 0.3em 1em;
+	font-weight: inherit;
+	font-family: inherit;
 	border: none;
 	border-radius: 0;
 	font-size: inherit;
diff --git a/yarn.lock b/yarn.lock
index 989b4913f..a64b98eac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3961,6 +3961,18 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.1"
     readable-stream "^2.0.4"
 
+focus-trap-react@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/focus-trap-react/-/focus-trap-react-3.1.2.tgz#4dd021ccd028bbd3321147d132cdf7585d6d1394"
+  dependencies:
+    focus-trap "^2.0.1"
+
+focus-trap@^2.0.1, focus-trap@^2.4.5:
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-2.4.5.tgz#91c9c9ffb907f8f4446d80202dda9c12c2853ddb"
+  dependencies:
+    tabbable "^1.0.3"
+
 follow-redirects@^1.0.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.4.1.tgz#d8120f4518190f55aac65bb6fc7b85fcd666d6aa"
@@ -9198,6 +9210,10 @@ symbol-tree@^3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
 
+tabbable@^1.0.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-1.1.3.tgz#0e4ee376f3631e42d7977a074dbd2b3827843081"
+
 table@4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/table/-/table-4.0.2.tgz#a33447375391e766ad34d3486e6e2aedc84d2e36"