github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-04-20 16:25:43 +00:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
Improve ARIA validation of symbol palette

GitOrigin-RevId: 7624262b454d03d1a56d4a75b951fca3261b6e13
This commit is contained in:
Alf Eaton 2021-05-25 10:55:10 +01:00 • committed by Copybot
parent 468817b1a7
commit 5806cfcb10
2 changed files with 37 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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 = {

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

@ -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>
)