Hide colorpicker legends; remove space instruction

openstax · Sep 23, 2024 · f30081b · f30081b
1 parent 7b23874
commit f30081b
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 65 deletions.
diff --git a/src/app/content/highlights/components/ColorIndicator.tsx b/src/app/content/highlights/components/ColorIndicator.tsx
@@ -4,6 +4,7 @@ import { Check } from 'styled-icons/fa-solid/Check';
 import { isDefined } from '../../../guards';
 import { highlightStyles } from '../../constants';
 import { defaultFocusOutline } from '../../../theme';
+import { useIntl } from 'react-intl';
 import trashIcon from '../../../../assets/trash-347.svg';
 
 interface StyleProps {
@@ -126,7 +127,7 @@ function TB({
     <button
       type='button'
       className={className}
-      aria-label='remove highlight'
+      aria-label={useIntl().formatMessage({id: 'i18n:a11y:keyboard-shortcuts:deselect-highlight-color'})}
       onClick={onClick}
     >
       <img src={trashIcon} alt='' />

diff --git a/src/app/content/highlights/components/ColorPicker.tsx b/src/app/content/highlights/components/ColorPicker.tsx
@@ -1,6 +1,7 @@
 import { HighlightColorEnum } from '@openstax/highlighter/dist/api';
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { hiddenButAccessible } from '../../../theme';
 import styled from 'styled-components/macro';
 import { match, not } from '../../../fpUtils';
 import { highlightStyles } from '../../constants';
@@ -87,6 +88,10 @@ const FSWrapper = styled.fieldset`
   border: 0;
   display: flex;
   flex-direction: row;
+
+  legend {
+    ${hiddenButAccessible}
+  }
 `;
 
 // tslint:disable-next-line:variable-name
@@ -169,12 +174,4 @@ export default styled(ColorPicker)`
   overflow: visible;
   gap: ${cardPadding}rem;
   padding: ${cardPadding}rem 0.3rem;
-
-  legend {
-    position: absolute;
-    height: 1px;
-    width: 1px;
-    overflow: hidden;
-    clip: rect(1px, 1px, 1px, 1px);
-  }
 `;
diff --git a/src/app/content/highlights/components/SummaryPopup/__snapshots__/ContextMenu.spec.tsx.snap b/src/app/content/highlights/components/SummaryPopup/__snapshots__/ContextMenu.spec.tsx.snap
@@ -423,6 +423,19 @@ exports[`ContextMenu match snapshot when open 1`] = `
   flex-direction: row;
 }
 
+.c14 legend {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .c16 {
   border: 0;
   outline: none;
@@ -438,15 +451,6 @@ exports[`ContextMenu match snapshot when open 1`] = `
   padding: 0.8rem 0.3rem;
 }
 
-.c16 legend {
-  position: absolute;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  -webkit-clip: rect(1px,1px,1px,1px);
-  clip: rect(1px,1px,1px,1px);
-}
-
 .c4 {
   cursor: pointer;
   border: none;

diff --git a/src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap b/src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap
@@ -295,6 +295,19 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   flex-direction: row;
 }
 
+.c0 legend {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .c1 {
   border: 0;
   outline: none;
@@ -310,15 +323,6 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   padding: 0.8rem 0.3rem;
 }
 
-.c1 legend {
-  position: absolute;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  -webkit-clip: rect(1px,1px,1px,1px);
-  clip: rect(1px,1px,1px,1px);
-}
-
 <fieldset
   className="c0"
 >
@@ -632,7 +636,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
     </label>
   </fieldset>
   <button
-    aria-label="remove highlight"
+    aria-label="Deselect current highlight color"
     className="c18"
     onClick={[MockFunction]}
     type="button"

diff --git a/src/app/content/keyboardShortcuts/components/ShowKeyboardShortcuts.tsx b/src/app/content/keyboardShortcuts/components/ShowKeyboardShortcuts.tsx
@@ -138,7 +138,6 @@ const ShowKeyboardShortcuts = () => (
         <Shortcut keys={['alt', 'h']} msgKey='move-focus-in-out'/>
         <Shortcut keys={['tab']} msgKey='move-through-note-editing'/>
         <Shortcut keys={['arrows']} msgKey='select-highlight-color'/>
-        <Shortcut keys={['space']} msgKey='deselect-highlight-color'/>
         <Shortcut keys={['enter']} msgKey='save-or-cancel'/>
       </ShortcutsTable>
     </ShortcutsCard>

diff --git a/...p/content/keyboardShortcuts/components/__snapshots__/KeyboardShortcutsPopup.spec.tsx.snap b/...p/content/keyboardShortcuts/components/__snapshots__/KeyboardShortcutsPopup.spec.tsx.snap
@@ -480,24 +480,6 @@ exports[`KeyboardShortcuts renders keyboard shortcuts modal if it is open 1`] =
               Select a different highlight color
             </div>
           </div>
-          <div
-            className="c11"
-          >
-            <div
-              className="c12"
-            >
-              <span
-                className="c13"
-              >
-                Space
-              </span>
-            </div>
-            <div
-              className="c12"
-            >
-              Deselect current highlight color
-            </div>
-          </div>
           <div
             className="c11"
           >

diff --git a/...pp/content/keyboardShortcuts/components/__snapshots__/ShowKeyboardShortcuts.spec.tsx.snap b/...pp/content/keyboardShortcuts/components/__snapshots__/ShowKeyboardShortcuts.spec.tsx.snap
@@ -252,24 +252,6 @@ exports[`ShowKeyboardShortcuts renders the keyboard shortcuts menu 1`] = `
           Select a different highlight color
         </div>
       </div>
-      <div
-        className="c4"
-      >
-        <div
-          className="c5"
-        >
-          <span
-            className="c6"
-          >
-            Space
-          </span>
-        </div>
-        <div
-          className="c5"
-        >
-          Deselect current highlight color
-        </div>
-      </div>
       <div
         className="c4"
       >