Merge pull request #1995 from lpsinger/editor-tabs-accessibility

Add accessibility attributes to editor tabs
nasa-gcn · Feb 29, 2024 · a0862c5 · a0862c5
2 parents 074ef87 + 65de0d6
commit a0862c5
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 14 deletions.
diff --git a/app/routes/_gcn.circulars.$circularId.($version)/Body.tsx b/app/routes/_gcn.circulars.$circularId.($version)/Body.tsx
@@ -44,12 +44,11 @@ function LinkWrapper({
 }
 
 export function MarkdownBody({
-  className,
   children,
+  ...props
 }: {
-  className?: string
   children: string
-}) {
+} & Omit<JSX.IntrinsicElements['div'], 'children'>) {
   const { result } = unified()
     .use(remarkParse)
     .use(remarkGfm)
@@ -68,16 +67,16 @@ export function MarkdownBody({
     })
     .processSync(children)
 
-  return <div className={className}>{result}</div>
+  return <div {...props}>{result}</div>
 }
 
 export function PlainTextBody({
   className,
   children,
+  ...props
 }: {
-  className?: string
   children: string
-}) {
+} & Omit<JSX.IntrinsicElements['div'], 'children'>) {
   const tree = u('root', [u('code', children)])
 
   const { result } = unified()
@@ -93,6 +92,8 @@ export function PlainTextBody({
     .processSync()
 
   return (
-    <div className={classNames(styles.PlainTextBody, className)}>{result}</div>
+    <div {...props} className={classNames(styles.PlainTextBody, className)}>
+      {result}
+    </div>
   )
 }
diff --git a/app/routes/_gcn.circulars.edit.$circularId/RichEditor/Tabs.tsx b/app/routes/_gcn.circulars.edit.$circularId/RichEditor/Tabs.tsx
@@ -20,31 +20,43 @@ export function Tab({
   ...props
 }: { defaultSelected?: boolean } & Omit<
   Parameters<typeof Button>[0],
-  'outline' | 'type'
+  'outline' | 'role' | 'type'
 >) {
   const [checked, setChecked] = useExclusiveOption(defaultChecked)
   return (
     <Button
+      {...props}
       outline
+      aria-selected={checked}
+      role="tab"
       type="button"
       className={classNames(className, { [styles.checked]: checked })}
       onClick={(e) => {
         setChecked()
         onClick?.(e)
       }}
-      {...props}
     />
   )
 }
 
 export function TabBar({
   children,
+  className,
+  ...props
 }: {
   children: Iterable<ReactElement<typeof Tab>>
-}) {
+} & Omit<
+  Parameters<typeof ButtonGroup>[0],
+  'children' | 'role' | 'segmented' | 'type'
+>) {
   return (
     <ExclusiveOptionGroup>
-      <ButtonGroup type="segmented" className={styles.tabs}>
+      <ButtonGroup
+        {...props}
+        role="tablist"
+        type="segmented"
+        className={classNames(styles.tabs, className)}
+      >
         {children}
       </ButtonGroup>
     </ExclusiveOptionGroup>

diff --git a/app/routes/_gcn.circulars.edit.$circularId/RichEditor/index.tsx b/app/routes/_gcn.circulars.edit.$circularId/RichEditor/index.tsx
@@ -350,18 +350,34 @@ export function RichEditor({
         }
       }}
     >
-      {editing || <Preview className={styles.preview}>{value}</Preview>}
+      {editing || (
+        <Preview
+          id="preview"
+          role="tabpanel"
+          aria-labelledby="previewButton"
+          className={styles.preview}
+        >
+          {value}
+        </Preview>
+      )}
       <Grid row className="position-absolute width-full padding-top-05">
         <Grid
           col="auto"
           className="width-1 margin-bottom-05 border-primary border-bottom-2px"
         />
         <Grid col="auto">
           <TabBar>
-            <Tab defaultChecked onClick={edit}>
+            <Tab
+              defaultChecked
+              id="editButton"
+              aria-controls="body"
+              onClick={edit}
+            >
               Edit
             </Tab>
-            <Tab onClick={preview}>Preview</Tab>
+            <Tab onClick={preview} aria-controls="preview" id="previewButton">
+              Preview
+            </Tab>
           </TabBar>
         </Grid>
         <Grid
@@ -422,6 +438,7 @@ export function RichEditor({
       <Textarea
         id="body"
         name="body"
+        aria-labelledby="editButton"
         className={classNames(
           { [styles.hidden]: !editing },
           'font-code-sm',