From bc197d456c2501adee5628cc7b75c63951f50a1f Mon Sep 17 00:00:00 2001
From: Eleni Chappen <eleni.chappen@gsa.gov>
Date: Mon, 9 Sep 2024 14:02:06 -0500
Subject: [PATCH 01/10] functional org roles overlay

---
 .../components/UserAccount/Username.test.js   | 22 +-----
 .../UsersActions/UsersActionsOrgRoles.test.js |  2 +-
 .../components/UsersList/UsersList.test.js    | 18 ++++-
 .../orgs/[orgId]/users/[userId]/layout.tsx    |  7 +-
 src/assets/stylesheets/styles.scss            | 31 +++++++-
 .../Overlays/OrgUserOrgRolesOverlay.tsx       | 52 +++++++++++++
 src/components/UserAccount/Username.tsx       | 11 +--
 .../UsersActions/UsersActionsOrgRoles.tsx     | 29 +++++--
 src/components/UsersList/UsersList.tsx        | 75 ++++++++++++++++++-
 .../UsersList/UsersListOrgRoles.tsx           | 20 +++--
 src/components/uswds/Alert.tsx                | 15 +++-
 src/components/uswds/Tag.tsx                  |  2 +-
 12 files changed, 237 insertions(+), 47 deletions(-)
 create mode 100644 src/components/Overlays/OrgUserOrgRolesOverlay.tsx

