chore: improve accessibility of headerbar notification icons and profile

dhis2 · Apr 25, 2024 · b023ca1 · b023ca1
1 parent fcbf93d
commit b023ca1
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 11 deletions.
diff --git a/components/header-bar/i18n/en.pot b/components/header-bar/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2023-01-18T16:13:05.063Z\n"
-"PO-Revision-Date: 2023-01-18T16:13:05.063Z\n"
+"POT-Creation-Date: 2024-03-29T07:26:07.540Z\n"
+"PO-Revision-Date: 2024-03-29T07:26:07.540Z\n"
 
 msgid "Search apps"
 msgstr "Search apps"
@@ -35,6 +35,12 @@ msgstr "Close"
 msgid "Copy debug info"
 msgstr "Copy debug info"
 
+msgid "Interpretations"
+msgstr "Interpretations"
+
+msgid "Messages"
+msgstr "Messages"
+
 msgid "Online"
 msgstr "Online"
 

diff --git a/components/header-bar/src/notification-icon.js b/components/header-bar/src/notification-icon.js
@@ -2,6 +2,7 @@ import { colors, theme, spacers } from '@dhis2/ui-constants'
 import { IconMessages24, IconMail24 } from '@dhis2/ui-icons'
 import PropTypes from 'prop-types'
 import React from 'react'
+import i18n from './locales/index.js'
 
 function icon(kind) {
     if (kind === 'message') {
@@ -11,8 +12,22 @@ function icon(kind) {
     }
 }
 
-export const NotificationIcon = ({ count, href, kind, dataTestId }) => (
-    <a dir="ltr" href={href} className={kind} data-test={dataTestId}>
+export const NotificationIcon = ({
+    count,
+    href,
+    kind,
+    dataTestId,
+    title,
+    'aria-label': ariaLabel,
+}) => (
+    <a
+        dir="ltr"
+        href={href}
+        className={kind}
+        data-test={dataTestId}
+        title={i18n.t(title)}
+        aria-label={i18n.t(ariaLabel)}
+    >
         {icon(kind)}
 
         {count > 0 && <span data-test={`${dataTestId}-count`}>{count}</span>}
@@ -71,7 +86,9 @@ NotificationIcon.defaultProps = {
 }
 
 NotificationIcon.propTypes = {
+    'aria-label': PropTypes.string.isRequired,
     href: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
     count: PropTypes.number,
     dataTestId: PropTypes.string,
     kind: PropTypes.oneOf(['interpretation', 'message']),

diff --git a/components/header-bar/src/notifications.js b/components/header-bar/src/notifications.js
@@ -2,15 +2,9 @@ import { useConfig } from '@dhis2/app-runtime'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { joinPath } from './join-path.js'
+import i18n from './locales/index.js'
 import { NotificationIcon } from './notification-icon.js'
 
-/*
- AUTHORITIES:
- - ALL: superuser
- - M_dhis-web-interpretation: access to interpretations app
- - M_dhis-web-messaging: access to messaging app
- */
-
 const hasAuthority = (userAuthorities, authId) =>
     Array.isArray(userAuthorities) &&
     userAuthorities.some(
@@ -32,6 +26,8 @@ export const Notifications = ({
                     href={joinPath(baseUrl, 'dhis-web-interpretation')}
                     kind="message"
                     dataTestId="headerbar-interpretations"
+                    title={i18n.t('Interpretations')}
+                    aria-label={i18n.t('Interpretations')}
                 />
             )}
 
@@ -42,6 +38,8 @@ export const Notifications = ({
                     href={joinPath(baseUrl, 'dhis-web-messaging')}
                     kind="interpretation"
                     dataTestId="headerbar-messages"
+                    title={i18n.t('Messages')}
+                    aria-label={i18n.t('Messages')}
                 />
             )}
 

diff --git a/components/header-bar/src/profile.js b/components/header-bar/src/profile.js
@@ -2,6 +2,7 @@ import { UserAvatar } from '@dhis2-ui/user-avatar'
 import PropTypes from 'prop-types'
 import React, { useCallback, useRef, useState } from 'react'
 import { DebugInfoModal } from './debug-info/debug-info-modal.js'
+import i18n from './locales/index.js'
 import { ProfileMenu } from './profile-menu/index.js'
 import { useOnDocClick } from './profile/use-on-doc-click.js'
 
@@ -29,6 +30,8 @@ const Profile = ({ name, email, avatarId, helpUrl }) => {
             <button
                 className="headerbar-profile-btn"
                 onClick={toggleProfileMenu}
+                title={i18n.t('header bar profile')}
+                aria-label={i18n.t('header bar profile')}
             >
                 <UserAvatar
                     avatarId={avatarId}