Nav: Fix main a11y issues (#80309)

* refactor: add nav announcement for screenreader

* refactor: add aria label

* refactor: add more aria labels

* refactor: aria labels

* refactor: remove aria-labels

* refactor: add aria-live

* refactor: add translations

* refactor: repair empty message

* refactor: repair empty message

* refactor: remove translation of empty message

* refactor: clean up

* refactor: change translation
pull/80896/head^2
Laura Benz 1 year ago committed by GitHub
parent 96c4b7bf1e
commit 5b6a4e880b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 2
      public/app/core/components/AppChrome/DockedMegaMenu/MegaMenu.tsx
  2. 4
      public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItem.tsx
  3. 1
      public/locales/de-DE/grafana.json
  4. 1
      public/locales/en-US/grafana.json
  5. 1
      public/locales/es-ES/grafana.json
  6. 1
      public/locales/fr-FR/grafana.json
  7. 1
      public/locales/pseudo-LOCALE/grafana.json
  8. 1
      public/locales/zh-Hans/grafana.json

@ -60,7 +60,7 @@ export const MegaMenu = React.memo(
</div> </div>
<nav className={styles.content}> <nav className={styles.content}>
<CustomScrollbar showScrollIndicators hideHorizontalTrack> <CustomScrollbar showScrollIndicators hideHorizontalTrack>
<ul className={styles.itemList}> <ul className={styles.itemList} aria-label={t('navigation.megamenu.list-label', 'Navigation')}>
{navItems.map((link, index) => ( {navItems.map((link, index) => (
<Stack key={link.text} direction={index === 0 ? 'row-reverse' : 'row'} alignItems="center"> <Stack key={link.text} direction={index === 0 ? 'row-reverse' : 'row'} alignItems="center">
{index === 0 && ( {index === 0 && (

@ -121,7 +121,9 @@ export function MegaMenuItem({ link, activeItem, level = 0, onClick }: Props) {
/> />
)) ))
) : ( ) : (
<div className={styles.emptyMessage}>{link.emptyMessage}</div> <div className={styles.emptyMessage} aria-live="polite">
{link.emptyMessage}
</div>
)} )}
</ul> </ul>
)} )}

@ -974,6 +974,7 @@
"megamenu": { "megamenu": {
"close": "Menü schließen", "close": "Menü schließen",
"dock": "Menü andocken", "dock": "Menü andocken",
"list-label": "",
"undock": "" "undock": ""
}, },
"toolbar": { "toolbar": {

@ -974,6 +974,7 @@
"megamenu": { "megamenu": {
"close": "Close menu", "close": "Close menu",
"dock": "Dock menu", "dock": "Dock menu",
"list-label": "Navigation",
"undock": "Undock menu" "undock": "Undock menu"
}, },
"toolbar": { "toolbar": {

@ -980,6 +980,7 @@
"megamenu": { "megamenu": {
"close": "Cerrar menú", "close": "Cerrar menú",
"dock": "Anclar el menú", "dock": "Anclar el menú",
"list-label": "",
"undock": "Desanclar el menú" "undock": "Desanclar el menú"
}, },
"toolbar": { "toolbar": {

@ -980,6 +980,7 @@
"megamenu": { "megamenu": {
"close": "Fermer le menu", "close": "Fermer le menu",
"dock": "Ancrer le menu", "dock": "Ancrer le menu",
"list-label": "",
"undock": "" "undock": ""
}, },
"toolbar": { "toolbar": {

@ -974,6 +974,7 @@
"megamenu": { "megamenu": {
"close": "Cľőşę męʼnū", "close": "Cľőşę męʼnū",
"dock": "Đőčĸ męʼnū", "dock": "Đőčĸ męʼnū",
"list-label": "Ńävįģäŧįőʼn",
"undock": "Ůʼnđőčĸ męʼnū" "undock": "Ůʼnđőčĸ męʼnū"
}, },
"toolbar": { "toolbar": {

@ -968,6 +968,7 @@
"megamenu": { "megamenu": {
"close": "关闭菜单", "close": "关闭菜单",
"dock": "停靠菜单", "dock": "停靠菜单",
"list-label": "",
"undock": "" "undock": ""
}, },
"toolbar": { "toolbar": {

Loading…
Cancel
Save