betagouv
/
mon-entreprise
mirror of https://github.com/betagouv/mon-entreprise
1
0
Fork 0
Code Releases Activity

♿ améliore l'accessibilité de la page règle et de la modale (navigation clavier ++)

pull/234/head
Johan Girod 2018-05-24 14:38:21 +02:00
parent 11a42d6b55
commit 7464b16de2
8 changed files with 85 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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",

6
source/components/AttachDictionary.js
View File

@ -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={{

8
source/components/Overlay.css
View File

@ -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%;

32
source/components/Overlay.js
View File

@ -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>
)
}

32
source/components/SearchButton.js
View File

@ -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>

18
source/components/rule/Algorithm.css
View File

@ -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 {

2
source/containers/Layout.css
View File

@ -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;

16
yarn.lock
View File

@ -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"