✨(frontend) improve screen reader support in DocShare modal with aria-labels

adds relevant aria-labels to enhance accessibility for assistive technologies

Signed-off-by: Cyril <[email protected]>

Author: Ovgodd

src/frontend/apps/impress/src/components/quick-search/QuickSearch.tsx

@@ -69,7 +69,7 @@ export const QuickSearch = ({
           label={label}
           shouldFilter={false}
           ref={ref}
-          tabIndex={0}
+          tabIndex={-1}
           value={selectedValue}
           onValueChange={handleValueChange}
         >

src/frontend/apps/impress/src/features/docs/doc-share/components/DocRoleDropdown.tsx

@@ -18,6 +18,7 @@ type DocRoleDropdownProps = {
   onSelectRole: (role: Role) => void;
   rolesAllowed?: Role[];
   isLastOwner?: boolean;
+  ariaLabel: string;
 };
 
 export const DocRoleDropdown = ({
@@ -29,6 +30,7 @@ export const DocRoleDropdown = ({
   rolesAllowed,
   access,
   isLastOwner = false,
+  ariaLabel,
 }: DocRoleDropdownProps) => {
   const { t } = useTranslation();
   const { transRole, translatedRoles } = useTrans();
@@ -113,7 +115,10 @@ export const DocRoleDropdown = ({
   return (
     <DropdownMenu
       topMessage={topMessage}
-      label="doc-role-dropdown"
+      label={t('{{action}}, current role: {{role}}', {
+        action: ariaLabel,
+        role: transRole(currentRole),
+      })}
       showArrow={true}
       arrowCss={css`
         color: var(--c--theme--colors--primary-800) !important;

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAccessRequest.tsx

@@ -78,6 +78,9 @@ const DocShareAccessRequestItem = ({ doc, accessRequest }: Props) => {
               onSelectRole={setRole}
               canUpdate={doc.abilities.accesses_manage}
               rolesAllowed={accessRequest.abilities.set_role_to}
+              ariaLabel={t('Change role for {{name}}', {
+                name: accessRequest.user.full_name || accessRequest.user.email,
+              })}
             />
             <Button
               color="tertiary"

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareInvitation.tsx

@@ -112,6 +112,9 @@ export const DocShareInvitationItem = ({
               canUpdate={canUpdate}
               doc={doc}
               access={invitation}
+              ariaLabel={t('Change role for {{email}}', {
+                email: invitation.email,
+              })}
             />
 
             {canUpdate && (

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareMember.tsx

@@ -77,6 +77,9 @@ export const DocShareMemberItem = ({
               rolesAllowed={access.abilities.set_role_to}
               access={access}
               doc={doc}
+              ariaLabel={t('Change role for {{name}}', {
+                name: access.user.full_name || access.user.email,
+              })}
             />
           </Box>
         }

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx

@@ -76,6 +76,7 @@ export const DocShareModal = ({ doc, onClose, isRootDoc = true }: Props) => {
   const [selectedUsers, setSelectedUsers] = useState<User[]>([]);
   const [userQuery, setUserQuery] = useState('');
   const [inputValue, setInputValue] = useState('');
+  const [liveAnnouncement, setLiveAnnouncement] = useState('');
 
   const [listHeight, setListHeight] = useState<string>('400px');
   const canShare = doc.abilities.accesses_manage && isRootDoc;
@@ -88,6 +89,19 @@ export const DocShareModal = ({ doc, onClose, isRootDoc = true }: Props) => {
     setSelectedUsers((prev) => [...prev, user]);
     setUserQuery('');
     setInputValue('');
+
+    // Announce to screen readers
+    const userName = user.full_name || user.email;
+    setLiveAnnouncement(
+      t(
+        '{{name}} added to invite list. Add more members or press Tab to select role and invite.',
+        {
+          name: userName,
+        },
+      ),
+    );
+    // Clear announcement after it's been read
+    setTimeout(() => setLiveAnnouncement(''), 100);
   };
 
   const { data: membersQuery } = useDocAccesses({
@@ -114,6 +128,16 @@ export const DocShareModal = ({ doc, onClose, isRootDoc = true }: Props) => {
       }
       const newArray = [...prevState];
       newArray.splice(index, 1);
+
+      // Announce to screen readers
+      const userName = row.full_name || row.email;
+      setLiveAnnouncement(
+        t('{{name}} removed from invite list', {
+          name: userName,
+        }),
+      );
+      setTimeout(() => setLiveAnnouncement(''), 100);
+
       return newArray;
     });
   };
@@ -175,12 +199,29 @@ export const DocShareModal = ({ doc, onClose, isRootDoc = true }: Props) => {
             <ButtonCloseModal
               aria-label={t('Close the share modal')}
               onClick={onClose}
+              tabIndex={-1}
             />
           </Box>
         }
         hideCloseButton
       >
         <ShareModalStyle />
+        {/* Screen reader announcements */}
+        <div
+          role="status"
+          aria-live="polite"
+          aria-atomic="true"
+          className="sr-only"
+          style={{
+            position: 'absolute',
+            left: '-10000px',
+            width: '1px',
+            height: '1px',
+            overflow: 'hidden',
+          }}
+        >
+          {liveAnnouncement}
+        </div>
         <Box
           $height="auto"
           $maxHeight={canViewAccesses ? modalContentHeight : 'none'}