Skip to content

Commit 194d1ce

Browse files
kewithamkewitham
authored
fix: accessibility - color contrast and keyboard navigation (#6757)
* fix: accessibility color contrast, keyboard navigation, and label updates * Update ViewStyleControl.js * Update EditorControl.js * Update MediaLibraryHeader.js * Update SettingsDropdown.js * Update ObjectWidgetTopBar.js * Update Toolbar.js * Update ListControl.spec.js.snap * Update DateTimeControl.js * Update DateTimeControl.js * Update DateTimeControl.js * Update MediaLibraryCard.spec.js.snap * Update index.js
1 parent 35bc2d4 commit 194d1ce

File tree

8 files changed

+51
-33
lines changed

8 files changed

+51
-33
lines changed

‎packages/netlify-cms-core/src/components/Editor/EditorToolbar.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const styles = {
3737
`,
3838
publishedButton: css`
3939
background-color: ${colorsRaw.tealLight};
40-
color: ${colorsRaw.teal};
40+
color: ${colorsRaw.tealDark};
4141
`,
4242
};
4343

‎packages/netlify-cms-core/src/components/Editor/__tests__/__snapshots__/EditorToolbar.spec.js.snap

+27-27
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ exports[`EditorToolbar should render normal save button 1`] = `
9191
text-overflow: ellipsis;
9292
display: block;
9393
background-color: #fcefea;
94-
color: #ff003b;
94+
color: #D60032;
9595
}
9696
9797
@media (max-width:1200px) {
@@ -200,7 +200,7 @@ exports[`EditorToolbar should render normal save button 1`] = `
200200
class="emotion-21 emotion-22"
201201
>
202202
<mock-link
203-
classname="css-6yv32w-ToolbarSectionBackLink-toolbarSection evqrzhe8"
203+
classname="css-1jppxrb-ToolbarSectionBackLink-toolbarSection evqrzhe8"
204204
to=""
205205
>
206206
<div
@@ -354,7 +354,7 @@ exports[`EditorToolbar should render normal save button 2`] = `
354354
text-overflow: ellipsis;
355355
display: block;
356356
background-color: #fcefea;
357-
color: #ff003b;
357+
color: #D60032;
358358
}
359359
360360
@media (max-width:1200px) {
@@ -463,7 +463,7 @@ exports[`EditorToolbar should render normal save button 2`] = `
463463
class="emotion-21 emotion-22"
464464
>
465465
<mock-link
466-
classname="css-6yv32w-ToolbarSectionBackLink-toolbarSection evqrzhe8"
466+
classname="css-1jppxrb-ToolbarSectionBackLink-toolbarSection evqrzhe8"
467467
to=""
468468
>
469469
<div
@@ -627,7 +627,7 @@ exports[`EditorToolbar should render with default props 1`] = `
627627
text-overflow: ellipsis;
628628
display: block;
629629
background-color: #ddf5f9;
630-
color: #17a2b8;
630+
color: #117888;
631631
}
632632
633633
@media (max-width:1200px) {
@@ -652,7 +652,7 @@ exports[`EditorToolbar should render with default props 1`] = `
652652
text-overflow: ellipsis;
653653
display: block;
654654
background-color: #fcefea;
655-
color: #ff003b;
655+
color: #D60032;
656656
}
657657
658658
@media (max-width:1200px) {
@@ -695,7 +695,7 @@ exports[`EditorToolbar should render with default props 1`] = `
695695
class="emotion-18 emotion-19"
696696
>
697697
<mock-link
698-
classname="css-6yv32w-ToolbarSectionBackLink-toolbarSection evqrzhe8"
698+
classname="css-1jppxrb-ToolbarSectionBackLink-toolbarSection evqrzhe8"
699699
to=""
700700
>
701701
<div
@@ -849,7 +849,7 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
849849
text-overflow: ellipsis;
850850
display: block;
851851
background-color: #fcefea;
852-
color: #ff003b;
852+
color: #D60032;
853853
}
854854
855855
@media (max-width:1200px) {
@@ -980,7 +980,7 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
980980
class="emotion-23 emotion-24"
981981
>
982982
<mock-link
983-
classname="css-6yv32w-ToolbarSectionBackLink-toolbarSection evqrzhe8"
983+
classname="css-1jppxrb-ToolbarSectionBackLink-toolbarSection evqrzhe8"
984984
to=""
985985
>
986986
<div
@@ -1310,7 +1310,7 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
13101310
class="emotion-30 emotion-31"
13111311
>
13121312
<mock-link
1313-
classname="css-6yv32w-ToolbarSectionBackLink-toolbarSection evqrzhe8"
1313+
classname="css-1jppxrb-ToolbarSectionBackLink-toolbarSection evqrzhe8"
13141314
to=""
13151315
>
13161316
<div
@@ -1503,7 +1503,7 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
15031503
text-overflow: ellipsis;
15041504
display: block;
15051505
background-color: #fcefea;
1506-
color: #ff003b;
1506+
color: #D60032;
15071507
}
15081508
15091509
@media (max-width:1200px) {
@@ -1634,7 +1634,7 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
16341634
class="emotion-23 emotion-24"
16351635
>
16361636
<mock-link
1637-
classname="css-6yv32w-ToolbarSectionBackLink-toolbarSection evqrzhe8"
1637+
classname="css-1jppxrb-ToolbarSectionBackLink-toolbarSection evqrzhe8"
16381638
to=""
16391639
>
16401640
<div
@@ -1946,7 +1946,7 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
19461946
class="emotion-28 emotion-29"
19471947
>
19481948
<mock-link
1949-
classname="css-6yv32w-ToolbarSectionBackLink-toolbarSection evqrzhe8"
1949+
classname="css-1jppxrb-ToolbarSectionBackLink-toolbarSection evqrzhe8"
19501950
to=""
19511951
>
19521952
<div
@@ -2134,7 +2134,7 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
21342134
text-overflow: ellipsis;
21352135
display: block;
21362136
background-color: #fcefea;
2137-
color: #ff003b;
2137+
color: #D60032;
21382138
}
21392139
21402140
@media (max-width:1200px) {
@@ -2265,7 +2265,7 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
22652265
class="emotion-23 emotion-24"
22662266
>
22672267
<mock-link
2268-
classname="css-6yv32w-ToolbarSectionBackLink-toolbarSection evqrzhe8"
2268+
classname="css-1jppxrb-ToolbarSectionBackLink-toolbarSection evqrzhe8"
22692269
to=""
22702270
>
22712271
<div
@@ -2595,7 +2595,7 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
25952595
class="emotion-30 emotion-31"
25962596
>
25972597
<mock-link
2598-
classname="css-6yv32w-ToolbarSectionBackLink-toolbarSection evqrzhe8"
2598+
classname="css-1jppxrb-ToolbarSectionBackLink-toolbarSection evqrzhe8"
25992599
to=""
26002600
>
26012601
<div
@@ -2788,7 +2788,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
27882788
text-overflow: ellipsis;
27892789
display: block;
27902790
background-color: #fcefea;
2791-
color: #ff003b;
2791+
color: #D60032;
27922792
}
27932793
27942794
@media (max-width:1200px) {
@@ -2862,7 +2862,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
28622862
class="emotion-18 emotion-19"
28632863
>
28642864
<mock-link
2865-
classname="css-6yv32w-ToolbarSectionBackLink-toolbarSection evqrzhe8"
2865+
classname="css-1jppxrb-ToolbarSectionBackLink-toolbarSection evqrzhe8"
28662866
to=""
28672867
>
28682868
<div
@@ -3064,7 +3064,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
30643064
class="emotion-16 emotion-17"
30653065
>
30663066
<mock-link
3067-
classname="css-6yv32w-ToolbarSectionBackLink-toolbarSection evqrzhe8"
3067+
classname="css-1jppxrb-ToolbarSectionBackLink-toolbarSection evqrzhe8"
30683068
to=""
30693069
>
30703070
<div
@@ -3212,7 +3212,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
32123212
text-overflow: ellipsis;
32133213
display: block;
32143214
background-color: #fcefea;
3215-
color: #ff003b;
3215+
color: #D60032;
32163216
}
32173217
32183218
@media (max-width:1200px) {
@@ -3286,7 +3286,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
32863286
class="emotion-18 emotion-19"
32873287
>
32883288
<mock-link
3289-
classname="css-6yv32w-ToolbarSectionBackLink-toolbarSection evqrzhe8"
3289+
classname="css-1jppxrb-ToolbarSectionBackLink-toolbarSection evqrzhe8"
32903290
to=""
32913291
>
32923292
<div
@@ -3439,7 +3439,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
34393439
text-overflow: ellipsis;
34403440
display: block;
34413441
background-color: #fcefea;
3442-
color: #ff003b;
3442+
color: #D60032;
34433443
}
34443444
34453445
@media (max-width:1200px) {
@@ -3513,7 +3513,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
35133513
class="emotion-18 emotion-19"
35143514
>
35153515
<mock-link
3516-
classname="css-6yv32w-ToolbarSectionBackLink-toolbarSection evqrzhe8"
3516+
classname="css-1jppxrb-ToolbarSectionBackLink-toolbarSection evqrzhe8"
35173517
to=""
35183518
>
35193519
<div
@@ -3666,7 +3666,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
36663666
text-overflow: ellipsis;
36673667
display: block;
36683668
background-color: #fcefea;
3669-
color: #ff003b;
3669+
color: #D60032;
36703670
}
36713671
36723672
@media (max-width:1200px) {
@@ -3740,7 +3740,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
37403740
class="emotion-18 emotion-19"
37413741
>
37423742
<mock-link
3743-
classname="css-6yv32w-ToolbarSectionBackLink-toolbarSection evqrzhe8"
3743+
classname="css-1jppxrb-ToolbarSectionBackLink-toolbarSection evqrzhe8"
37443744
to=""
37453745
>
37463746
<div
@@ -3893,7 +3893,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
38933893
text-overflow: ellipsis;
38943894
display: block;
38953895
background-color: #fcefea;
3896-
color: #ff003b;
3896+
color: #D60032;
38973897
}
38983898
38993899
@media (max-width:1200px) {
@@ -3967,7 +3967,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
39673967
class="emotion-18 emotion-19"
39683968
>
39693969
<mock-link
3970-
classname="css-6yv32w-ToolbarSectionBackLink-toolbarSection evqrzhe8"
3970+
classname="css-1jppxrb-ToolbarSectionBackLink-toolbarSection evqrzhe8"
39713971
to=""
39723972
>
39733973
<div

‎packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryCardGrid.js

+1
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ function CardWrapper(props) {
3636

3737
return (
3838
<div
39+
tabIndex="0"
3940
style={{
4041
...style,
4142
left: style.left + gutter * columnIndex,

‎packages/netlify-cms-core/src/components/UI/FileUploadButton.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
33

44
export function FileUploadButton({ label, imagesOnly, onChange, disabled, className }) {
55
return (
6-
<label className={`nc-fileUploadButton ${className || ''}`}>
6+
<label tabIndex={'0'} className={`nc-fileUploadButton ${className || ''}`}>
77
<span>{label}</span>
88
<input
99
type="file"

‎packages/netlify-cms-ui-default/src/Dropdown.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ function StyledMenuItem({ isActive, isCheckedItem = false, ...props }) {
5959
&:not(:focus),
6060
&:not(:active) {
6161
background-color: ${isActive ? colors.activeBackground : 'inherit'};
62-
color: ${isActive ? colors.active : 'inherit'};
62+
color: ${isActive ? colors.active : '#313d3e'};
6363
${isCheckedItem ? 'display: flex; justify-content: start' : ''};
6464
}
6565
&:hover {

‎packages/netlify-cms-ui-default/src/styles.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,12 @@ const colorsRaw = {
4242
brown: '#754e00',
4343
yellow: '#ffee9c',
4444
red: '#ff003b',
45+
redDark: '#D60032',
4546
redLight: '#fcefea',
4647
purple: '#70399f',
4748
purpleLight: '#f6d8ff',
4849
teal: '#17a2b8',
50+
tealDark: '#117888',
4951
tealLight: '#ddf5f9',
5052
};
5153

@@ -76,7 +78,7 @@ const colors = {
7678
errorText: colorsRaw.red,
7779
errorBackground: colorsRaw.redLight,
7880
textFieldBorder: '#dfdfe3',
79-
controlLabel: '#7a8291',
81+
controlLabel: '#5D626F',
8082
checkerboardLight: '#f2f2f2',
8183
checkerboardDark: '#e6e6e6',
8284
mediaDraftText: colorsRaw.purple,
@@ -233,7 +235,7 @@ const buttons = {
233235
`,
234236
lightRed: css`
235237
background-color: ${colorsRaw.redLight};
236-
color: ${colorsRaw.red};
238+
color: ${colorsRaw.redDark};
237239
`,
238240
lightBlue: css`
239241
background-color: ${colorsRaw.blueLight};
@@ -338,7 +340,7 @@ const components = {
338340
${buttons.button};
339341
background-color: transparent;
340342
border-radius: 0;
341-
color: ${colorsRaw.gray};
343+
color: ${colorsRaw.grayDark};
342344
font-weight: 500;
343345
border-bottom: 1px solid #eaebf1;
344346
padding: 8px 14px;

‎packages/netlify-cms-widget-markdown/src/MarkdownControl/RawEditor.js

+7
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,12 @@ export default class RawEditor extends React.Component {
6060
}
6161
}
6262

63+
handleKeyDown = (event, editor) => {
64+
if (isHotkey('esc', event)) {
65+
editor.blur();
66+
}
67+
};
68+
6369
handleCopy = (event, editor) => {
6470
const { getAsset, resolveWidget } = this.props;
6571
const markdown = Plain.serialize(Value.create({ document: editor.value.fragment }));
@@ -137,6 +143,7 @@ export default class RawEditor extends React.Component {
137143
onPaste={this.handlePaste}
138144
onCut={this.handleCut}
139145
onCopy={this.handleCopy}
146+
onKeyDown={this.handleKeyDown}
140147
ref={this.processRef}
141148
/>
142149
)}

‎packages/netlify-cms-widget-markdown/src/MarkdownControl/VisualEditor.js

+8
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { css as coreCss, ClassNames } from '@emotion/core';
77
import { get, isEmpty, debounce } from 'lodash';
88
import { Value, Document, Block, Text } from 'slate';
99
import { Editor as Slate } from 'slate-react';
10+
import isHotkey from 'is-hotkey';
1011
import { lengths, fonts, zIndex } from 'netlify-cms-ui-default';
1112

1213
import { editorStyleVars, EditorControlBar } from '../styles';
@@ -194,6 +195,12 @@ export default class Editor extends React.Component {
194195
this.editor.moveToEndOfDocument();
195196
};
196197

198+
handleKeyDown = (event, editor) => {
199+
if (isHotkey('esc', event)) {
200+
editor.blur();
201+
}
202+
};
203+
197204
handleDocumentChange = debounce(editor => {
198205
const { onChange } = this.props;
199206
const raw = editor.value.document.toJS();
@@ -266,6 +273,7 @@ export default class Editor extends React.Component {
266273
schema={this.schema}
267274
plugins={this.plugins}
268275
onChange={this.handleChange}
276+
onKeyDown={this.handleKeyDown}
269277
ref={this.processRef}
270278
spellCheck
271279
/>

0 commit comments

Comments
 (0)