Skip to content

Commit bd5c848

Browse files
tonglingchencorevo
tonglingchen
and
corevo
authored
accessibility fixes - color contrast, focus indicator, and tab order (#972)
* accessibility fixes * fix lint errors * fix lint errors * fix test failure * Fix: some controls are out of view port when zoom to 200% * fix conflicts * fix lint errors * review comments * review comments * reset outline * review comments * button directions * update wording; add comment * removed unnecessary class Co-authored-by: Tomer <[email protected]>
1 parent fd05c26 commit bd5c848

File tree

26 files changed

+200
-203
lines changed

26 files changed

+200
-203
lines changed

‎packages/selenium-ide/src/neo/components/ActionButtons/ActionButton/style.css‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
height: 24px;
55
padding: 0;
66
margin: 1px 0;
7-
outline: 0;
87
mask-repeat: no-repeat;
98
border-style: none;
109
font-size: 22px;
@@ -18,7 +17,6 @@
1817
}
1918

2019
.btn-action:focus {
21-
border-color: rgba(0, 0, 0, 0.25);
2220
box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, 0.7);
2321
}
2422

‎packages/selenium-ide/src/neo/components/ActionButtons/Open/style.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@
2222
}
2323

2424
.file-input > input:focus ~ label {
25-
border-color: rgba(0, 0, 0, 0.25);
2625
box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, 0.7);
26+
outline: var(--selected-border-color) 1px solid;
2727
}
2828

2929
.file-input > label > i {

‎packages/selenium-ide/src/neo/components/ActionButtons/Record/style.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
}
44

55
.si-record {
6-
color: #ec2f2a;
6+
color: #b00000;
77
animation: none;
88
}
99

1010
.si-record:hover {
11-
color: #f56660;
11+
color: #de2a00;
1212
}
1313