diff --git a/__tests__/components/UserAccount/Username.test.js b/__tests__/components/UserAccount/Username.test.js
index 95af1cdb..2fa35662 100644
--- a/__tests__/components/UserAccount/Username.test.js
+++ b/__tests__/components/UserAccount/Username.test.js
@@ -7,14 +7,9 @@ import { render, screen } from '@testing-library/react';
 import { Username } from '@/components/UserAccount/Username';
 
 describe('Username', () => {
-  it('when given a user, displays the user name', () => {
-    // setup
-    const mockUser = {
-      guid: 'userguid',
-      username: 'User 1',
-    };
+  it('when given a username, displays it', () => {
     // act
-    render(<Username user={mockUser} />);
+    render(<Username username="User 1" />);
     const content = screen.getByText('User 1');
     // assert
     expect(content).toBeInTheDocument();
@@ -23,16 +18,12 @@ describe('Username', () => {
   it('when given a service account user, displays the service account name', () => {
     // setup
     const guid = 'cafce0be-62dd-4f02-9770-d546c8714430';
-    const mockUser = {
-      guid: 'userguid',
-      username: guid,
-    };
     const mockAccount = {
       guid: guid,
       name: 'Auditor 1',
     };
     // act
-    render(<Username user={mockUser} serviceAccount={mockAccount} />);
+    render(<Username username="foo user" serviceAccount={mockAccount} />);
     const auditor = screen.getByText(/Auditor 1/);
     const svcAcct = screen.getByText(/service/);
     const username = screen.queryByText(guid);
@@ -43,13 +34,8 @@ describe('Username', () => {
   });
 
   it('when given a user without a username, displays default text', () => {
-    // setup
-    const mockUser = {
-      guid: 'userguid',
-      username: '',
-    };
     // act
-    render(<Username user={mockUser} />);
+    render(<Username username="" />);
     const content = screen.getByText('Unnamed user');
     // assert
     expect(content).toBeInTheDocument();
diff --git a/__tests__/components/UsersActions/UsersActionsOrgRoles.test.js b/__tests__/components/UsersActions/UsersActionsOrgRoles.test.js
index 9d80a93a..eb8a90ef 100644
--- a/__tests__/components/UsersActions/UsersActionsOrgRoles.test.js
+++ b/__tests__/components/UsersActions/UsersActionsOrgRoles.test.js
@@ -76,7 +76,7 @@ describe('UsersActionsOrgRoles', () => {
         expect(screen.getByText(/Billing manager/)).toBeInTheDocument()
       );
       // query
-      const submitBtn = screen.getByText('Save');
+      const submitBtn = screen.getByText('Update roles');
       // act
       fireEvent.click(submitBtn);
       // expect a success message
diff --git a/__tests__/components/UsersList/UsersList.test.js b/__tests__/components/UsersList/UsersList.test.js
index 8fa2e82a..21b40b0d 100644
--- a/__tests__/components/UsersList/UsersList.test.js
+++ b/__tests__/components/UsersList/UsersList.test.js
@@ -1,7 +1,7 @@
 /**
  * @jest-environment jsdom
  */
-import { describe, expect, it } from '@jest/globals';
+import { describe, expect, it, beforeAll } from '@jest/globals';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { UsersList } from '@/components/UsersList/UsersList';
@@ -68,6 +68,22 @@ const mockUserLogonTime = {
 };
 
 describe('UsersList', () => {
+  beforeAll(() => {
+    /* global jest */
+    /* eslint no-undef: "off" */
+    HTMLDialogElement.prototype.show = jest.fn(function () {
+      this.open = true;
+    });
+
+    HTMLDialogElement.prototype.showModal = jest.fn(function () {
+      this.open = true;
+    });
+
+    HTMLDialogElement.prototype.close = jest.fn(function () {
+      this.open = false;
+    });
+    /* eslint no-undef: "error" */
+  });
   it('sorts all users by username in alpha order', () => {
     // act
     render(
diff --git a/src/app/orgs/[orgId]/users/[userId]/layout.tsx b/src/app/orgs/[orgId]/users/[userId]/layout.tsx
index 68833031..473daed4 100644
--- a/src/app/orgs/[orgId]/users/[userId]/layout.tsx
+++ b/src/app/orgs/[orgId]/users/[userId]/layout.tsx
@@ -26,7 +26,12 @@ export default async function SpaceLayout({
       </div>
       <div className="margin-top-3">
         <PageHeader
-          heading={<Username user={user} serviceAccount={serviceAccount} />}
+          heading={
+            <Username
+              username={user.username}
+              serviceAccount={serviceAccount}
+            />
+          }
         />
       </div>
       {children}
diff --git a/src/assets/stylesheets/styles.scss b/src/assets/stylesheets/styles.scss
index dcdd4377..372fa834 100644
--- a/src/assets/stylesheets/styles.scss
+++ b/src/assets/stylesheets/styles.scss
@@ -96,13 +96,22 @@
   ),
 
   $background-color-palettes: (
-    'palette-color-system-mint-medium' // no trailing comma
+    'palette-color-system-mint-medium',
+    'palette-color-system-green-cool-vivid' // no trailing comma
+  ),
+
+  $border-color-palettes: (
+    'palette-color-system-green-cool' // no trailing comma
   ),
 
   $top-palettes: (
     'palette-units-system-positive'
   ),
 
+  $bottom-palettes: (
+    'palette-units-system-positive'
+  ),
+
   $right-palettes: (
     'palette-units-system-positive'
   ),
@@ -312,3 +321,23 @@ dialog.overlayDrawer[open]::backdrop {
     background-color: rgb(0 0 0 / 0%);
   }
 }
+
+// USA Checkbox
+
+.usa-checkbox {
+  background: initial; // removes white bg provided by USWDS
+}
+
+// USA Alerts
+
+$success-color-bright: 'green-cool-5v';
+$success-color-dark: 'green-cool-50';
+
+.usa-alert--success {
+  @include u-bg($success-color-bright);
+  border-left-color: color($success-color-dark);
+
+  .usa-alert__body {
+    @include u-bg($success-color-bright);
+  }
+}
diff --git a/src/components/Overlays/OrgUserOrgRolesOverlay.tsx b/src/components/Overlays/OrgUserOrgRolesOverlay.tsx
new file mode 100644
index 00000000..c92508d3
--- /dev/null
+++ b/src/components/Overlays/OrgUserOrgRolesOverlay.tsx
@@ -0,0 +1,52 @@
+import { UsersActionsOrgRoles } from '@/components/UsersActions/UsersActionsOrgRoles';
+import { Username } from '@/components/UserAccount/Username';
+import { UserOrgPage } from '@/controllers/controller-types';
+import { ServiceCredentialBindingObj } from '@/api/cf/cloudfoundry-types';
+import { Tag } from '@/components/uswds/Tag';
+
+export function OrgUserOrgRolesOverlay({
+  orgGuid,
+  user,
+  onCancel,
+  onSuccess,
+  serviceAccount,
+}: {
+  orgGuid: string;
+  user?: UserOrgPage | undefined | null;
+  onCancel: Function;
+  onSuccess: Function;
+  serviceAccount?: ServiceCredentialBindingObj | undefined | null;
+}) {
+  if (!user) return null;
+  return (
+    <>
+      <h4
+        className="margin-top-0 margin-bottom-7 text-uppercase text-light underline-base-light text-underline"
+        style={{ textUnderlineOffset: '0.7em' }}
+      >
+        update organization roles
+      </h4>
+      {serviceAccount && (
+        <Tag
+          className={'bg-primary font-sans-3xs text-white text-light text-ls-3'}
+          label="service"
+        />
+      )}
+      <h2 className="margin-top-1">
+        <Username username={user.username} />
+      </h2>
+      <div className="usa-prose">
+        <p>
+          By assigning specific roles, you can grant a user access to specific
+          information and features within a given organization.
+        </p>
+        <UsersActionsOrgRoles
+          orgGuid={orgGuid}
+          userGuid={user.guid}
+          onCancel={onCancel}
+          onSuccess={onSuccess}
+        />
+      </div>
+    </>
+  );
+}
diff --git a/src/components/UserAccount/Username.tsx b/src/components/UserAccount/Username.tsx
index e95e771a..e2699f0f 100644
--- a/src/components/UserAccount/Username.tsx
+++ b/src/components/UserAccount/Username.tsx
@@ -1,16 +1,13 @@
 'use client';
 
-import {
-  ServiceCredentialBindingObj,
-  UserObj,
-} from '@/api/cf/cloudfoundry-types';
+import { ServiceCredentialBindingObj } from '@/api/cf/cloudfoundry-types';
 import { ServiceTag } from '@/components/ServiceTag';
 
 export function Username({
-  user,
+  username,
   serviceAccount,
 }: {
-  user: UserObj;
+  username?: string;
   serviceAccount?: ServiceCredentialBindingObj | undefined;
 }) {
   if (serviceAccount) {
@@ -21,6 +18,6 @@ export function Username({
       </>
     );
   } else {
-    return <>{user.username ? user.username : 'Unnamed user'}</>;
+    return <>{username ? username : 'Unnamed user'}</>;
   }
 }
diff --git a/src/components/UsersActions/UsersActionsOrgRoles.tsx b/src/components/UsersActions/UsersActionsOrgRoles.tsx
index adc3c017..d3970bbc 100644
--- a/src/components/UsersActions/UsersActionsOrgRoles.tsx
+++ b/src/components/UsersActions/UsersActionsOrgRoles.tsx
@@ -60,11 +60,15 @@ const initialRoles = {
 export function UsersActionsOrgRoles({
   orgGuid,
   userGuid,
+  onCancel,
   onCancelPath,
+  onSuccess,
 }: {
   orgGuid: string;
   userGuid: string;
+  onCancel?: Function;
   onCancelPath?: string;
+  onSuccess?: Function;
 }) {
   const [roles, setRoles] = useState(initialRoles as FormRoles);
   const [dataLoaded, setDataLoaded] = useState(false);
@@ -127,6 +131,7 @@ export function UsersActionsOrgRoles({
         setRoles(initialRoles); // reset data is needed to wipe the old guids from removed roles
         setFetchedRolesToState(result.payload.resources);
         setActionStatus('success' as ActionStatus);
+        onSuccess && onSuccess(userGuid);
       }
       if (result?.meta?.status === 'error') {
         result?.meta?.errors && setActionErrors(result.meta.errors);
@@ -156,10 +161,10 @@ export function UsersActionsOrgRoles({
       )}
       <form onSubmit={onSubmit} name="edit-org-roles-form">
         <fieldset className="usa-fieldset">
-          <legend className="usa-legend margin-bottom-2">
+          <legend className="usa-legend usa-sr-only margin-bottom-2">
             <strong>Select org roles</strong>
           </legend>
-          <div className="padding-3 bg-white">
+          <div className="padding-3 border-top border-base-light">
             {Object.values(roles).map((role, i) => (
               <div
                 key={`UsersActionsOrgRoles-checkbox-${i}`}
@@ -178,7 +183,14 @@ export function UsersActionsOrgRoles({
               </div>
             ))}
           </div>
-          <div className="padding-top-3">
+          <div>
+            <Button
+              className="margin-right-4"
+              type="submit"
+              disabled={actionStatus === 'pending'}
+            >
+              Update roles
+            </Button>
             {onCancelPath && (
               <Link
                 href={onCancelPath}
@@ -187,9 +199,14 @@ export function UsersActionsOrgRoles({
                 Cancel
               </Link>
             )}
-            <Button type="submit" disabled={actionStatus === 'pending'}>
-              Save
-            </Button>
+            {onCancel && (
+              <Button
+                className="usa-button--outline"
+                onClick={() => onCancel()}
+              >
+                Cancel
+              </Button>
+            )}
           </div>
           {actionStatus === 'pending' && <p>submission in progress...</p>}
         </fieldset>
diff --git a/src/components/UsersList/UsersList.tsx b/src/components/UsersList/UsersList.tsx
index a8802457..d2e5f16c 100644
--- a/src/components/UsersList/UsersList.tsx
+++ b/src/components/UsersList/UsersList.tsx
@@ -23,9 +23,14 @@ import { UsersListSpaceRoles } from '@/components/UsersList/UsersListSpaceRoles'
 import { UserAccountExpires } from '@/components/UserAccount/UserAccountExpires';
 import { UserAccountLastLogin } from '@/components/UserAccount/UserAccountLastLogin';
 import { UsersActionsRemoveFromOrg } from '@/components/UsersActions/UsersActionsRemoveFromOrg';
+import { OverlayDrawer } from '@/components/OverlayDrawer';
+import { OrgUserOrgRolesOverlay } from '@/components/Overlays/OrgUserOrgRolesOverlay';
+import { Button } from '@/components/uswds/Button';
 
 type SortDirection = 'asc' | 'desc';
 
+type DialogType = 'org' | 'space';
+
 export function UsersList({
   users,
   roles,
@@ -45,6 +50,10 @@ export function UsersList({
   const [searchValue, setSearchValue] = useState('' as string);
   const [sortParam, setSortParam] = useState('username' as string);
   const [sortDir, setSortDir] = useState('asc' as SortDirection);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [dialogType, setDialogType] = useState('org' as DialogType);
+  const [currentMemberId, setCurrentMemberId] = useState('');
+  const [successMsg, setSuccessMsg] = useState('');
 
   // Searching/Filtering
   const onSearchAction = (value: string) => {
@@ -96,7 +105,7 @@ export function UsersList({
     }
   };
 
-  // Modal
+  // Remove Modal
   const modalHeadingId = (name: string) => `removeUserSuccess-${name}`;
 
   function closeModal(): undefined {
@@ -112,13 +121,71 @@ export function UsersList({
     openModal(user);
   }
 
+  // Org roles overlay
+
+  const openOrgRoles = (userId: string) => {
+    setDialogType('org');
+    setCurrentMemberId(userId);
+    setDialogOpen(true);
+  };
+
+  const closeOrgRoles = () => {
+    setDialogOpen(false);
+    setCurrentMemberId('');
+  };
+
+  // success message
+
+  const dismissSuccessMsg = () => {
+    setSuccessMsg('');
+  };
+  const onOrgRolesSuccess = (userId: string) => {
+    const username = users.find((user) => user.guid === userId)?.username;
+    const usernameText = username ? `for ${username}` : '';
+    const msg = `The organization roles ${usernameText} have been updated.`;
+    setSuccessMsg(msg);
+    closeOrgRoles();
+  };
+
   // Helpers
   const currentUsers = usersSorted(usersFiltered(users));
   const usersResultsText = currentUsers.length === 1 ? 'user' : 'users';
   const spacesCount = Object.keys(spaces).length;
+  const currentMember =
+    users.find((user) => user.guid === currentMemberId) || null;
 
   return (
     <>
+      <OverlayDrawer
+        id="overlay-drawer-1"
+        isOpen={dialogOpen}
+        close={() => closeOrgRoles()}
+      >
+        {dialogType === 'org' && (
+          <OrgUserOrgRolesOverlay
+            onCancel={() => {
+              closeOrgRoles();
+            }}
+            orgGuid={orgGuid}
+            user={currentMember}
+            serviceAccount={serviceAccounts[currentMember?.username || '']}
+            onSuccess={onOrgRolesSuccess}
+          />
+        )}
+      </OverlayDrawer>
+
+      {successMsg && (
+        <Alert type="success" className="margin-bottom-4">
+          {successMsg}{' '}
+          <Button
+            onClick={() => dismissSuccessMsg()}
+            className="usa-button--unstyled text-bold text-ink"
+          >
+            (Dismiss this message.)
+          </Button>
+        </Alert>
+      )}
+
       <ListSearchInput
         onSubmit={onSearchAction}
         labelText="Find account names that match:"
@@ -193,7 +260,7 @@ export function UsersList({
                 <div className="display-flex flex-justify">
                   <span className="mobile-lg:text-bold maxw-card-lg text-ellipsis">
                     <Username
-                      user={user}
+                      username={user.username}
                       serviceAccount={serviceAccounts[user.username]}
                     />
                   </span>
@@ -205,8 +272,10 @@ export function UsersList({
                 sort={sortParam === 'orgRolesCount'}
               >
                 <UsersListOrgRoles
-                  href={`/orgs/${orgGuid}/users/${user.guid}/org-roles`}
                   orgRolesCount={user.orgRolesCount}
+                  onClick={() => {
+                    openOrgRoles(user.guid);
+                  }}
                 />
               </TableCell>
 
diff --git a/src/components/UsersList/UsersListOrgRoles.tsx b/src/components/UsersList/UsersListOrgRoles.tsx
index c206702f..3fb8750f 100644
--- a/src/components/UsersList/UsersListOrgRoles.tsx
+++ b/src/components/UsersList/UsersListOrgRoles.tsx
@@ -1,29 +1,35 @@
 'use client';
 
 import React from 'react';
-import Link from 'next/link';
+import { Button } from '@/components/uswds/Button';
 import { pluralize } from '@/helpers/text';
 
 export function UsersListOrgRoles({
   orgRolesCount,
-  href,
+  onClick,
 }: {
   orgRolesCount: number;
-  href: string;
+  onClick: Function;
 }) {
   if (orgRolesCount <= 0) {
     return (
       <>
         None yet —{' '}
-        <Link href={href} className="usa-button--unstyled text-bold">
+        <Button
+          className="usa-button--unstyled font-ui-2xs text-bold"
+          onClick={() => onClick()}
+        >
           edit roles
-        </Link>
+        </Button>
       </>
     );
   }
   return (
-    <Link href={href} className="usa-button--unstyled">
+    <Button
+      className="usa-button--unstyled font-ui-2xs"
+      onClick={() => onClick()}
+    >
       {`${orgRolesCount} ${pluralize('role', orgRolesCount)}`}
-    </Link>
+    </Button>
   );
 }
diff --git a/src/components/uswds/Alert.tsx b/src/components/uswds/Alert.tsx
index dece5638..064b2569 100644
--- a/src/components/uswds/Alert.tsx
+++ b/src/components/uswds/Alert.tsx
@@ -42,8 +42,21 @@ export function Alert({
 
   const Heading = headingLevel;
 
+  let role = 'region';
+  if (type === 'success') {
+    role = 'status';
+  }
+  if (type === 'error' || type === 'emergency') {
+    role = 'alert';
+  }
+
   return (
-    <div className={classes} {...defaultProps}>
+    <div
+      className={classes}
+      role={role}
+      {...defaultProps}
+      aria-label={role === 'region' ? `${type} alert` : ''}
+    >
       <div className="usa-alert__body">
         {heading && <Heading className="usa-alert__heading">{heading}</Heading>}
         {children &&
diff --git a/src/components/uswds/Tag.tsx b/src/components/uswds/Tag.tsx
index f9855e01..077c9b15 100644
--- a/src/components/uswds/Tag.tsx
+++ b/src/components/uswds/Tag.tsx
@@ -7,6 +7,6 @@ export function Tag({
   className?: string;
   label: string;
 }) {
-  const classes = classNames('usa-tag', className);
+  const classes = classNames('usa-tag radius-pill', className);
   return <span className={classes}>{label}</span>;
 }

From 94231c7c564dc04b611105da0d20883ca3f07068 Mon Sep 17 00:00:00 2001
From: Eleni Chappen <eleni.chappen@gsa.gov>
Date: Mon, 9 Sep 2024 16:35:38 -0500
Subject: [PATCH 02/10] functional spaces roles overlay

---
 .../users/[userId]/org-roles/actions.test.js  |  4 +-
 .../orgs/[orgId]/users/[userId]/actions.tsx   |  2 +-
 .../users/[userId]/org-roles/actions.tsx      |  2 +-
 src/assets/stylesheets/styles.scss            | 47 ++++++++-
 src/components/GridList/GridListItem.tsx      |  5 +-
 .../Overlays/OrgUserOrgRolesOverlay.tsx       | 23 ++---
 .../Overlays/OverlayHeaderUsername.tsx        | 33 +++++++
 src/components/Overlays/SpaceRolesOverlay.tsx | 35 +++++++
 .../UsersActions/UsersActionsOrgRoles.tsx     | 11 ++-
 .../UsersActionsSpaceRoles.tsx                | 96 ++++++++++++-------
 src/components/UsersList/UsersList.tsx        | 56 +++++++----
 .../UsersList/UsersListSpaceRoles.tsx         | 20 ++--
 src/components/uswds/Alert.tsx                |  6 +-
 13 files changed, 247 insertions(+), 93 deletions(-)
 create mode 100644 src/components/Overlays/OverlayHeaderUsername.tsx
 create mode 100644 src/components/Overlays/SpaceRolesOverlay.tsx

diff --git a/__tests__/app/orgs/[orgId]/users/[userId]/org-roles/actions.test.js b/__tests__/app/orgs/[orgId]/users/[userId]/org-roles/actions.test.js
index c262ec9d..b0c87915 100644
--- a/__tests__/app/orgs/[orgId]/users/[userId]/org-roles/actions.test.js
+++ b/__tests__/app/orgs/[orgId]/users/[userId]/org-roles/actions.test.js
@@ -105,9 +105,7 @@ describe('edit org roles actions', () => {
         // act/expect
         expect(async () => {
           await updateOrgRolesForUser(userGuid, orgGuid, roles);
-        }).rejects.toThrow(
-          new Error('Unable to edit org role. Please try again.')
-        );
+        }).rejects.toThrow(new Error('Try submitting your changes again.'));
       });
     });
   });
diff --git a/src/app/orgs/[orgId]/users/[userId]/actions.tsx b/src/app/orgs/[orgId]/users/[userId]/actions.tsx
index 0668cf59..4a4e6b2e 100644
--- a/src/app/orgs/[orgId]/users/[userId]/actions.tsx
+++ b/src/app/orgs/[orgId]/users/[userId]/actions.tsx
@@ -40,7 +40,7 @@ export async function updateSpaceRolesForUser(
       logDevError(
         `api error on cf edit spaces page with http code ${response.status} for url: ${response.url}`
       );
-      throw new Error('Unable to edit space role. Please try again.');
+      throw new Error('Try submitting your changes again.');
     }
     return response.headers.get('Location');
   });
diff --git a/src/app/orgs/[orgId]/users/[userId]/org-roles/actions.tsx b/src/app/orgs/[orgId]/users/[userId]/org-roles/actions.tsx
index 01d2ff50..8eb9f88a 100644
--- a/src/app/orgs/[orgId]/users/[userId]/org-roles/actions.tsx
+++ b/src/app/orgs/[orgId]/users/[userId]/org-roles/actions.tsx
@@ -41,7 +41,7 @@ export async function updateOrgRolesForUser(
       logDevError(
         `api error on cf edit org page with http code ${response.status} for url: ${response.url}`
       );
-      throw new Error('Unable to edit org role. Please try again.');
+      throw new Error('Try submitting your changes again.');
     }
     return response.headers.get('Location');
   });
diff --git a/src/assets/stylesheets/styles.scss b/src/assets/stylesheets/styles.scss
index 372fa834..4f05fdba 100644
--- a/src/assets/stylesheets/styles.scss
+++ b/src/assets/stylesheets/styles.scss
@@ -97,11 +97,13 @@
 
   $background-color-palettes: (
     'palette-color-system-mint-medium',
-    'palette-color-system-green-cool-vivid' // no trailing comma
+    'palette-color-system-green-cool-vivid',
+    'palette-color-system-red-cool-vivid' // no trailing comma
   ),
 
   $border-color-palettes: (
-    'palette-color-system-green-cool' // no trailing comma
+    'palette-color-system-green-cool',
+    'palette-color-system-red-vivid' // no trailing comma
   ),
 
   $top-palettes: (
@@ -328,16 +330,51 @@ dialog.overlayDrawer[open]::backdrop {
   background: initial; // removes white bg provided by USWDS
 }
 
+.usa-checkbox__label::before {
+  background: initial;
+  box-shadow: 0 0 0 2px color('primary');
+}
+
+// primary color #2C608A
+
 // USA Alerts
 
-$success-color-bright: 'green-cool-5v';
+$success-color-light: 'green-cool-5v';
 $success-color-dark: 'green-cool-50';
+$error-color-light: 'red-cool-10v';
+$error-color-dark: 'red-40v';
+
+.usa-alert .usa-alert__body {
+  max-width: none;
+}
+
+.usa-alert .usa-alert__body h4 {
+  @include u-font-size('sans', 'md');
+  margin-bottom: units(2px);
+}
 
 .usa-alert--success {
-  @include u-bg($success-color-bright);
+  @include u-bg($success-color-light);
   border-left-color: color($success-color-dark);
 
   .usa-alert__body {
-    @include u-bg($success-color-bright);
+    @include u-bg($success-color-light);
+
+    &:before {
+      @include u-bg($success-color-dark); // icon color
+    }
+  }
+}
+
+.usa-alert--error {
+  @include u-bg($error-color-light);
+  border-left-color: color($error-color-dark);
+
+  .usa-alert__body {
+    @include u-bg($error-color-light);
+
+    &:before {
+      @include u-bg($error-color-dark); // icon color
+    }
   }
 }
diff --git a/src/components/GridList/GridListItem.tsx b/src/components/GridList/GridListItem.tsx
index 67c16865..7b6ed68b 100644
--- a/src/components/GridList/GridListItem.tsx
+++ b/src/components/GridList/GridListItem.tsx
@@ -2,10 +2,7 @@ import React from 'react';
 
 export function GridListItem({ children }: { children: React.ReactNode }) {
   return (
-    <div
-      role="listitem"
-      className="border padding-x-5 padding-y-3 radius-md border-base-lighter bg-white"
-    >
+    <div role="listitem" className="padding-y-3">
       {children}
     </div>
   );
diff --git a/src/components/Overlays/OrgUserOrgRolesOverlay.tsx b/src/components/Overlays/OrgUserOrgRolesOverlay.tsx
index c92508d3..8160a374 100644
--- a/src/components/Overlays/OrgUserOrgRolesOverlay.tsx
+++ b/src/components/Overlays/OrgUserOrgRolesOverlay.tsx
@@ -1,8 +1,7 @@
 import { UsersActionsOrgRoles } from '@/components/UsersActions/UsersActionsOrgRoles';
-import { Username } from '@/components/UserAccount/Username';
 import { UserOrgPage } from '@/controllers/controller-types';
 import { ServiceCredentialBindingObj } from '@/api/cf/cloudfoundry-types';
-import { Tag } from '@/components/uswds/Tag';
+import { OverlayHeaderUsername } from './OverlayHeaderUsername';
 
 export function OrgUserOrgRolesOverlay({
   orgGuid,
@@ -20,21 +19,11 @@ export function OrgUserOrgRolesOverlay({
   if (!user) return null;
   return (
     <>
-      <h4
-        className="margin-top-0 margin-bottom-7 text-uppercase text-light underline-base-light text-underline"
-        style={{ textUnderlineOffset: '0.7em' }}
-      >
-        update organization roles
-      </h4>
-      {serviceAccount && (
-        <Tag
-          className={'bg-primary font-sans-3xs text-white text-light text-ls-3'}
-          label="service"
-        />
-      )}
-      <h2 className="margin-top-1">
-        <Username username={user.username} />
-      </h2>
+      <OverlayHeaderUsername
+        header="update organization roles"
+        serviceAccount={serviceAccount}
+        username={user.username}
+      />
       <div className="usa-prose">
         <p>
           By assigning specific roles, you can grant a user access to specific
diff --git a/src/components/Overlays/OverlayHeaderUsername.tsx b/src/components/Overlays/OverlayHeaderUsername.tsx
new file mode 100644
index 00000000..44acd96d
--- /dev/null
+++ b/src/components/Overlays/OverlayHeaderUsername.tsx
@@ -0,0 +1,33 @@
+import { ServiceCredentialBindingObj } from '@/api/cf/cloudfoundry-types';
+import { Username } from '@/components/UserAccount/Username';
+import { Tag } from '@/components/uswds/Tag';
+
+export function OverlayHeaderUsername({
+  header,
+  serviceAccount,
+  username,
+}: {
+  header: string;
+  serviceAccount?: ServiceCredentialBindingObj | undefined | null;
+  username: string;
+}) {
+  return (
+    <>
+      <h4
+        className="margin-top-0 margin-bottom-7 text-uppercase text-light underline-base-light text-underline"
+        style={{ textUnderlineOffset: '0.7em' }}
+      >
+        {header}
+      </h4>
+      {serviceAccount && (
+        <Tag
+          className={'bg-primary font-sans-3xs text-white text-light text-ls-3'}
+          label="service"
+        />
+      )}
+      <h2 className="margin-top-1">
+        <Username username={username} />
+      </h2>
+    </>
+  );
+}
diff --git a/src/components/Overlays/SpaceRolesOverlay.tsx b/src/components/Overlays/SpaceRolesOverlay.tsx
new file mode 100644
index 00000000..a6a73911
--- /dev/null
+++ b/src/components/Overlays/SpaceRolesOverlay.tsx
@@ -0,0 +1,35 @@
+import { UsersActionsSpaceRoles } from '@/components/UsersActions/UsersActionsSpaceRoles/UsersActionsSpaceRoles';
+import { UserOrgPage } from '@/controllers/controller-types';
+import { ServiceCredentialBindingObj } from '@/api/cf/cloudfoundry-types';
+import { OverlayHeaderUsername } from '@/components/Overlays/OverlayHeaderUsername';
+
+export function SpaceRolesOverlay({
+  onCancel,
+  onSuccess,
+  orgGuid,
+  serviceAccount,
+  user,
+}: {
+  onCancel: Function;
+  onSuccess: Function;
+  orgGuid: string;
+  serviceAccount?: ServiceCredentialBindingObj | undefined | null;
+  user?: UserOrgPage | undefined | null;
+}) {
+  if (!user) return;
+  return (
+    <>
+      <OverlayHeaderUsername
+        header="update access permissions"
+        serviceAccount={serviceAccount}
+        username={user.username}
+      />
+      <UsersActionsSpaceRoles
+        orgGuid={orgGuid}
+        userGuid={user.guid}
+        onCancel={onCancel}
+        onSuccess={onSuccess}
+      />
+    </>
+  );
+}
diff --git a/src/components/UsersActions/UsersActionsOrgRoles.tsx b/src/components/UsersActions/UsersActionsOrgRoles.tsx
index d3970bbc..31c01caf 100644
--- a/src/components/UsersActions/UsersActionsOrgRoles.tsx
+++ b/src/components/UsersActions/UsersActionsOrgRoles.tsx
@@ -157,7 +157,16 @@ export function UsersActionsOrgRoles({
         <Alert type="success">Org roles have been saved!</Alert>
       )}
       {actionStatus === 'error' && (
-        <Alert type="error">{actionErrors.join(', ')}</Alert>
+        <Alert type="error" heading="An error has occured.">
+          {actionErrors.join(', ')} If the error occurs again, please contact{' '}
+          <Link
+            className="text-bold text-ink"
+            href={process.env.NEXT_PUBLIC_CLOUD_SUPPORT_URL || '/'}
+          >
+            Cloud.gov support
+          </Link>
+          .
+        </Alert>
       )}
       <form onSubmit={onSubmit} name="edit-org-roles-form">
         <fieldset className="usa-fieldset">
diff --git a/src/components/UsersActions/UsersActionsSpaceRoles/UsersActionsSpaceRoles.tsx b/src/components/UsersActions/UsersActionsSpaceRoles/UsersActionsSpaceRoles.tsx
index 1a1de11d..226ad817 100644
--- a/src/components/UsersActions/UsersActionsSpaceRoles/UsersActionsSpaceRoles.tsx
+++ b/src/components/UsersActions/UsersActionsSpaceRoles/UsersActionsSpaceRoles.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import React from 'react';
+import Link from 'next/link';
 import { getOrgUserSpacesPage } from '@/controllers/controllers';
 import { ControllerResult, RolesState } from '@/controllers/controller-types';
 import { defaultSpaceRoles } from '@/controllers/controller-helpers';
@@ -17,9 +18,13 @@ type ActionStatus = 'default' | 'pending' | 'success' | 'error';
 type SpacesPayload = Array<SpaceObj>;
 
 export function UsersActionsSpaceRoles({
+  onCancel,
+  onSuccess,
   orgGuid,
   userGuid,
 }: {
+  onCancel?: Function;
+  onSuccess?: Function;
   orgGuid: string;
   userGuid: string;
 }) {
@@ -81,6 +86,7 @@ export function UsersActionsSpaceRoles({
       if (meta.status === 'success') {
         setFetchedDataToState(payload);
         setActionStatus('success' as ActionStatus);
+        onSuccess && onSuccess(userGuid, 'space');
       }
       if (meta.status === 'error') {
         meta?.errors && setActionErrors(meta.errors);
@@ -101,47 +107,69 @@ export function UsersActionsSpaceRoles({
   }
   return (
     <form onSubmit={submitForm}>
-      {actionStatus === 'pending' && (
-        <Alert type="warning">Submission in progress...</Alert>
-      )}
-      {actionStatus === 'success' && (
-        <Alert type="success">Changes saved!</Alert>
-      )}
-      {actionStatus === 'error' && (
-        <Alert type="error">{actionErrors.join(', ')}</Alert>
-      )}
       <div className="tablet:display-flex flex-row flex-justify margin-bottom-3">
         <div className="flex-4 maxw-mobile-lg">
-          <h2>Space roles</h2>
           <p className="margin-bottom-0">
-            Optional. By assigning additional roles, you can grant access to
-            space level information and features.
+            By assigning roles, you can grant a user access to specific
+            information and features within a given Space.
           </p>
         </div>
-        <div className="align-self-end margin-top-2 tablet:margin-top-auto">
-          <Button type="submit" disabled={isButtonDisabled}>
-            Save changes
-          </Button>
-        </div>
       </div>
-      <GridList>
-        {spaces.map((space: any) => (
-          <fieldset
-            key={space.guid}
-            disabled={isFieldsetDisabled}
-            className="usa-fieldset"
+      {actionStatus === 'success' && (
+        <Alert type="success">Changes saved!</Alert>
+      )}
+      {actionStatus === 'error' && (
+        <Alert type="error" heading="An error has occured.">
+          {actionErrors.join(', ')} If the error occurs again, please contact{' '}
+          <Link
+            className="text-bold text-ink"
+            href={process.env.NEXT_PUBLIC_CLOUD_SUPPORT_URL || '/'}
+          >
+            Cloud.gov support
+          </Link>
+          .
+        </Alert>
+      )}
+      <div className="margin-top-3 border-bottom border-top border-base-light">
+        <GridList>
+          {spaces.map((space: any) => (
+            <fieldset
+              key={space.guid}
+              disabled={isFieldsetDisabled}
+              className="usa-fieldset"
+            >
+              <legend className="usa-legend usa-sr-only">
+                <strong>Select roles for space: {space.name}</strong>
+              </legend>
+              <RolesForSpace
+                space={space}
+                roles={roles[space.guid] || defaultSpaceRoles}
+                handleChange={handleChange}
+              />
+            </fieldset>
+          ))}
+        </GridList>
+      </div>
+      <div className="margin-top-3">
+        <Button
+          className="margin-right-4"
+          type="submit"
+          disabled={isButtonDisabled}
+        >
+          Update permissions
+        </Button>
+
+        {onCancel && (
+          <Button
+            className="usa-button--outline"
+            type="button"
+            onClick={() => onCancel()}
           >
-            <legend className="usa-legend usa-sr-only">
-              <strong>Select roles for space: {space.name}</strong>
-            </legend>
-            <RolesForSpace
-              space={space}
-              roles={roles[space.guid] || defaultSpaceRoles}
-              handleChange={handleChange}
-            />
-          </fieldset>
-        ))}
-      </GridList>
+            Cancel
+          </Button>
+        )}
+      </div>
+      {actionStatus === 'pending' && <p>Submission in progress...</p>}
     </form>
   );
 }
diff --git a/src/components/UsersList/UsersList.tsx b/src/components/UsersList/UsersList.tsx
index d2e5f16c..378facbb 100644
--- a/src/components/UsersList/UsersList.tsx
+++ b/src/components/UsersList/UsersList.tsx
@@ -26,6 +26,7 @@ import { UsersActionsRemoveFromOrg } from '@/components/UsersActions/UsersAction
 import { OverlayDrawer } from '@/components/OverlayDrawer';
 import { OrgUserOrgRolesOverlay } from '@/components/Overlays/OrgUserOrgRolesOverlay';
 import { Button } from '@/components/uswds/Button';
+import { SpaceRolesOverlay } from '@/components/Overlays/SpaceRolesOverlay';
 
 type SortDirection = 'asc' | 'desc';
 
@@ -121,30 +122,30 @@ export function UsersList({
     openModal(user);
   }
 
-  // Org roles overlay
-
-  const openOrgRoles = (userId: string) => {
-    setDialogType('org');
+  // Overlays
+  const openOverlay = (userId: string, type: DialogType = 'org') => {
+    setDialogType(type);
     setCurrentMemberId(userId);
     setDialogOpen(true);
   };
 
-  const closeOrgRoles = () => {
+  const closeOverlay = () => {
     setDialogOpen(false);
     setCurrentMemberId('');
   };
 
-  // success message
-
-  const dismissSuccessMsg = () => {
-    setSuccessMsg('');
-  };
-  const onOrgRolesSuccess = (userId: string) => {
+  const onRolesEditSuccess = (userId: string, type: DialogType = 'org') => {
     const username = users.find((user) => user.guid === userId)?.username;
     const usernameText = username ? `for ${username}` : '';
-    const msg = `The organization roles ${usernameText} have been updated.`;
+    const rolesText = type === 'org' ? 'organization' : 'space';
+    const msg = `The ${rolesText} roles ${usernameText} have been updated.`;
     setSuccessMsg(msg);
-    closeOrgRoles();
+    closeOverlay();
+  };
+
+  // Success alert
+  const dismissSuccessMsg = () => {
+    setSuccessMsg('');
   };
 
   // Helpers
@@ -159,23 +160,38 @@ export function UsersList({
       <OverlayDrawer
         id="overlay-drawer-1"
         isOpen={dialogOpen}
-        close={() => closeOrgRoles()}
+        close={() => closeOverlay()}
       >
         {dialogType === 'org' && (
           <OrgUserOrgRolesOverlay
             onCancel={() => {
-              closeOrgRoles();
+              closeOverlay();
             }}
             orgGuid={orgGuid}
             user={currentMember}
             serviceAccount={serviceAccounts[currentMember?.username || '']}
-            onSuccess={onOrgRolesSuccess}
+            onSuccess={onRolesEditSuccess}
+          />
+        )}
+        {dialogType === 'space' && (
+          <SpaceRolesOverlay
+            onCancel={() => {
+              closeOverlay();
+            }}
+            orgGuid={orgGuid}
+            serviceAccount={serviceAccounts[currentMember?.username || '']}
+            user={currentMember}
+            onSuccess={onRolesEditSuccess}
           />
         )}
       </OverlayDrawer>
 
       {successMsg && (
-        <Alert type="success" className="margin-bottom-4">
+        <Alert
+          type="success"
+          className="margin-bottom-4"
+          heading="Your changes have been saved."
+        >
           {successMsg}{' '}
           <Button
             onClick={() => dismissSuccessMsg()}
@@ -274,7 +290,7 @@ export function UsersList({
                 <UsersListOrgRoles
                   orgRolesCount={user.orgRolesCount}
                   onClick={() => {
-                    openOrgRoles(user.guid);
+                    openOverlay(user.guid, 'org');
                   }}
                 />
               </TableCell>
@@ -284,9 +300,11 @@ export function UsersList({
                 sort={sortParam === 'spaceRolesCount'}
               >
                 <UsersListSpaceRoles
-                  href={`/orgs/${orgGuid}/users/${user.guid}`}
                   spaceRolesCount={user.spaceRolesCount}
                   spacesCount={spacesCount}
+                  onClick={() => {
+                    openOverlay(user.guid, 'space');
+                  }}
                 />
               </TableCell>
 
diff --git a/src/components/UsersList/UsersListSpaceRoles.tsx b/src/components/UsersList/UsersListSpaceRoles.tsx
index 1b10f8d4..9fc8192f 100644
--- a/src/components/UsersList/UsersListSpaceRoles.tsx
+++ b/src/components/UsersList/UsersListSpaceRoles.tsx
@@ -1,14 +1,14 @@
 'use client';
 
-import Link from 'next/link';
 import { pluralize } from '@/helpers/text';
+import { Button } from '../uswds/Button';
 
 export function UsersListSpaceRoles({
+  onClick,
   spacesCount,
-  href,
   spaceRolesCount,
 }: {
-  href: string;
+  onClick: Function;
   spacesCount: number;
   spaceRolesCount: number;
 }) {
@@ -16,15 +16,21 @@ export function UsersListSpaceRoles({
     return (
       <>
         None yet —{' '}
-        <Link href={href} className="usa-button--unstyled text-bold">
+        <Button
+          className="usa-button--unstyled font-ui-2xs text-bold"
+          onClick={() => onClick()}
+        >
           edit permissions
-        </Link>
+        </Button>
       </>
     );
   }
   return (
-    <Link href={href} className="usa-button--unstyled">
+    <Button
+      className="usa-button--unstyled font-ui-2xs"
+      onClick={() => onClick()}
+    >
       {`${spaceRolesCount} of ${spacesCount} ${pluralize('space', spacesCount)}`}
-    </Link>
+    </Button>
   );
 }
diff --git a/src/components/uswds/Alert.tsx b/src/components/uswds/Alert.tsx
index 064b2569..669ca669 100644
--- a/src/components/uswds/Alert.tsx
+++ b/src/components/uswds/Alert.tsx
@@ -58,7 +58,11 @@ export function Alert({
       aria-label={role === 'region' ? `${type} alert` : ''}
     >
       <div className="usa-alert__body">
-        {heading && <Heading className="usa-alert__heading">{heading}</Heading>}
+        {heading && (
+          <Heading className="usa-alert__heading padding-left-2 font-sans-md">
+            {heading}
+          </Heading>
+        )}
         {children &&
           (validation ? (
             children

From e782ab5d0dc8ba05ed5872902322b29e4dccad69 Mon Sep 17 00:00:00 2001
From: Eleni Chappen <eleni.chappen@gsa.gov>
Date: Tue, 10 Sep 2024 09:15:18 -0500
Subject: [PATCH 03/10] remove some left padding

---
 src/components/UsersActions/UsersActionsOrgRoles.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/UsersActions/UsersActionsOrgRoles.tsx b/src/components/UsersActions/UsersActionsOrgRoles.tsx
index 31c01caf..9d10ff16 100644
--- a/src/components/UsersActions/UsersActionsOrgRoles.tsx
+++ b/src/components/UsersActions/UsersActionsOrgRoles.tsx
@@ -173,7 +173,7 @@ export function UsersActionsOrgRoles({
           <legend className="usa-legend usa-sr-only margin-bottom-2">
             <strong>Select org roles</strong>
           </legend>
-          <div className="padding-3 border-top border-base-light">
+          <div className="padding-3 padding-left-0 border-top border-base-light">
             {Object.values(roles).map((role, i) => (
               <div
                 key={`UsersActionsOrgRoles-checkbox-${i}`}

From c7c7828ed199a0ef7f348bbc679b62d28ba6bbca Mon Sep 17 00:00:00 2001
From: Eleni Chappen <eleni.chappen@gsa.gov>
Date: Wed, 11 Sep 2024 09:04:35 -0500
Subject: [PATCH 04/10] add arial-label prop to overlay drawer dialog so that
 purpose of dialog is announced when open

---
 src/components/OverlayDrawer.tsx       |  5 ++++-
 src/components/UsersList/UsersList.tsx | 30 ++++++++++++++------------
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/components/OverlayDrawer.tsx b/src/components/OverlayDrawer.tsx
index 6c09470a..4eae7c7b 100644
--- a/src/components/OverlayDrawer.tsx
+++ b/src/components/OverlayDrawer.tsx
@@ -5,11 +5,13 @@ import Image from 'next/image';
 import closeIcon from '@/../public/img/uswds/usa-icons/close.svg';
 
 export function OverlayDrawer({
+  ariaLabel = 'dialog', // should announce the purpose of the dialog when opening
   children,
   close, // function for dialog close button that should change the isOpen prop from the parent
   id,
   isOpen = false,
 }: {
+  ariaLabel?: string;
   children: React.ReactNode;
   close: Function;
   id: string;
@@ -43,8 +45,8 @@ export function OverlayDrawer({
       id={id}
       className="overlayDrawer height-full maxh-none tablet-lg:width-tablet-lg maxw-none padding-y-10 tablet-lg:padding-y-15 padding-right-1 tablet-lg:padding-right-4 padding-left-3 tablet-lg:padding-left-10 bg-accent-warm-light border-accent-cool tablet-lg:border-accent-cool border-left-1 tablet-lg:border-left-105 border-right-0 border-top-0 border-bottom-0"
       ref={dialogRef}
+      aria-label={ariaLabel}
     >
-      <div style={{ overscrollBehavior: 'contain' }}>{children}</div>
       <button
         type="button"
         className="usa-button usa-modal__close position-fixed top-7 right-4"
@@ -59,6 +61,7 @@ export function OverlayDrawer({
           height="32"
         />
       </button>
+      <div style={{ overscrollBehavior: 'contain' }}>{children}</div>
     </dialog>
   );
 }
diff --git a/src/components/UsersList/UsersList.tsx b/src/components/UsersList/UsersList.tsx
index 378facbb..fa45e114 100644
--- a/src/components/UsersList/UsersList.tsx
+++ b/src/components/UsersList/UsersList.tsx
@@ -30,7 +30,7 @@ import { SpaceRolesOverlay } from '@/components/Overlays/SpaceRolesOverlay';
 
 type SortDirection = 'asc' | 'desc';
 
-type DialogType = 'org' | 'space';
+type OverlayType = 'org' | 'space';
 
 export function UsersList({
   users,
@@ -51,8 +51,8 @@ export function UsersList({
   const [searchValue, setSearchValue] = useState('' as string);
   const [sortParam, setSortParam] = useState('username' as string);
   const [sortDir, setSortDir] = useState('asc' as SortDirection);
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const [dialogType, setDialogType] = useState('org' as DialogType);
+  const [overlayOpen, setOverlayOpen] = useState(false);
+  const [overlayType, setOverlayType] = useState('org' as OverlayType);
   const [currentMemberId, setCurrentMemberId] = useState('');
   const [successMsg, setSuccessMsg] = useState('');
 
@@ -123,18 +123,18 @@ export function UsersList({
   }
 
   // Overlays
-  const openOverlay = (userId: string, type: DialogType = 'org') => {
-    setDialogType(type);
+  const openOverlay = (userId: string, type: OverlayType = 'org') => {
+    setOverlayType(type);
     setCurrentMemberId(userId);
-    setDialogOpen(true);
+    setOverlayOpen(true);
   };
 
   const closeOverlay = () => {
-    setDialogOpen(false);
+    setOverlayOpen(false);
     setCurrentMemberId('');
   };
 
-  const onRolesEditSuccess = (userId: string, type: DialogType = 'org') => {
+  const onRolesEditSuccess = (userId: string, type: OverlayType = 'org') => {
     const username = users.find((user) => user.guid === userId)?.username;
     const usernameText = username ? `for ${username}` : '';
     const rolesText = type === 'org' ? 'organization' : 'space';
@@ -154,34 +154,36 @@ export function UsersList({
   const spacesCount = Object.keys(spaces).length;
   const currentMember =
     users.find((user) => user.guid === currentMemberId) || null;
+  const overlayAriaLabel = `Edit ${overlayType === 'org' ? 'organization roles' : 'access permissions'} for ${currentMember ? currentMember?.username : 'this user'}`;
 
   return (
     <>
       <OverlayDrawer
+        ariaLabel={overlayAriaLabel}
         id="overlay-drawer-1"
-        isOpen={dialogOpen}
+        isOpen={overlayOpen}
         close={() => closeOverlay()}
       >
-        {dialogType === 'org' && (
+        {overlayType === 'org' && (
           <OrgUserOrgRolesOverlay
             onCancel={() => {
               closeOverlay();
             }}
+            onSuccess={onRolesEditSuccess}
             orgGuid={orgGuid}
-            user={currentMember}
             serviceAccount={serviceAccounts[currentMember?.username || '']}
-            onSuccess={onRolesEditSuccess}
+            user={currentMember}
           />
         )}
-        {dialogType === 'space' && (
+        {overlayType === 'space' && (
           <SpaceRolesOverlay
             onCancel={() => {
               closeOverlay();
             }}
+            onSuccess={onRolesEditSuccess}
             orgGuid={orgGuid}
             serviceAccount={serviceAccounts[currentMember?.username || '']}
             user={currentMember}
-            onSuccess={onRolesEditSuccess}
           />
         )}
       </OverlayDrawer>

From e93f863b3a177ba46045f8adae500452924c2769 Mon Sep 17 00:00:00 2001
From: Eleni Chappen <eleni.chappen@gsa.gov>
Date: Wed, 11 Sep 2024 11:17:08 -0500
Subject: [PATCH 05/10] clicking outside dialog will close it

---
 src/components/OverlayDrawer.tsx       | 64 ++++++++++++++++++--------
 src/components/UsersList/UsersList.tsx | 10 ++--
 2 files changed, 48 insertions(+), 26 deletions(-)

diff --git a/src/components/OverlayDrawer.tsx b/src/components/OverlayDrawer.tsx
index 4eae7c7b..35e897c2 100644
--- a/src/components/OverlayDrawer.tsx
+++ b/src/components/OverlayDrawer.tsx
@@ -8,13 +8,13 @@ export function OverlayDrawer({
   ariaLabel = 'dialog', // should announce the purpose of the dialog when opening
   children,
   close, // function for dialog close button that should change the isOpen prop from the parent
-  id,
+  id = 'overlay-drawer', // helps distinguish which overlay drawer in case there are multiple on the page
   isOpen = false,
 }: {
   ariaLabel?: string;
   children: React.ReactNode;
   close: Function;
-  id: string;
+  id?: string;
   isOpen: boolean;
 }) {
   const dialogRef = useRef<HTMLDialogElement>(null);
@@ -33,35 +33,59 @@ export function OverlayDrawer({
         close();
       }
     };
-    window.addEventListener('keydown', handleEscapeKeyPress);
+    // close when clicking outside dialog
+    const clicked = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      // Clicking #dialog-body will not trigger this, only the id of the dialog itself.
+      // #dialog-body must cover the full open dialog area for this to work.
+      if (isOpen && target?.id?.match(id)) {
+        close();
+      }
+    };
+    const addListeners = () => {
+      window.addEventListener('keydown', handleEscapeKeyPress);
+      window.addEventListener('click', clicked);
+    };
+    const removeListeners = () => {
+      window.removeEventListener('keydown', handleEscapeKeyPress);
+      window.removeEventListener('click', clicked);
+    };
+    if (isOpen) {
+      addListeners();
+    }
 
     return () => {
-      window.removeEventListener('keydown', handleEscapeKeyPress);
+      removeListeners();
     };
-  }, [close, isOpen]);
+  }, [close, id, isOpen]);
 
   return (
     <dialog
       id={id}
-      className="overlayDrawer height-full maxh-none tablet-lg:width-tablet-lg maxw-none padding-y-10 tablet-lg:padding-y-15 padding-right-1 tablet-lg:padding-right-4 padding-left-3 tablet-lg:padding-left-10 bg-accent-warm-light border-accent-cool tablet-lg:border-accent-cool border-left-1 tablet-lg:border-left-105 border-right-0 border-top-0 border-bottom-0"
+      className="overlayDrawer height-full maxh-none tablet-lg:width-tablet-lg maxw-none border-0 padding-0"
       ref={dialogRef}
       aria-label={ariaLabel}
     >
-      <button
-        type="button"
-        className="usa-button usa-modal__close position-fixed top-7 right-4"
-        aria-label="Close this dialog"
-        onClick={() => close()}
+      <div
+        id="dialog-body"
+        className="minh-full padding-y-10 tablet-lg:padding-y-15 padding-right-1 tablet-lg:padding-right-4 padding-left-3 tablet-lg:padding-left-10 bg-accent-warm-light border-accent-cool tablet-lg:border-accent-cool border-left-1 tablet-lg:border-left-105 border-right-0 border-top-0 border-bottom-0"
       >
-        <Image
-          unoptimized
-          src={closeIcon}
-          alt="Close this dialog"
-          width="32"
-          height="32"
-        />
-      </button>
-      <div style={{ overscrollBehavior: 'contain' }}>{children}</div>
+        <button
+          type="button"
+          className="usa-button usa-modal__close position-fixed top-7 right-4"
+          aria-label="Close this dialog"
+          onClick={() => close()}
+        >
+          <Image
+            unoptimized
+            src={closeIcon}
+            alt="Close this dialog"
+            width="32"
+            height="32"
+          />
+        </button>
+        <div>{children}</div>
+      </div>
     </dialog>
   );
 }
diff --git a/src/components/UsersList/UsersList.tsx b/src/components/UsersList/UsersList.tsx
index fa45e114..ff83f6c6 100644
--- a/src/components/UsersList/UsersList.tsx
+++ b/src/components/UsersList/UsersList.tsx
@@ -151,6 +151,7 @@ export function UsersList({
   // Helpers
   const currentUsers = usersSorted(usersFiltered(users));
   const usersResultsText = currentUsers.length === 1 ? 'user' : 'users';
+  const searchAriaLiveText = `${currentUsers.length} ${usersResultsText} found for ${searchValue}`;
   const spacesCount = Object.keys(spaces).length;
   const currentMember =
     users.find((user) => user.guid === currentMemberId) || null;
@@ -160,7 +161,7 @@ export function UsersList({
     <>
       <OverlayDrawer
         ariaLabel={overlayAriaLabel}
-        id="overlay-drawer-1"
+        id="overlay-drawer-manage-users"
         isOpen={overlayOpen}
         close={() => closeOverlay()}
       >
@@ -212,13 +213,10 @@ export function UsersList({
       aria-live region needs to show up on initial page render.
       More info: https://tetralogical.com/blog/2024/05/01/why-are-my-live-regions-not-working/
       */}
-      <div role="region" aria-live="polite">
+      <div role="region" aria-live="assertive" aria-atomic={true}>
         {searchValue && (
           <div className="margin-bottom-2">
-            <strong>
-              {currentUsers.length} {usersResultsText} found for{' '}
-              {`"${searchValue}"`}
-            </strong>
+            <strong>{searchAriaLiveText}</strong>
           </div>
         )}
       </div>

From 466e7a12812b9a64965f6afae4d73fb62233b162 Mon Sep 17 00:00:00 2001
From: Eleni Chappen <eleni.chappen@gsa.gov>
Date: Wed, 11 Sep 2024 13:17:02 -0500
Subject: [PATCH 06/10] open up header

---
 src/components/Overlays/OverlayHeaderUsername.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Overlays/OverlayHeaderUsername.tsx b/src/components/Overlays/OverlayHeaderUsername.tsx
index 44acd96d..0eb3b968 100644
--- a/src/components/Overlays/OverlayHeaderUsername.tsx
+++ b/src/components/Overlays/OverlayHeaderUsername.tsx
@@ -25,7 +25,7 @@ export function OverlayHeaderUsername({
           label="service"
         />
       )}
-      <h2 className="margin-top-1">
+      <h2 className="margin-top-1 margin-bottom-5">
         <Username username={username} />
       </h2>
     </>

From 55d6cac530fda9d6020ed90bc7ca35de402ab401 Mon Sep 17 00:00:00 2001
From: Eleni Chappen <eleni.chappen@gsa.gov>
Date: Wed, 11 Sep 2024 13:26:48 -0500
Subject: [PATCH 07/10] update overlay heading order

---
 src/components/Overlays/OverlayHeaderUsername.tsx    | 10 +++++-----
 src/components/UsersActions/UsersActionsOrgRoles.tsx |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Overlays/OverlayHeaderUsername.tsx b/src/components/Overlays/OverlayHeaderUsername.tsx
index 0eb3b968..63080479 100644
--- a/src/components/Overlays/OverlayHeaderUsername.tsx
+++ b/src/components/Overlays/OverlayHeaderUsername.tsx
@@ -13,21 +13,21 @@ export function OverlayHeaderUsername({
 }) {
   return (
     <>
-      <h4
-        className="margin-top-0 margin-bottom-7 text-uppercase text-light underline-base-light text-underline"
+      <h2
+        className="margin-top-0 margin-bottom-7 text-uppercase text-light underline-base-light text-underline font-sans-xs"
         style={{ textUnderlineOffset: '0.7em' }}
       >
         {header}
-      </h4>
+      </h2>
       {serviceAccount && (
         <Tag
           className={'bg-primary font-sans-3xs text-white text-light text-ls-3'}
           label="service"
         />
       )}
-      <h2 className="margin-top-1 margin-bottom-5">
+      <h3 className="margin-top-1 margin-bottom-5 font-sans-md mobile-lg:font-sans-lg">
         <Username username={username} />
-      </h2>
+      </h3>
     </>
   );
 }
diff --git a/src/components/UsersActions/UsersActionsOrgRoles.tsx b/src/components/UsersActions/UsersActionsOrgRoles.tsx
index 9d10ff16..4eb05d39 100644
--- a/src/components/UsersActions/UsersActionsOrgRoles.tsx
+++ b/src/components/UsersActions/UsersActionsOrgRoles.tsx
@@ -194,7 +194,7 @@ export function UsersActionsOrgRoles({
           </div>
           <div>
             <Button
-              className="margin-right-4"
+              className="margin-right-4 margin-bottom-2"
               type="submit"
               disabled={actionStatus === 'pending'}
             >

From bcf219563c9f0070253cdbef6b94de5714b22a7e Mon Sep 17 00:00:00 2001
From: Eleni Chappen <eleni.chappen@gsa.gov>
Date: Wed, 11 Sep 2024 15:28:40 -0500
Subject: [PATCH 08/10] refine middle breakpoints for space roles overlay

---
 .../UsersActions/UsersActionsSpaceRoles/RolesForSpace.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/UsersActions/UsersActionsSpaceRoles/RolesForSpace.tsx b/src/components/UsersActions/UsersActionsSpaceRoles/RolesForSpace.tsx
index ff8167ee..ac9288cf 100644
--- a/src/components/UsersActions/UsersActionsSpaceRoles/RolesForSpace.tsx
+++ b/src/components/UsersActions/UsersActionsSpaceRoles/RolesForSpace.tsx
@@ -17,12 +17,12 @@ export function RolesForSpace({
   return (
     <GridListItem>
       <div className="grid-row users-actions-space-role">
-        <div className="tablet:grid-col-4">
+        <div className="tablet-lg:grid-col-4 mobile-lg:padding-bottom-2 tablet-lg:padding-bottom-0">
           <strong>{space.name}</strong>
         </div>
         {Object.values(roles).map((role: any) => (
           <div
-            className="tablet:grid-col-2"
+            className="mobile-lg:grid-col-6 tablet-lg:grid-col-2 tablet:padding-bottom-2 tablet-lg:padding-bottom-0"
             key={`space-${space.guid}-role-${role.type}`}
           >
             <Checkbox

From 95be14d82704fddb80cc16e10392fa2d0fe34065 Mon Sep 17 00:00:00 2001
From: Eleni Chappen <eleni.chappen@gsa.gov>
Date: Thu, 12 Sep 2024 15:50:03 -0500
Subject: [PATCH 09/10] add env var to examples

---
 .env.example.local | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.env.example.local b/.env.example.local
index d056bcfd..82ef19b9 100644
--- a/.env.example.local
+++ b/.env.example.local
@@ -39,3 +39,4 @@ CF_API_TOKEN=
 #   Prefixing a variable with NEXT_PUBLIC_ will make it available to the browser:
 #   https://nextjs.org/docs/app/building-your-application/configuring/environment-variables#bundling-environment-variables-for-the-browser
 NEXT_PUBLIC_USER_INVITE_URL=https://account.dev.us-gov-west-1.aws-us-gov.cloud.gov/invite
+NEXT_PUBLIC_CLOUD_SUPPORT_URL="mailto:support@cloud.gov?body=What+is+your+question%3F%0D%0A%0D%0APlease+provide+your+application+name+or+URL.+Do+not+include+any+sensitive+information+about+your+platform+in+this+email."

From 0bdf3442148442abb3b0fbdd3a92dc2b3478b019 Mon Sep 17 00:00:00 2001
From: Eleni Chappen <eleni.chappen@gsa.gov>
Date: Fri, 13 Sep 2024 12:46:55 -0500
Subject: [PATCH 10/10] get screen readers to announce form success and error
 messages

---
 src/components/UsersActions/UsersActionsOrgRoles.tsx |  9 +++++++++
 src/components/UsersList/UsersList.tsx               | 12 +++++++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/UsersActions/UsersActionsOrgRoles.tsx b/src/components/UsersActions/UsersActionsOrgRoles.tsx
index 4eb05d39..7acaa162 100644
--- a/src/components/UsersActions/UsersActionsOrgRoles.tsx
+++ b/src/components/UsersActions/UsersActionsOrgRoles.tsx
@@ -153,6 +153,15 @@ export function UsersActionsOrgRoles({
 
   return (
     <>
+      {/* aria-live region needs to show up on initial page render. */}
+      <div
+        role="region"
+        aria-live="polite"
+        aria-atomic={true}
+        className="usa-sr-only"
+      >
+        {actionErrors.join(', ')}
+      </div>
       {actionStatus === 'success' && (
         <Alert type="success">Org roles have been saved!</Alert>
       )}
diff --git a/src/components/UsersList/UsersList.tsx b/src/components/UsersList/UsersList.tsx
index ff83f6c6..f687a42c 100644
--- a/src/components/UsersList/UsersList.tsx
+++ b/src/components/UsersList/UsersList.tsx
@@ -139,8 +139,11 @@ export function UsersList({
     const usernameText = username ? `for ${username}` : '';
     const rolesText = type === 'org' ? 'organization' : 'space';
     const msg = `The ${rolesText} roles ${usernameText} have been updated.`;
-    setSuccessMsg(msg);
     closeOverlay();
+    // delaying this to get aria-live region to announce success
+    setTimeout(() => {
+      setSuccessMsg(msg);
+    }, 500);
   };
 
   // Success alert
@@ -159,6 +162,13 @@ export function UsersList({
 
   return (
     <>
+      {/*
+      aria-live region needs to show up on initial page render.
+      More info: https://tetralogical.com/blog/2024/05/01/why-are-my-live-regions-not-working/
+      */}
+      <div role="region" aria-live="assertive" aria-atomic={true}>
+        {successMsg}
+      </div>
       <OverlayDrawer
         ariaLabel={overlayAriaLabel}
         id="overlay-drawer-manage-users"