Use aria-labelledby for Display note so the note is the label

openstax · Oct 2, 2024 · 5ca988a · 5ca988a
1 parent dd06dbe
commit 5ca988a
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/src/app/content/highlights/components/DisplayNote.tsx b/src/app/content/highlights/components/DisplayNote.tsx
@@ -19,7 +19,6 @@ import Confirmation from './Confirmation';
 import MenuToggle, { MenuIcon } from './MenuToggle';
 import TruncatedText from './TruncatedText';
 import { isElementForOnClickOutside, useOnClickOutside } from './utils/onClickOutside';
-import { useIntl } from 'react-intl';
 
 // tslint:disable-next-line:variable-name
 const CloseIcon = styled((props) => <Times {...props} aria-hidden='true' focusable='false' />)`
@@ -62,7 +61,7 @@ const DisplayNote = React.forwardRef<HTMLElement, DisplayNoteProps>((
   const [width] = useDebouncedWindowSize();
   const searchQuery = useSelector(query);
   const isTocOpen = useSelector(tocOpen);
-  const {formatMessage} = useIntl();
+  const noteId = `display-note-${highlight.id}`;
 
   const onToggle = () => {
     if (!isActive) {
@@ -101,7 +100,7 @@ const DisplayNote = React.forwardRef<HTMLElement, DisplayNoteProps>((
       tabIndex={-1}
       data-highlight-card
       role='dialog'
-      aria-label={formatMessage({id: 'i18n:highlighter:display-note:label'})}
+      aria-labelledby={noteId}
     >
       <Dropdown toggle={<MenuToggle />} onToggle={onToggle} transparentTab={false}>
         <DropdownList>
@@ -115,7 +114,7 @@ const DisplayNote = React.forwardRef<HTMLElement, DisplayNoteProps>((
       </Dropdown>
       <CloseIcon onClick={onBlur} />
       <label>Note:</label>
-      <TruncatedText text={note} isActive={isActive} onChange={() => setTextToggle((state) => !state)} />
+      <TruncatedText id={noteId} text={note} isActive={isActive} onChange={() => setTextToggle((state) => !state)} />
       {confirmingDelete && <Confirmation
         ref={confirmationRef}
         data-analytics-label='delete'

diff --git a/src/app/content/highlights/components/TruncatedText.tsx b/src/app/content/highlights/components/TruncatedText.tsx
@@ -8,6 +8,7 @@ import theme from '../../../theme';
 import { cardPadding } from '../constants';
 
 interface Props {
+  id: string;
   text: string;
   isActive: boolean;
   className?: string;
@@ -29,7 +30,7 @@ const Link = styled.span`
 `;
 
 // tslint:disable-next-line:variable-name
-const NoteText = ({text, isActive, className, onChange }: Props) => {
+const NoteText = ({id, text, isActive, className, onChange }: Props) => {
   const noteTextRef = React.useRef<HTMLElement>(null);
   const [showLink, setShowLink] = React.useState<boolean>(false);
 
@@ -44,7 +45,7 @@ const NoteText = ({text, isActive, className, onChange }: Props) => {
   }, [isActive]);
 
   return <React.Fragment>
-    <p ref={noteTextRef} className={className}>{text}</p>
+    <p id={id} ref={noteTextRef} className={className}>{text}</p>
     {showLink && <FormattedMessage id='i18n:highlighting:card:show-more'>
       {(msg) => <Link>{msg}</Link>}
     </FormattedMessage>}

diff --git a/src/app/content/highlights/components/__snapshots__/DisplayNote.spec.tsx.snap b/src/app/content/highlights/components/__snapshots__/DisplayNote.spec.tsx.snap
@@ -116,7 +116,7 @@ exports[`DisplayNote matches snapshot 1`] = `
 }
 
 <div
-  aria-label="Highlighted note"
+  aria-labelledby="display-note-undefined"
   className="c0"
   data-highlight-card={true}
   role="dialog"
@@ -184,6 +184,7 @@ exports[`DisplayNote matches snapshot 1`] = `
     Note:
   </label>
   <div
+    id="display-note-undefined"
     isActive={false}
     mock-truncated-text={true}
     onChange={[Function]}
@@ -322,7 +323,7 @@ exports[`DisplayNote matches snapshot when focused 1`] = `
 }
 
 <div
-  aria-label="Highlighted note"
+  aria-labelledby="display-note-undefined"
   className="c0"
   data-highlight-card={true}
   role="dialog"
@@ -390,6 +391,7 @@ exports[`DisplayNote matches snapshot when focused 1`] = `
     Note:
   </label>
   <div
+    id="display-note-undefined"
     isActive={true}
     mock-truncated-text={true}
     onChange={[Function]}
@@ -578,7 +580,7 @@ exports[`DisplayNote matches snapshot when focused with opened dropdown 1`] = `
 }
 
 <div
-  aria-label="Highlighted note"
+  aria-labelledby="display-note-undefined"
   className="c0"
   data-highlight-card={true}
   role="dialog"
@@ -670,6 +672,7 @@ exports[`DisplayNote matches snapshot when focused with opened dropdown 1`] = `
     Note:
   </label>
   <div
+    id="display-note-undefined"
     isActive={true}
     mock-truncated-text={true}
     onChange={[Function]}