1414
.si-record.active::before {

‎packages/selenium-ide/src/neo/components/AutoComplete/index.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,8 @@ export default class AutoComplete extends React.Component {
9595
id={idItem}
9696
key={this.props.getItemKey ? this.props.getItemKey(item) : item}
9797
style={{
98-
background: isHighlighted ? '#f3f3f3' : 'white',
98+
background: isHighlighted ? '#5c5c5c' : 'white',
99+
color: isHighlighted ? 'white' : '#3f3f3f',
99100
padding: '8px',
100101
}}
101102
>

‎packages/selenium-ide/src/neo/components/Checkbox/style.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,10 @@ input[type='checkbox'].checkbox + label span {
3232
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
3333
}
3434

35+
input[type='checkbox'].checkbox:focus + label span {
36+
outline: var(--selected-border-color) 1px solid;
37+
}
38+
3539
input[type='checkbox'].checkbox:disabled + label span {
3640
color: rgba(128, 128, 128, 0.6);
3741
background-color: whitesmoke;

‎packages/selenium-ide/src/neo/components/Dialogs/Alert/index.jsx‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -73,22 +73,21 @@ export default class AlertDialog extends React.Component {
7373
<DialogContainer
7474
type={this.state.options.type ? this.state.options.type : 'info'}
7575
title={this.state.options.title}
76-
renderFooter={() => (
77-
<span className="right">
78-
{this.state.options.cancelLabel ? (
79-
<FlatButton onClick={this.close.bind(this, false)}>
80-
{this.state.options.cancelLabel}
81-
</FlatButton>
82-
) : null}
83-
<FlatButton
84-
type="submit"
85-
onClick={this.close.bind(this, true)}
86-
autoFocus
87-
>
88-
{this.state.options.confirmLabel || 'OK'}
76+
buttons={[
77+
this.state.options.cancelLabel ? (
78+
<FlatButton onClick={this.close.bind(this, false)} key="cancel">
79+
{this.state.options.cancelLabel}
8980
</FlatButton>
90-
</span>
91-
)}
81+
) : null,
82+
<FlatButton
83+
type="submit"
84+
onClick={this.close.bind(this, true)}
85+
key="ok"
86+
autoFocus
87+
>
88+
{this.state.options.confirmLabel || 'OK'}
89+
</FlatButton>,
90+
]}
9291
onRequestClose={this.close.bind(this, false)}
9392
modalTitle={modalTitleElement}
9493
modalDescription={modalDescriptionElement}

‎packages/selenium-ide/src/neo/components/Dialogs/BaseUrl/index.jsx‎

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -70,25 +70,21 @@ class BaseUrlDialogContents extends React.Component {
7070
: "Set your project's base URL"
7171
}
7272
type={this.props.isInvalid ? 'warn' : 'info'}
73-
renderFooter={() => (
74-
<div
75-
className="right"
76-
style={{
77-
display: 'flex',
73+
buttons={[
74+
<FlatButton onClick={this.props.cancel} key="cancel">
75+
cancel
76+
</FlatButton>,
77+
<FlatButton
78+
type="submit"
79+
disabled={!this.urlRegex.test(this.state.url)}
80+
onClick={() => {
81+
this.props.onUrlSelection(this.state.url)
7882
}}
83+
key="ok"
7984
>
80-
<FlatButton onClick={this.props.cancel}>cancel</FlatButton>
81-
<FlatButton
82-
type="submit"
83-
disabled={!this.urlRegex.test(this.state.url)}
84-
onClick={() => {
85-
this.props.onUrlSelection(this.state.url)
86-
}}
87-
>
88-
{this.props.confirmLabel || 'confirm'}
89-
</FlatButton>
90-
</div>
91-
)}
85+
{this.props.confirmLabel || 'confirm'}
86+
</FlatButton>,
87+
]}
9288
onRequestClose={this.props.cancel}
9389
modalTitle={BaseUrlDialogContents.modalTitleElement}
9490
modalDescription={BaseUrlDialogContents.modalDescriptionElement}

‎packages/selenium-ide/src/neo/components/Dialogs/Dialog/index.jsx‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import PropTypes from 'prop-types'
2020
import classNames from 'classnames'
2121
import RemoveButton from '../../ActionButtons/Remove'
2222
import warn from '../../../assets/images/warning.png'
23+
import UiState from '../../../stores/view/UiState'
2324
import './style.css'
2425

2526
const images = {
@@ -32,6 +33,7 @@ export default class DialogContainer extends React.Component {
3233
title: PropTypes.string,
3334
type: PropTypes.oneOf(['info', 'warn']).isRequired,
3435
children: PropTypes.node,
36+
buttons: PropTypes.array,
3537
renderTitle: PropTypes.func,
3638
renderImage: PropTypes.func,
3739
renderFooter: PropTypes.func,
@@ -51,6 +53,18 @@ export default class DialogContainer extends React.Component {
5153
this.props.onRequestClose()
5254
}
5355
}
56+
57+
renderButtons() {
58+
if (!this.props.buttons) {
59+
return null
60+
}
61+
const buttons = (UiState.dialogButtonDirection === 'reversed'
62+
? this.props.buttons.slice().reverse()
63+
: this.props.buttons
64+
).filter(button => button !== null)
65+
return <div className="right">{buttons}</div>
66+
}
67+
5468
render() {
5569
const coverImage = this.props.renderImage ? (
5670
this.props.renderImage()
@@ -101,8 +115,11 @@ export default class DialogContainer extends React.Component {
101115
}}
102116
>
103117
<div className="dialog__main">{this.props.children}</div>
104-
{this.props.renderFooter ? (
105-
<div className="dialog__footer">{this.props.renderFooter()}</div>
118+
{this.props.renderFooter || this.props.buttons ? (
119+
<div className="dialog__footer">
120+
{this.renderButtons()}
121+
{this.props.renderFooter ? this.props.renderFooter() : null}
122+
</div>
106123
) : null}
107124
</form>
108125
</div>

‎packages/selenium-ide/src/neo/components/Dialogs/Dialog/style.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
}
1717

1818
.dialog.dialog--info .dialog__header {
19-
background-color: #40a6ff;
19+
background-color: #106ebe;
2020
}
2121

2222
.dialog.dialog--warn .dialog__header {

‎packages/selenium-ide/src/neo/components/Dialogs/Export/index.jsx‎

Lines changed: 35 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -89,41 +89,42 @@ class ExportContent extends React.Component {
8989
<DialogContainer
9090
title="Select language"
9191
onRequestClose={this.props.cancel}
92-
renderFooter={() => (
93-
<span className="right">
94-
<FlatButton onClick={this.props.cancelSelection}>cancel</FlatButton>
95-
<FlatButton
96-
disabled={!this.state.selectedLanguages.length}
97-
type="submit"
98-
onClick={() => {
99-
this.props
100-
.completeSelection(
101-
this.state.selectedLanguages,
102-
this.state.enableOriginTracing,
103-
{
104-
gridUrl: this.state.enableGridConfig
105-
? this.state.gridConfigUrl
106-
: undefined,
107-
},
108-
this.state.enableDescriptionAsComment
109-
)
110-
.catch(error => {
111-
this.props.cancelSelection()
112-
ModalState.showAlert({
113-
title: 'Unable to complete code export',
114-
description: error.message,
115-
confirmLabel: 'OK',
116-
})
92+
buttons={[
93+
<FlatButton onClick={this.props.cancelSelection} key="cancel">
94+
cancel
95+
</FlatButton>,
96+
<FlatButton
97+
disabled={!this.state.selectedLanguages.length}
98+
type="submit"
99+
onClick={() => {
100+
this.props
101+
.completeSelection(
102+
this.state.selectedLanguages,
103+
this.state.enableOriginTracing,
104+
{
105+
gridUrl: this.state.enableGridConfig
106+
? this.state.gridConfigUrl
107+
: undefined,
108+
},
109+
this.state.enableDescriptionAsComment
110+
)
111+
.catch(error => {
112+
this.props.cancelSelection()
113+
ModalState.showAlert({
114+
title: 'Unable to complete code export',
115+
description: error.message,
116+
confirmLabel: 'OK',
117117
})
118-
}}
119-
style={{
120-
marginRight: '0',
121-
}}
122-
>
123-
export
124-
</FlatButton>
125-
</span>
126-
)}
118+
})
119+
}}
120+
style={{
121+
marginRight: '0',
122+
}}
123+
key="ok"
124+
>
125+
export
126+
</FlatButton>,
127+
]}
127128
modalTitle={ExportContent.modalTitleElement}
128129
modalDescription={ExportContent.modalDescriptionElement}
129130
>

0 commit comments

Comments
 (0)