STCOR-753: Add aria-label for ProfileDropdown.js (#1382)

Author: UladzislauKutarkin

CHANGELOG.md

@@ -12,6 +12,7 @@
 * Export `getEventHandler` to be able to create events in other modules. Refs STCOR-770.
 * Opt-in: handle access-control via cookies. Refs STCOR-671.
 * Opt-in: disable login when cookies are disabled. Refs STCOR-762.
+* Add arial-label for `ProfileDropdown.js`. Refs STCOR-753.
 
 ## [10.0.0](https://github.com/folio-org/stripes-core/tree/v10.0.0) (2023-10-11)
 [Full Changelog](https://github.com/folio-org/stripes-core/compare/v9.0.0...v10.0.0)

src/components/MainNav/AppList/AppList.js

@@ -122,7 +122,7 @@ class AppList extends Component {
    * The button that toggles the dropdown
    */
   renderDropdownToggleButton = ({ open, getTriggerProps }) => {
-    const { dropdownToggleId, intl: { formatMessage } } = this.props;
+    const { dropdownToggleId } = this.props;
     const icon = (
       <svg className={css.dropdownToggleIcon} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
         <path d="M8.4 2.4H5.1c-1.5 0-2.7 1.2-2.7 2.7v3.3c0 1.5 1.2 2.7 2.7 2.7h3.3c1.5 0 2.7-1.2 2.7-2.7V5.1c0-1.5-1.2-2.7-2.7-2.7zm.7 6c0 .4-.3.7-.7.7H5.1c-.4 0-.7-.3-.7-.7V5.1c0-.4.3-.7.7-.7h3.3c.4 0 .7.3.7.7v3.3zM18.9 2.4h-3.3c-1.5 0-2.7 1.2-2.7 2.7v3.3c0 1.5 1.2 2.7 2.7 2.7h3.3c1.5 0 2.7-1.2 2.7-2.7V5.1c0-1.5-1.2-2.7-2.7-2.7zm.7 6c0 .4-.3.7-.7.7h-3.3c-.4 0-.7-.3-.7-.7V5.1c0-.4.3-.7.7-.7h3.3c.4 0 .7.3.7.7v3.3zM8.4 12.9H5.1c-1.5 0-2.7 1.2-2.7 2.7v3.3c0 1.5 1.2 2.7 2.7 2.7h3.3c1.5 0 2.7-1.2 2.7-2.7v-3.3c0-1.5-1.2-2.7-2.7-2.7zm.7 6c0 .4-.3.7-.7.7H5.1c-.4 0-.7-.3-.7-.7v-3.3c0-.4.3-.7.7-.7h3.3c.4 0 .7.3.7.7v3.3zM18.9 12.9h-3.3c-1.5 0-2.7 1.2-2.7 2.7v3.3c0 1.5 1.2 2.7 2.7 2.7h3.3c1.5 0 2.7-1.2 2.7-2.7v-3.3c0-1.5-1.2-2.7-2.7-2.7zm.7 6c0 .4-.3.7-.7.7h-3.3c-.4 0-.7-.3-.7-.7v-3.3c0-.4.3-.7.7-.7h3.3c.4 0 .7.3.7.7v3.3z" />
@@ -138,7 +138,6 @@ class AppList extends Component {
       <NavButton
         data-test-app-list-apps-toggle
         label={label}
-        aria-label={formatMessage({ id: 'stripes-core.mainnav.showAllApplicationsButtonAriaLabel' })}
         className={css.navMobileToggle}
         labelClassName={css.dropdownToggleLabel}
         onClick={this.toggleDropdown}

src/components/MainNav/ProfileDropdown/ProfileDropdown.js

@@ -241,11 +241,20 @@ class ProfileDropdown extends Component {
   }
 
   renderProfileTrigger = ({ getTriggerProps, open }) => {
-    const { intl } = this.props;
+    const { intl, stripes: { okapi } } = this.props;
+    const userData = this.getUserData();
+    const servicePointName = userData?.curServicePoint?.name;
+    const tenantName = userData?.tenants?.find(({ id }) => id === okapi.tenant)?.name;
 
     return (
       <NavButton
-        ariaLabel={intl.formatMessage({ id: 'stripes-core.mainnav.myProfileAriaLabel' })}
+        ariaLabel={intl.formatMessage(
+          { id: 'stripes-core.mainnav.myProfileAriaLabel' },
+          {
+            tenantName,
+            servicePointName,
+          }
+        )}
         selected={open}
         className={css.button}
         icon={this.getProfileImage()}

translations/stripes-core/en.json

@@ -105,7 +105,7 @@
   "mainnav.topLevelLabel": "Primary",
   "mainnav.applicationListLabel": "Application List",
   "mainnav.appContextMenu": "Application context dropdown",
-  "mainnav.myProfileAriaLabel": "My profile",
+  "mainnav.myProfileAriaLabel": "{tenantName} {servicePointName} profile",
   "mainnav.skipMainNavigation": "Skip Main Navigation",
 
   "mainnav.profileDropdown.locale": "Locale",