feat: remove username from header

Remove username from header and add name for screen reader

VAN-1804

example/index.js

@@ -25,7 +25,7 @@ subscribe(APP_READY, () => {
       <AppContext.Provider value={{
         authenticatedUser: {
           userId: '123abc',
-          username: 'testuser',
+          name: 'test user',
           roles: [],
           administrator: false,
         },
@@ -37,7 +37,7 @@ subscribe(APP_READY, () => {
       <AppContext.Provider value={{
         authenticatedUser: {
           userId: '123abc',
-          username: 'testuser',
+          name: 'test name',
           roles: [],
           administrator: false,
         },

src/DesktopHeader.jsx

@@ -58,7 +58,7 @@ class DesktopHeader extends React.Component {
     const {
       userMenu,
       avatar,
-      username,
+      name,
       intl,
     } = this.props;
 
@@ -69,11 +69,9 @@ class DesktopHeader extends React.Component {
           as={AvatarButton}
           src={avatar}
           alt=""
-          aria-label={intl.formatMessage(messages['header.label.account.menu.for'], { username })}
+          aria-label={intl.formatMessage(messages['header.label.account.menu.for'], { name })}
           data-hj-suppress
-        >
-          {username}
-        </Dropdown.Toggle>
+        />
 
         <Dropdown.Menu alignRight>
           {userMenu.map(({ type, href, content }) => (
@@ -155,7 +153,7 @@ DesktopHeader.propTypes = {
   logoAltText: PropTypes.string,
   logoDestination: PropTypes.string,
   avatar: PropTypes.string,
-  username: PropTypes.string,
+  name: PropTypes.string,
   loggedIn: PropTypes.bool,
 
   // i18n
@@ -170,7 +168,7 @@ DesktopHeader.defaultProps = {
   logoAltText: null,
   logoDestination: null,
   avatar: null,
-  username: null,
+  name: null,
   loggedIn: false,
 };
 

src/Header.jsx

@@ -154,7 +154,7 @@ const Header = ({ intl }) => {
     siteName: 'edX',
     logoDestination: getConfig().MINIMAL_HEADER ? null : `${config.LMS_BASE_URL}/dashboard`,
     loggedIn: authenticatedUser !== null,
-    username: authenticatedUser !== null ? authenticatedUser.username : null,
+    name: authenticatedUser !== null ? authenticatedUser.name : null,
     avatar: authenticatedUser !== null ? authenticatedUser.avatar : null,
     mainMenu: getConfig().MINIMAL_HEADER || getConfig().AUTHN_MINIMAL_HEADER ? [] : mainMenu,
     userMenu: getConfig().AUTHN_MINIMAL_HEADER ? [] : userMenu,

src/Header.messages.jsx

@@ -78,8 +78,8 @@ const messages = defineMessages({
   },
   'header.label.account.menu.for': {
     id: 'header.label.account.menu.for',
-    defaultMessage: 'Account menu for {username}',
-    description: 'The aria label for the account menu trigger when the username is displayed in it',
+    defaultMessage: 'Account menu for {name}',
+    description: 'The aria label for the account menu trigger when the name is displayed in it',
   },
   'header.label.main.nav': {
     id: 'header.label.main.nav',

src/Header.test.jsx

@@ -73,7 +73,7 @@ describe('<Header />', () => {
     const contextValue = {
       authenticatedUser: {
         userId: 'abc123',
-        username: 'edX',
+        name: 'edX',
         roles: [],
         administrator: false,
       },

src/__snapshots__/Header.test.jsx.snap

@@ -37,7 +37,7 @@ exports[`<Header /> minimal renders correctly for authenticated users when minim
             alt=""
             aria-expanded={false}
             aria-haspopup={true}
-            aria-label="Account menu for edX"
+            aria-label="Account menu for "
             className="btn-avatar pgn__avatar-button-avatar pgn__avatar-button-avatar-md dropdown-toggle btn btn-tertiary btn-md"
             data-hj-suppress={true}
             disabled={false}
@@ -50,7 +50,6 @@ exports[`<Header /> minimal renders correctly for authenticated users when minim
               className="pgn__avatar pgn__avatar-sm"
               src="icon/mock/path"
             />
-            edX
           </button>
         </div>
       </nav>
@@ -180,7 +179,6 @@ exports[`<Header /> renders correctly for authenticated users on desktop 1`] = `
               className="pgn__avatar pgn__avatar-sm"
               src="icon/mock/path"
             />
-            edX
           </button>
         </div>
       </nav>
@@ -293,7 +291,7 @@ exports[`<Header /> renders correctly for authenticated users on mobile 1`] = `
         type="button"
       >
         <img
-          alt="edX"
+          alt={null}
           className="pgn__avatar pgn__avatar-sm"
           src="icon/mock/path"
         />

src/learning-header/AuthenticatedUserDropdown.jsx

@@ -7,14 +7,20 @@ import { faUserCircle } from '@fortawesome/free-solid-svg-icons';
 
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Dropdown, Badge } from '@openedx/paragon';
+import { Avatar, Dropdown, Badge } from '@openedx/paragon';
 
 import messages from './messages';
 import Notifications from '../Notifications';
 import { selectShowNotificationTray } from '../Notifications/data/selectors';
 import { fetchAppsNotificationCount } from '../Notifications/data/thunks';
 
-const AuthenticatedUserDropdown = ({ enterpriseLearnerPortalLink, intl, username }) => {
+const AuthenticatedUserDropdown = (props) => {
+  const {
+    intl,
+    enterpriseLearnerPortalLink,
+    username,
+    name,
+  } = props;
   const dispatch = useDispatch();
   const showNotificationsTray = useSelector(selectShowNotificationTray);
 
@@ -54,9 +60,7 @@ const AuthenticatedUserDropdown = ({ enterpriseLearnerPortalLink, intl, username
       <Dropdown className="user-dropdown ml-3">
         <Dropdown.Toggle variant="outline-primary" id="user-dropdown">
           <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
-          <span data-hj-suppress className="d-none d-md-inline">
-            {username}
-          </span>
+          <Avatar size="sm" alt={name} className="mr-2" />
         </Dropdown.Toggle>
         <Dropdown.Menu className="dropdown-menu-right zIndex-2">
           {dashboardMenuItem}
@@ -89,10 +93,12 @@ AuthenticatedUserDropdown.propTypes = {
   enterpriseLearnerPortalLink: PropTypes.string,
   intl: intlShape.isRequired,
   username: PropTypes.string.isRequired,
+  name: PropTypes.string,
 };
 
 AuthenticatedUserDropdown.defaultProps = {
   enterpriseLearnerPortalLink: '',
+  name: null,
 };
 
 export default injectIntl(AuthenticatedUserDropdown);

src/learning-header/LearningHeader.jsx

@@ -92,6 +92,7 @@ const LearningHeader = ({
           <AuthenticatedUserDropdown
             enterpriseLearnerPortalLink={enterpriseLearnerPortalLink}
             username={authenticatedUser.username}
+            name={authenticatedUser.name}
           />
           )}
           {showUserDropdown && !authenticatedUser && (

src/learning-header/LearningHeader.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  authenticatedUser, initializeMockApp, render, screen,
+  initializeMockApp, render, screen,
 } from '../setupTest';
 import { LearningHeader as Header } from '../index';
 
@@ -12,7 +12,7 @@ describe('Header', () => {
 
   it('displays user button', () => {
     render(<Header />);
-    expect(screen.getByText(authenticatedUser.username)).toBeInTheDocument();
+    expect(screen.getByRole('button', { className: 'd-md-none' })).toBeInTheDocument();
   });
 
   it('displays course data', () => {

src/studio-header/HeaderBody.jsx

@@ -20,7 +20,7 @@ const HeaderBody = ({
   number,
   org,
   title,
-  username,
+  name,
   isAdmin,
   studioBaseUrl,
   logoutUrl,
@@ -99,7 +99,7 @@ const HeaderBody = ({
         <Nav>
           <UserMenu
             {...{
-              username,
+              name,
               studioBaseUrl,
               logoutUrl,
               authenticatedUserAvatar,
@@ -124,7 +124,7 @@ HeaderBody.propTypes = {
   logo: PropTypes.string,
   logoAltText: PropTypes.string,
   authenticatedUserAvatar: PropTypes.string,
-  username: PropTypes.string,
+  name: PropTypes.string,
   isAdmin: PropTypes.bool,
   isMobile: PropTypes.bool,
   isHiddenMainMenu: PropTypes.bool,
@@ -149,7 +149,7 @@ HeaderBody.defaultProps = {
   org: '',
   title: '',
   authenticatedUserAvatar: null,
-  username: null,
+  name: null,
   isAdmin: false,
   isMobile: false,
   isHiddenMainMenu: false,

src/studio-header/StudioHeader.jsx

@@ -25,7 +25,7 @@ const StudioHeader = ({
     number,
     org,
     title,
-    username: authenticatedUser?.username,
+    name: authenticatedUser?.name,
     isAdmin: authenticatedUser?.administrator,
     authenticatedUserAvatar: authenticatedUser?.avatar,
     studioBaseUrl: config.STUDIO_BASE_URL,

src/studio-header/StudioHeader.test.jsx

@@ -16,6 +16,7 @@ import messages from './messages';
 const authenticatedUser = {
   userId: 3,
   username: 'abc123',
+  name: 'test',
   administrator: true,
   roles: [],
   avatar: '/imges/test.png',

src/studio-header/UserMenu.jsx

@@ -8,11 +8,10 @@ import NavDropdownMenu from './NavDropdownMenu';
 import getUserMenuItems from './utils';
 
 const UserMenu = ({
-  username,
+  name,
   studioBaseUrl,
   logoutUrl,
   authenticatedUserAvatar,
-  isMobile,
   isAdmin,
   // injected
   intl,
@@ -21,22 +20,21 @@ const UserMenu = ({
     <img
       className="d-block w-100 h-100"
       src={authenticatedUserAvatar}
-      alt={username}
+      alt={name}
       data-testid="avatar-image"
     />
   ) : (
     <Avatar
       size="sm"
       className="mr-2"
-      alt={username}
+      alt={name}
       data-testid="avatar-icon"
     />
   );
-  const title = isMobile ? avatar : <>{avatar}{username}</>;
 
   return (
     <NavDropdownMenu
-      buttonTitle={title}
+      buttonTitle={avatar}
       id="user-dropdown-menu"
       items={getUserMenuItems({
         studioBaseUrl,
@@ -49,21 +47,19 @@ const UserMenu = ({
 };
 
 UserMenu.propTypes = {
-  username: PropTypes.string,
+  name: PropTypes.string,
   studioBaseUrl: PropTypes.string.isRequired,
   logoutUrl: PropTypes.string.isRequired,
   authenticatedUserAvatar: PropTypes.string,
-  isMobile: PropTypes.bool,
   isAdmin: PropTypes.bool,
   // injected
   intl: intlShape.isRequired,
 };
 
 UserMenu.defaultProps = {
-  isMobile: false,
   isAdmin: false,
   authenticatedUserAvatar: null,
-  username: null,
+  name: null,
 };
 
 export default injectIntl(UserMenu);