Merge pull request #4082 from overleaf/ae-aria-symbol-palette

Improve ARIA validation of symbol palette

GitOrigin-RevId: 7624262b454d03d1a56d4a75b951fca3261b6e13

services/web/frontend/js/features/symbol-palette/components/symbol-palette-body.js

@@ -13,35 +13,44 @@ export default function SymbolPaletteBody({
 }) {
   const { t } = useTranslation()
 
-  // not searching: show the symbols grouped by category
-  if (!filteredSymbols) {
+  // searching with matches: show the matched symbols
+  // searching with no matches: show a message
+  // note: include empty tab panels so that aria-controls on tabs can still reference the panel ids
+  if (filteredSymbols) {
     return (
-      <TabPanels>
-        {categories.map(category => (
-          <TabPanel key={category.id} tabIndex={-1}>
-            <SymbolPaletteItems
-              items={categorisedSymbols[category.id]}
-              handleSelect={handleSelect}
-              focusInput={focusInput}
-            />
-          </TabPanel>
-        ))}
-      </TabPanels>
-    )
-  }
+      <>
+        {filteredSymbols.length ? (
+          <SymbolPaletteItems
+            items={filteredSymbols}
+            handleSelect={handleSelect}
+            focusInput={focusInput}
+          />
+        ) : (
+          <div className="symbol-palette-empty">{t('no_symbols_found')}</div>
+        )}
 
-  // searching with no matches: show a message
-  if (!filteredSymbols.length) {
-    return <div className="symbol-palette-empty">{t('no_symbols_found')}</div>
+        <TabPanels>
+          {categories.map(category => (
+            <TabPanel key={category.id} tabIndex={-1} />
+          ))}
+        </TabPanels>
+      </>
+    )
   }
 
-  // searching with matches: show the matched symbols
+  // not searching: show the symbols grouped by category
   return (
-    <SymbolPaletteItems
-      items={filteredSymbols}
-      handleSelect={handleSelect}
-      focusInput={focusInput}
-    />
+    <TabPanels>
+      {categories.map(category => (
+        <TabPanel key={category.id} tabIndex={-1}>
+          <SymbolPaletteItems
+            items={categorisedSymbols[category.id]}
+            handleSelect={handleSelect}
+            focusInput={focusInput}
+          />
+        </TabPanel>
+      ))}
+    </TabPanels>
   )
 }
 SymbolPaletteBody.propTypes = {

services/web/frontend/js/features/symbol-palette/components/symbol-palette-item.js

@@ -30,9 +30,7 @@ export default function SymbolPaletteItem({
           <div className="symbol-palette-item-description">
             {symbol.description}
           </div>
-          <div className="symbol-palette-item-command" aria-hidden="true">
-            {symbol.command}
-          </div>
+          <div className="symbol-palette-item-command">{symbol.command}</div>
           {symbol.notes && (
             <div className="symbol-palette-item-notes">{symbol.notes}</div>
           )}
@@ -47,9 +45,10 @@ export default function SymbolPaletteItem({
         tabIndex={focused ? 0 : -1}
         ref={buttonRef}
         role="option"
-        aria-selected={focused}
+        aria-label={symbol.description}
+        aria-selected={focused ? 'true' : 'false'}
       >
-        <span aria-hidden="true">{symbol.character}</span>
+        {symbol.character}
       </button>
     </OverlayTrigger>
   )