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
decaporg · May 16, 2023 · 194d1ce · 194d1ce
1 parent 35bc2d4
commit 194d1ce
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 33 deletions.
diff --git a/packages/netlify-cms-core/src/components/Editor/EditorToolbar.js b/packages/netlify-cms-core/src/components/Editor/EditorToolbar.js
@@ -37,7 +37,7 @@ const styles = {
   `,
   publishedButton: css`
     background-color: ${colorsRaw.tealLight};
-    color: ${colorsRaw.teal};
+    color: ${colorsRaw.tealDark};
   `,
 };
 

diff --git a/...netlify-cms-core/src/components/Editor/__tests__/__snapshots__/EditorToolbar.spec.js.snap b/...netlify-cms-core/src/components/Editor/__tests__/__snapshots__/EditorToolbar.spec.js.snap
@@ -91,7 +91,7 @@ exports[`EditorToolbar should render normal save button 1`] = `
   text-overflow: ellipsis;
   display: block;
   background-color: #fcefea;
-  color: #ff003b;
+  color: #D60032;
 }
 
 @media (max-width:1200px) {
@@ -200,7 +200,7 @@ exports[`EditorToolbar should render normal save button 1`] = `
     class="emotion-21 emotion-22"
   >
     <mock-link
-      classname="css-6yv32w-ToolbarSectionBackLink-toolbarSection evqrzhe8"
+      classname="css-1jppxrb-ToolbarSectionBackLink-toolbarSection evqrzhe8"
       to=""
     >
       <div
@@ -354,7 +354,7 @@ exports[`EditorToolbar should render normal save button 2`] = `
   text-overflow: ellipsis;
   display: block;
   background-color: #fcefea;
-  color: #ff003b;
+  color: #D60032;
 }
 
 @media (max-width:1200px) {
@@ -463,7 +463,7 @@ exports[`EditorToolbar should render normal save button 2`] = `
     class="emotion-21 emotion-22"
   >
     <mock-link
-      classname="css-6yv32w-ToolbarSectionBackLink-toolbarSection evqrzhe8"
+      classname="css-1jppxrb-ToolbarSectionBackLink-toolbarSection evqrzhe8"
       to=""
     >
       <div
@@ -627,7 +627,7 @@ exports[`EditorToolbar should render with default props 1`] = `
   text-overflow: ellipsis;
   display: block;
   background-color: #ddf5f9;
-  color: #17a2b8;
+  color: #117888;
 }
 
 @media (max-width:1200px) {
@@ -652,7 +652,7 @@ exports[`EditorToolbar should render with default props 1`] = `
   text-overflow: ellipsis;
   display: block;
   background-color: #fcefea;
-  color: #ff003b;
+  color: #D60032;
 }
 
 @media (max-width:1200px) {
@@ -695,7 +695,7 @@ exports[`EditorToolbar should render with default props 1`] = `
     class="emotion-18 emotion-19"
   >
     <mock-link
-      classname="css-6yv32w-ToolbarSectionBackLink-toolbarSection evqrzhe8"
+      classname="css-1jppxrb-ToolbarSectionBackLink-toolbarSection evqrzhe8"
       to=""
     >
       <div
@@ -849,7 +849,7 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
   text-overflow: ellipsis;
   display: block;
   background-color: #fcefea;
-  color: #ff003b;
+  color: #D60032;
 }
 
 @media (max-width:1200px) {
@@ -980,7 +980,7 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
     class="emotion-23 emotion-24"
   >
     <mock-link
-      classname="css-6yv32w-ToolbarSectionBackLink-toolbarSection evqrzhe8"
+      classname="css-1jppxrb-ToolbarSectionBackLink-toolbarSection evqrzhe8"
       to=""
     >
       <div
@@ -1310,7 +1310,7 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
     class="emotion-30 emotion-31"
   >
     <mock-link
-      classname="css-6yv32w-ToolbarSectionBackLink-toolbarSection evqrzhe8"
+      classname="css-1jppxrb-ToolbarSectionBackLink-toolbarSection evqrzhe8"
       to=""
     >
       <div
@@ -1503,7 +1503,7 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   text-overflow: ellipsis;
   display: block;
   background-color: #fcefea;
-  color: #ff003b;
+  color: #D60032;
 }
 
 @media (max-width:1200px) {
@@ -1634,7 +1634,7 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
     class="emotion-23 emotion-24"
   >
     <mock-link
-      classname="css-6yv32w-ToolbarSectionBackLink-toolbarSection evqrzhe8"
+      classname="css-1jppxrb-ToolbarSectionBackLink-toolbarSection evqrzhe8"
       to=""
     >
       <div
@@ -1946,7 +1946,7 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
     class="emotion-28 emotion-29"
   >
     <mock-link
-      classname="css-6yv32w-ToolbarSectionBackLink-toolbarSection evqrzhe8"
+      classname="css-1jppxrb-ToolbarSectionBackLink-toolbarSection evqrzhe8"
       to=""
     >
       <div
@@ -2134,7 +2134,7 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   text-overflow: ellipsis;
   display: block;
   background-color: #fcefea;
-  color: #ff003b;
+  color: #D60032;
 }
 
 @media (max-width:1200px) {
@@ -2265,7 +2265,7 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
     class="emotion-23 emotion-24"
   >
     <mock-link
-      classname="css-6yv32w-ToolbarSectionBackLink-toolbarSection evqrzhe8"
+      classname="css-1jppxrb-ToolbarSectionBackLink-toolbarSection evqrzhe8"
       to=""
     >
       <div
@@ -2595,7 +2595,7 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
     class="emotion-30 emotion-31"
   >
     <mock-link
-      classname="css-6yv32w-ToolbarSectionBackLink-toolbarSection evqrzhe8"
+      classname="css-1jppxrb-ToolbarSectionBackLink-toolbarSection evqrzhe8"
       to=""
     >
       <div
@@ -2788,7 +2788,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   text-overflow: ellipsis;
   display: block;
   background-color: #fcefea;
-  color: #ff003b;
+  color: #D60032;
 }
 
 @media (max-width:1200px) {
@@ -2862,7 +2862,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
     class="emotion-18 emotion-19"
   >
     <mock-link
-      classname="css-6yv32w-ToolbarSectionBackLink-toolbarSection evqrzhe8"
+      classname="css-1jppxrb-ToolbarSectionBackLink-toolbarSection evqrzhe8"
       to=""
     >
       <div
@@ -3064,7 +3064,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
     class="emotion-16 emotion-17"
   >
     <mock-link
-      classname="css-6yv32w-ToolbarSectionBackLink-toolbarSection evqrzhe8"
+      classname="css-1jppxrb-ToolbarSectionBackLink-toolbarSection evqrzhe8"
       to=""
     >
       <div
@@ -3212,7 +3212,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   text-overflow: ellipsis;
   display: block;
   background-color: #fcefea;
-  color: #ff003b;
+  color: #D60032;
 }
 
 @media (max-width:1200px) {
@@ -3286,7 +3286,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
     class="emotion-18 emotion-19"
   >
     <mock-link
-      classname="css-6yv32w-ToolbarSectionBackLink-toolbarSection evqrzhe8"
+      classname="css-1jppxrb-ToolbarSectionBackLink-toolbarSection evqrzhe8"
       to=""
     >
       <div
@@ -3439,7 +3439,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   text-overflow: ellipsis;
   display: block;
   background-color: #fcefea;
-  color: #ff003b;
+  color: #D60032;
 }
 
 @media (max-width:1200px) {
@@ -3513,7 +3513,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
     class="emotion-18 emotion-19"
   >
     <mock-link
-      classname="css-6yv32w-ToolbarSectionBackLink-toolbarSection evqrzhe8"
+      classname="css-1jppxrb-ToolbarSectionBackLink-toolbarSection evqrzhe8"
       to=""
     >
       <div
@@ -3666,7 +3666,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   text-overflow: ellipsis;
   display: block;
   background-color: #fcefea;
-  color: #ff003b;
+  color: #D60032;
 }
 
 @media (max-width:1200px) {
@@ -3740,7 +3740,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
     class="emotion-18 emotion-19"
   >
     <mock-link
-      classname="css-6yv32w-ToolbarSectionBackLink-toolbarSection evqrzhe8"
+      classname="css-1jppxrb-ToolbarSectionBackLink-toolbarSection evqrzhe8"
       to=""
     >
       <div
@@ -3893,7 +3893,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   text-overflow: ellipsis;
   display: block;
   background-color: #fcefea;
-  color: #ff003b;
+  color: #D60032;
 }
 
 @media (max-width:1200px) {
@@ -3967,7 +3967,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
     class="emotion-18 emotion-19"
   >
     <mock-link
-      classname="css-6yv32w-ToolbarSectionBackLink-toolbarSection evqrzhe8"
+      classname="css-1jppxrb-ToolbarSectionBackLink-toolbarSection evqrzhe8"
       to=""
     >
       <div

diff --git a/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryCardGrid.js b/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryCardGrid.js
@@ -36,6 +36,7 @@ function CardWrapper(props) {
 
   return (
     <div
+      tabIndex="0"
       style={{
         ...style,
         left: style.left + gutter * columnIndex,

diff --git a/packages/netlify-cms-core/src/components/UI/FileUploadButton.js b/packages/netlify-cms-core/src/components/UI/FileUploadButton.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 export function FileUploadButton({ label, imagesOnly, onChange, disabled, className }) {
   return (
-    <label className={`nc-fileUploadButton ${className || ''}`}>
+    <label tabIndex={'0'} className={`nc-fileUploadButton ${className || ''}`}>
       <span>{label}</span>
       <input
         type="file"

diff --git a/packages/netlify-cms-ui-default/src/Dropdown.js b/packages/netlify-cms-ui-default/src/Dropdown.js
@@ -59,7 +59,7 @@ function StyledMenuItem({ isActive, isCheckedItem = false, ...props }) {
         &:not(:focus),
         &:not(:active) {
           background-color: ${isActive ? colors.activeBackground : 'inherit'};
-          color: ${isActive ? colors.active : 'inherit'};
+          color: ${isActive ? colors.active : '#313d3e'};
           ${isCheckedItem ? 'display: flex; justify-content: start' : ''};
         }
         &:hover {

diff --git a/packages/netlify-cms-ui-default/src/styles.js b/packages/netlify-cms-ui-default/src/styles.js
@@ -42,10 +42,12 @@ const colorsRaw = {
   brown: '#754e00',
   yellow: '#ffee9c',
   red: '#ff003b',
+  redDark: '#D60032',
   redLight: '#fcefea',
   purple: '#70399f',
   purpleLight: '#f6d8ff',
   teal: '#17a2b8',
+  tealDark: '#117888',
   tealLight: '#ddf5f9',
 };
 
@@ -76,7 +78,7 @@ const colors = {
   errorText: colorsRaw.red,
   errorBackground: colorsRaw.redLight,
   textFieldBorder: '#dfdfe3',
-  controlLabel: '#7a8291',
+  controlLabel: '#5D626F',
   checkerboardLight: '#f2f2f2',
   checkerboardDark: '#e6e6e6',
   mediaDraftText: colorsRaw.purple,
@@ -233,7 +235,7 @@ const buttons = {
   `,
   lightRed: css`
     background-color: ${colorsRaw.redLight};
-    color: ${colorsRaw.red};
+    color: ${colorsRaw.redDark};
   `,
   lightBlue: css`
     background-color: ${colorsRaw.blueLight};
@@ -338,7 +340,7 @@ const components = {
     ${buttons.button};
     background-color: transparent;
     border-radius: 0;
-    color: ${colorsRaw.gray};
+    color: ${colorsRaw.grayDark};
     font-weight: 500;
     border-bottom: 1px solid #eaebf1;
     padding: 8px 14px;

diff --git a/packages/netlify-cms-widget-markdown/src/MarkdownControl/RawEditor.js b/packages/netlify-cms-widget-markdown/src/MarkdownControl/RawEditor.js
@@ -60,6 +60,12 @@ export default class RawEditor extends React.Component {
     }
   }
 
+  handleKeyDown = (event, editor) => {
+    if (isHotkey('esc', event)) {
+      editor.blur();
+    }
+  };
+
   handleCopy = (event, editor) => {
     const { getAsset, resolveWidget } = this.props;
     const markdown = Plain.serialize(Value.create({ document: editor.value.fragment }));
@@ -137,6 +143,7 @@ export default class RawEditor extends React.Component {
               onPaste={this.handlePaste}
               onCut={this.handleCut}
               onCopy={this.handleCopy}
+              onKeyDown={this.handleKeyDown}
               ref={this.processRef}
             />
           )}

diff --git a/packages/netlify-cms-widget-markdown/src/MarkdownControl/VisualEditor.js b/packages/netlify-cms-widget-markdown/src/MarkdownControl/VisualEditor.js
@@ -7,6 +7,7 @@ import { css as coreCss, ClassNames } from '@emotion/core';
 import { get, isEmpty, debounce } from 'lodash';
 import { Value, Document, Block, Text } from 'slate';
 import { Editor as Slate } from 'slate-react';
+import isHotkey from 'is-hotkey';
 import { lengths, fonts, zIndex } from 'netlify-cms-ui-default';
 
 import { editorStyleVars, EditorControlBar } from '../styles';
@@ -194,6 +195,12 @@ export default class Editor extends React.Component {
     this.editor.moveToEndOfDocument();
   };
 
+  handleKeyDown = (event, editor) => {
+    if (isHotkey('esc', event)) {
+      editor.blur();
+    }
+  };
+
   handleDocumentChange = debounce(editor => {
     const { onChange } = this.props;
     const raw = editor.value.document.toJS();
@@ -266,6 +273,7 @@ export default class Editor extends React.Component {
                 schema={this.schema}
                 plugins={this.plugins}
                 onChange={this.handleChange}
+                onKeyDown={this.handleKeyDown}
                 ref={this.processRef}
                 spellCheck
               />