From 5806cfcb10bb162f0deefcae8e8e78a2e5a86d43 Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Tue, 25 May 2021 10:55:10 +0100
Subject: [PATCH] Merge pull request #4082 from overleaf/ae-aria-symbol-palette

Improve ARIA validation of symbol palette

GitOrigin-RevId: 7624262b454d03d1a56d4a75b951fca3261b6e13
---
 .../components/symbol-palette-body.js         | 57 +++++++++++--------
 .../components/symbol-palette-item.js         |  9 ++-
 2 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/services/web/frontend/js/features/symbol-palette/components/symbol-palette-body.js b/services/web/frontend/js/features/symbol-palette/components/symbol-palette-body.js
index d6a8908354..b7b90d6312 100644
--- a/services/web/frontend/js/features/symbol-palette/components/symbol-palette-body.js
+++ b/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>
+        )}
+
+        <TabPanels>
+          {categories.map(category => (
+            <TabPanel key={category.id} tabIndex={-1} />
+          ))}
+        </TabPanels>
+      </>
     )
   }
 
-  // searching with no matches: show a message
-  if (!filteredSymbols.length) {
-    return <div className="symbol-palette-empty">{t('no_symbols_found')}</div>
-  }
-
-  // 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 = {
diff --git a/services/web/frontend/js/features/symbol-palette/components/symbol-palette-item.js b/services/web/frontend/js/features/symbol-palette/components/symbol-palette-item.js
index 9ffaf1db63..c17852451e 100644
--- a/services/web/frontend/js/features/symbol-palette/components/symbol-palette-item.js
+++ b/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>
   )