A11y improvment (part 1)

locales/en/translation.json

@@ -59,6 +59,7 @@
       "placeholder": "Block type"
     },
     "toggleGroup":"toggle group",
+    "supSubRadio": "Superscript / subscript formatting",
     "removeBold": "Remove bold",
     "bold": "Bold",
     "removeItalic": "Remove italic",

src/plugins/toolbar/components/BoldItalicUnderlineToggles.tsx

@@ -1,8 +1,8 @@
 import { applyFormat$, currentFormat$, iconComponentFor$, useTranslation } from '../../core'
 import { useCellValues, usePublisher } from '@mdxeditor/gurx'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { FORMAT, IS_BOLD, IS_ITALIC, IS_STRIKETHROUGH, IS_SUBSCRIPT, IS_SUPERSCRIPT, IS_UNDERLINE } from '../../../FormatConstants'
-import { ToggleSingleGroupWithItem } from '.././primitives/toolbar'
+import { MultipleChoiceToggleGroup, SingleChoiceToggleGroup, ToggleSingleGroupWithItem } from '.././primitives/toolbar'
 import { TextFormatType } from 'lexical'
 import styles from '../../../styles/ui.module.css'
 import { IconKey } from '../../../defaultSvgIcons'
@@ -43,37 +43,60 @@ export interface BoldItalicUnderlineTogglesProps {
  */
 export const BoldItalicUnderlineToggles: React.FC<BoldItalicUnderlineTogglesProps> = ({ options }) => {
   const t = useTranslation()
+  const [currentFormat, iconComponentFor] = useCellValues(currentFormat$, iconComponentFor$)
+  const applyFormat = usePublisher(applyFormat$)
 
   const showAllButtons = typeof options === 'undefined'
+  const isBold = (currentFormat & IS_BOLD) !== 0
+  const isItalic = (currentFormat & IS_ITALIC) !== 0
+  const isUnderline = (currentFormat & IS_UNDERLINE) !== 0
+
+  const [appliedFormats, setAppliedFormats] = useState<string[]>([])
+  useEffect(() => {
+    setAppliedFormats(
+      [isBold ? 'bold' : null, isItalic ? 'italic' : null, isUnderline ? 'underline' : null].filter((f) => !!f) as TextFormatType[]
+    )
+  }, [currentFormat])
+  const handleApplyFormatDiff = (diff: string[]) => {
+    ;(diff as TextFormatType[]).forEach(applyFormat)
+  }
+
   return (
     <div className={styles.toolbarGroupOfGroups}>
-      {showAllButtons || options.includes('Bold') ? (
-        <FormatButton
-          format={IS_BOLD}
-          addTitle={t('toolbar.bold', 'Bold')}
-          removeTitle={t('toolbar.removeBold', 'Remove bold')}
-          icon="format_bold"
-          formatName="bold"
-        />
-      ) : null}
-      {showAllButtons || options.includes('Italic') ? (
-        <FormatButton
-          format={IS_ITALIC}
-          addTitle={t('toolbar.italic', 'Italic')}
-          removeTitle={t('toolbar.removeItalic', 'Remove italic')}
-          icon="format_italic"
-          formatName="italic"
-        />
-      ) : null}
-      {showAllButtons || options.includes('Underline') ? (
-        <FormatButton
-          format={IS_UNDERLINE}
-          addTitle={t('toolbar.underline', 'Underline')}
-          removeTitle={t('toolbar.removeUnderline', 'Remove underline')}
-          icon="format_underlined"
-          formatName="underline"
-        />
-      ) : null}
+      <MultipleChoiceToggleGroup
+        value={appliedFormats}
+        onValueChange={setAppliedFormats}
+        onValueChangeDiff={handleApplyFormatDiff}
+        items={[
+          ...(showAllButtons || options.includes('Bold')
+            ? [
+                {
+                  title: isBold ? t('toolbar.removeBold', 'Remove bold') : t('toolbar.bold', 'Bold'),
+                  contents: iconComponentFor('format_bold'),
+                  value: 'bold'
+                }
+              ]
+            : []),
+          ...(showAllButtons || options.includes('Italic')
+            ? [
+                {
+                  title: isItalic ? t('toolbar.italic', 'Remove italic') : t('toolbar.italic', 'Italic'),
+                  contents: iconComponentFor('format_italic'),
+                  value: 'italic'
+                }
+              ]
+            : []),
+          ...(showAllButtons || options.includes('Underline')
+            ? [
+                {
+                  title: isItalic ? t('toolbar.underline', 'Remove underline') : t('toolbar.underline', 'Underline'),
+                  contents: iconComponentFor('format_underlined'),
+                  value: 'underline'
+                }
+              ]
+            : [])
+        ]}
+      />
     </div>
   )
 }
@@ -82,43 +105,89 @@ export interface StrikeThroughSupSubTogglesProps {
   options?: ('Strikethrough' | 'Sub' | 'Sup')[]
 }
 
+const SupSubRadioItems = {
+  Sup: {
+    icon: 'superscript',
+    formatName: 'superscript' as TextFormatType,
+    titleFormatKey: 'toolbar.superscript',
+    titleFormatDefaultTranslation: 'Superscript',
+    titleRemoveFormatKey: 'toolbar.removeSuperscript',
+    titleRemoveFormatDefaultTranslation: 'Remove superscript'
+  },
+  Sub: {
+    icon: 'subscript',
+    formatName: 'subscript' as TextFormatType,
+    titleFormatKey: 'toolbar.subscript',
+    titleFormatDefaultTranslation: 'Subscript',
+    titleRemoveFormatKey: 'toolbar.removeSubscript',
+    titleRemoveFormatDefaultTranslation: 'Remove subscript'
+  }
+}
+const isSupSubRadioItemsKey = (key: string): key is keyof typeof SupSubRadioItems => Object.keys(SupSubRadioItems).includes(key)
 /**
  * A toolbar component that lets the user toggle strikeThrough, superscript and subscript formatting.
  * @group Toolbar Components
  */
 export const StrikeThroughSupSubToggles: React.FC<StrikeThroughSupSubTogglesProps> = ({ options }) => {
   const t = useTranslation()
+  const [currentFormat, iconComponentFor] = useCellValues(currentFormat$, iconComponentFor$)
+  const applyFormat = usePublisher(applyFormat$)
+
+  const isSup = (currentFormat & IS_SUPERSCRIPT) !== 0
+  const isSub = (currentFormat & IS_SUBSCRIPT) !== 0
+
+  const [radioValue, setRadioValue] = useState<keyof typeof SupSubRadioItems | ''>('')
+  const radioItems = (options ?? Object.keys(SupSubRadioItems)).filter(isSupSubRadioItemsKey).map((type) => {
+    const item = SupSubRadioItems[type]
+    return {
+      value: type,
+      title:
+        radioValue !== type
+          ? t(item.titleFormatKey, item.titleFormatDefaultTranslation)
+          : t(item.titleRemoveFormatKey, item.titleRemoveFormatDefaultTranslation),
+      contents: iconComponentFor(item.icon as IconKey)
+    }
+  })
+  useEffect(() => {
+    if (isSup) {
+      setRadioValue('Sup')
+    } else if (isSub) {
+      setRadioValue('Sub')
+    } else {
+      setRadioValue('')
+    }
+  }, [currentFormat])
+
+  const handleRadioItemChange = (newValue: keyof typeof SupSubRadioItems | '') => {
+    if (newValue) {
+      applyFormat(SupSubRadioItems[newValue].formatName)
+    } else if (radioValue) {
+      applyFormat(SupSubRadioItems[radioValue].formatName)
+    }
+    setRadioValue(newValue)
+  }
+
   const showAllButtons = typeof options === 'undefined'
 
   return (
-    <div className={styles.toolbarGroupOfGroups}>
-      {showAllButtons || options.includes('Strikethrough') ? (
-        <FormatButton
-          format={IS_STRIKETHROUGH}
-          addTitle={t('toolbar.strikethrough', 'Strikethrough')}
-          removeTitle={t('toolbar.removeStrikethrough', 'Remove strikethrough')}
-          icon="strikeThrough"
-          formatName="strikethrough"
-        />
-      ) : null}
-      {showAllButtons || options.includes('Sup') ? (
-        <FormatButton
-          format={IS_SUPERSCRIPT}
-          addTitle={t('toolbar.superscript', 'Superscript')}
-          removeTitle={t('toolbar.removeSuperscript', 'Remove superscript')}
-          icon="superscript"
-          formatName="superscript"
-        />
-      ) : null}
-      {showAllButtons || options.includes('Sub') ? (
-        <FormatButton
-          format={IS_SUBSCRIPT}
-          addTitle={t('toolbar.subscript', 'Subscript')}
-          removeTitle={t('toolbar.removeSubscript', 'Remove subscript')}
-          icon="subscript"
-          formatName="subscript"
-        />
-      ) : null}
-    </div>
+    <>
+      <div className={styles.toolbarGroupOfGroups}>
+        {showAllButtons || options.includes('Strikethrough') ? (
+          <FormatButton
+            format={IS_STRIKETHROUGH}
+            addTitle={t('toolbar.strikethrough', 'Strikethrough')}
+            removeTitle={t('toolbar.removeStrikethrough', 'Remove strikethrough')}
+            icon="strikeThrough"
+            formatName="strikethrough"
+          />
+        ) : null}
+      </div>
+      <SingleChoiceToggleGroup
+        aria-label={t('toolbar.supSubRadio', 'Superscript / subscript formatting')}
+        value={radioValue}
+        items={radioItems}
+        onChange={handleRadioItemChange}
+      />
+    </>
   )
 }

src/plugins/toolbar/components/CodeToggle.tsx

@@ -1,8 +1,10 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { IS_CODE } from '../../../FormatConstants'
 import { applyFormat$, currentFormat$, iconComponentFor$, useTranslation } from '../../core'
 import { MultipleChoiceToggleGroup } from '.././primitives/toolbar'
 import { useCellValues, usePublisher } from '@mdxeditor/gurx'
+import { TextFormatType } from 'lexical'
+import styles from '@/styles/ui.module.css'
 
 /**
  * A toolbar component that lets the user toggle code formatting.
@@ -18,9 +20,23 @@ export const CodeToggle: React.FC = () => {
 
   const title = codeIsOn ? t('toolbar.removeInlineCode', 'Remove code format') : t('toolbar.inlineCode', 'Inline code format')
 
+  const [appliedFormats, setAppliedFormats] = useState<string[]>([])
+  useEffect(() => {
+    setAppliedFormats([codeIsOn ? 'code' : null].filter((f) => !!f) as string[])
+  }, [currentFormat])
+
+  const handleApplyFormatDiff = (diff: string[]) => {
+    ;(diff as TextFormatType[]).forEach(applyFormat)
+  }
+
   return (
-    <MultipleChoiceToggleGroup
-      items={[{ title: title, contents: iconComponentFor('code'), active: codeIsOn, onChange: applyFormat.bind(null, 'code') }]}
-    />
+    <div className={styles.toolbarGroupOfGroups}>
+      <MultipleChoiceToggleGroup
+        value={appliedFormats}
+        onValueChange={setAppliedFormats}
+        onValueChangeDiff={handleApplyFormatDiff}
+        items={[{ title: title, contents: iconComponentFor('code'), value: 'code' }]}
+      />
+    </div>
   )
 }

src/plugins/toolbar/components/DiffSourceToggleWrapper.tsx

@@ -35,13 +35,25 @@ export const DiffSourceToggleWrapper: React.FC<{ children: React.ReactNode; opti
   }[] = []
 
   if (options.includes('rich-text')) {
-    toggleGroupItems.push({ title: t('toolbar.richText', 'Rich text'), contents: iconComponentFor('rich_text'), value: 'rich-text' })
+    toggleGroupItems.push({
+      title: t('toolbar.richText', 'Rich text'),
+      contents: iconComponentFor('rich_text'),
+      value: 'rich-text'
+    })
   }
   if (options.includes('diff')) {
-    toggleGroupItems.push({ title: t('toolbar.diffMode', 'Diff mode'), contents: iconComponentFor('difference'), value: 'diff' })
+    toggleGroupItems.push({
+      title: t('toolbar.diffMode', 'Diff mode'),
+      contents: iconComponentFor('difference'),
+      value: 'diff'
+    })
   }
   if (options.includes('source')) {
-    toggleGroupItems.push({ title: t('toolbar.source', 'Source mode'), contents: iconComponentFor('markdown'), value: 'source' })
+    toggleGroupItems.push({
+      title: t('toolbar.source', 'Source mode'),
+      contents: iconComponentFor('markdown'),
+      value: 'source'
+    })
   }
 
   return (
@@ -55,14 +67,17 @@ export const DiffSourceToggleWrapper: React.FC<{ children: React.ReactNode; opti
       )}
 
       <div style={{ marginLeft: 'auto', pointerEvents: 'auto', opacity: 1 }}>
-        <SingleChoiceToggleGroup
-          className={styles.diffSourceToggle}
-          value={viewMode}
-          items={toggleGroupItems}
-          onChange={(value) => {
-            changeViewMode(value === '' ? 'rich-text' : value)
-          }}
-        />
+        <div className={styles.toolbarGroupOfGroups}>
+          <SingleChoiceToggleGroup
+            aria-label={t('toolbar.toggleGroup', 'toggle group')}
+            className={styles.diffSourceToggle}
+            value={viewMode}
+            items={toggleGroupItems}
+            onChange={(value) => {
+              changeViewMode(value === '' ? 'rich-text' : value)
+            }}
+          />
+        </div>
       </div>
     </>
   )

src/plugins/toolbar/components/ListsToggle.tsx

@@ -3,6 +3,7 @@ import { applyListType$, currentListType$ } from '../../lists'
 import { SingleChoiceToggleGroup } from '.././primitives/toolbar'
 import { useCellValues, usePublisher } from '@mdxeditor/gurx'
 import { iconComponentFor$, useTranslation } from '../../core'
+import styles from '@/styles/ui.module.css'
 
 const ICON_NAME_MAP = {
   bullet: 'format_list_bulleted',
@@ -17,7 +18,9 @@ const ICON_NAME_MAP = {
  * @group Toolbar Components
  * @param options - The list types that the user can toggle between. Defaults to `['bullet', 'number', 'check']`.
  */
-export const ListsToggle: React.FC<{ options?: ('bullet' | 'number' | 'check')[] }> = ({ options = ['bullet', 'number', 'check'] }) => {
+export const ListsToggle: React.FC<{
+  options?: ('bullet' | 'number' | 'check')[]
+}> = ({ options = ['bullet', 'number', 'check'] }) => {
   const [currentListType, iconComponentFor] = useCellValues(currentListType$, iconComponentFor$)
   const applyListType = usePublisher(applyListType$)
   const t = useTranslation()
@@ -34,5 +37,14 @@ export const ListsToggle: React.FC<{ options?: ('bullet' | 'number' | 'check')[]
     contents: iconComponentFor(ICON_NAME_MAP[type])
   }))
 
-  return <SingleChoiceToggleGroup value={currentListType || ''} items={items} onChange={applyListType} />
+  return (
+    <div className={styles.toolbarGroupOfGroups}>
+      <SingleChoiceToggleGroup
+        aria-label={t('toolbar.toggleGroup', 'toggle group')}
+        value={currentListType || ''}
+        items={items}
+        onChange={applyListType}
+      />
+    </div>
+  )
 }