Merge pull request #2459 from HHS/main

[Prod] Fix markup (Accessibility improvements)
HHS · Nov 5, 2024 · 06e0675 · 06e0675
2 parents d23d7cb + 5844a53
commit 06e0675
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 21 deletions.
diff --git a/frontend/src/components/AvatarGroup.js b/frontend/src/components/AvatarGroup.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Avatar from './Avatar';
+
+const AvatarGroup = ({ userName, className }) => (
+  <h2 className={`margin-0 display-flex flex-align-center border-bottom border-gray-10 ${className}`}>
+    <Avatar name={userName} />
+    <span className="margin-left-2 font-sans-xs">
+      {userName}
+    </span>
+  </h2>
+);
+
+AvatarGroup.propTypes = {
+  userName: PropTypes.string.isRequired,
+  className: PropTypes.string,
+};
+
+AvatarGroup.defaultProps = {
+  className: 'padding-2',
+};
+
+export default AvatarGroup;
diff --git a/frontend/src/components/FeedArticle.js b/frontend/src/components/FeedArticle.js
@@ -48,7 +48,7 @@ const FeedArticle = ({
   return (
     <article className={`${className} position-relative margin-bottom-3 padding-bottom-3 ${unread ? 'ttahub-feed-article--unread' : ''}`}>
       <div className="ttahub-feed-article-content position-relative maxw-tablet">
-        <h4 className="ttahub-feed-article-title usa-prose margin-0 padding-0">{title}</h4>
+        {title && (<h4 className="ttahub-feed-article-title usa-prose margin-0 padding-0">{title}</h4>)}
         {parse(content)}
       </div>
     </article>

diff --git a/frontend/src/components/FileUploader/DeleteFileModal.js b/frontend/src/components/FileUploader/DeleteFileModal.js
@@ -18,7 +18,7 @@ const DeleteFileModal = ({
         modalId="DeleteFileModal"
         title="Delete File"
         okButtonText="Delete"
-        okButtonAriaLabel="This button will permanently delete the file."
+        okButtonAriaLabel="Confirm delete"
       >
         <p>
           Are you sure you want to delete

diff --git a/frontend/src/components/FileUploader/FileTable.js b/frontend/src/components/FileUploader/FileTable.js
@@ -63,8 +63,9 @@ const FileTable = ({ onFileRemoved, files }) => {
             <th width="20%">
               Status
             </th>
-            <th width="10%" aria-label="remove file" />
-
+            <th width="10%">
+              <span className="usa-sr-only">Remove file</span>
+            </th>
           </tr>
         </thead>
         <tbody>

diff --git a/frontend/src/components/HeaderUserMenu.js b/frontend/src/components/HeaderUserMenu.js
@@ -5,6 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
 import { useLocation } from 'react-router-dom';
 import Avatar from './Avatar';
+import AvatarGroup from './AvatarGroup';
 import DropdownMenu from './DropdownMenu';
 import './HeaderUserMenu.scss';
 import NavLink from './NavLink';
@@ -19,8 +20,10 @@ function UserMenuNav({ items }) {
   return (
     <div>
       <ul className="user-menu-nav">
-        {items.map(({ key, element, liClass }) => (
-          <li key={key} className={liClass}>
+        {items.map(({
+          key, element, liClass, presentation,
+        }) => (
+          <li key={key} className={liClass} role={presentation ? 'presentation' : 'listitem'}>
             {element}
           </li>
         ))}
@@ -33,6 +36,7 @@ UserMenuNav.propTypes = {
   items: PropTypes.arrayOf(PropTypes.shape({
     key: PropTypes.number,
     element: PropTypes.element,
+    presentation: PropTypes.bool,
   })).isRequired,
 };
 
@@ -105,12 +109,13 @@ function HeaderUserMenu({ areThereUnreadNotifications, setAreThereUnreadNotifica
     fn = onItemClick,
   }) => {
     if (showIfAdmin && !userIsAdmin) return false;
-    if (divider) return { key, element: <hr /> };
-    if (space) return { key, element: <div className="height-6" /> };
+    if (divider) return { key, presentation: true, element: <hr /> };
+    if (space) return { key, presentation: true, element: <div aria-hidden="true" className="height-6" /> };
 
     if (external) {
       return {
         key,
+        presentation: false,
         element: (
           <Link key={key} className="usa-nav__link" href={to} target="_blank" rel="noopener noreferrer">
             <span>{label}</span>
@@ -123,6 +128,7 @@ function HeaderUserMenu({ areThereUnreadNotifications, setAreThereUnreadNotifica
 
     return {
       key,
+      presentation: false,
       element: (
         <>
           <NavLink key={key} to={to} fn={fn}>
@@ -195,12 +201,7 @@ function HeaderUserMenu({ areThereUnreadNotifications, setAreThereUnreadNotifica
       className="no-print"
     >
       <div className="user-menu-dropdown" data-testid="user-menu-dropdown">
-        <h4 className="margin-0 display-flex flex-align-center padding-2 border-bottom border-gray-10">
-          <Avatar name={user.name} />
-          <span className="margin-left-2">
-            {user.name}
-          </span>
-        </h4>
+        <AvatarGroup userName={user.name} />
         {isImpersonating && (
           <div className="display-flex flex-justify-center margin-top-2">
             <Button type="button" onClick={stopImpersonating}>

diff --git a/frontend/src/pages/AccountManagement/index.js b/frontend/src/pages/AccountManagement/index.js
@@ -15,7 +15,6 @@ import {
 
 import { useForm, FormProvider, useFormContext } from 'react-hook-form';
 import { useParams } from 'react-router';
-import Avatar from '../../components/Avatar';
 import UserContext from '../../UserContext';
 import {
   subscribe,
@@ -29,6 +28,7 @@ import EmailVerifier from './EmailVerifier';
 import Groups from './components/Groups';
 import WidgetCard from '../../components/WidgetCard';
 import WidgetHeader from '../../components/WidgetHeader';
+import AvatarGroup from '../../components/AvatarGroup';
 
 const emailPreferenceErrorMessage = 'Please select a frequency preference';
 
@@ -381,10 +381,7 @@ function AccountManagement({ updateUser }) {
       <WidgetCard header={<WidgetHeader>Profile</WidgetHeader>}>
         {/* Avatar w/ name */}
         <div className="margin-bottom-3">
-          <h4 className="margin-0 display-flex flex-align-center padding-bottom-3 border-bottom border-gray-20">
-            <Avatar name={user.name} />
-            <span className="margin-left-2">{user.name}</span>
-          </h4>
+          <AvatarGroup userName={user.name} className="padding-bottom-3" />
         </div>
 
         {/* Last login */}

diff --git a/frontend/src/pages/SessionForm/pages/__tests__/sessionSummary.js b/frontend/src/pages/SessionForm/pages/__tests__/sessionSummary.js
@@ -243,7 +243,7 @@ describe('sessionSummary', () => {
       fetchMock.delete(deleteUrl, 200);
 
       const confirmDelete = await screen.findByRole('button', {
-        name: /This button will permanently delete the file/i,
+        name: /confirm delete/i,
       });
 
       act(() => {
@@ -335,7 +335,7 @@ describe('sessionSummary', () => {
       fetchMock.delete(deleteUrl, 500);
 
       const confirmDelete = await screen.findByRole('button', {
-        name: /This button will permanently delete the file/i,
+        name: /confirm delete/i,
       });
 
       act(() => {