fix: fluent v9 upgrade accessibility issues from Accessibility Insights (#3593)

* add aria-labels

* add aria-labels

* replace with avatar

* add aria-labels

* add tooltip

* add aria-labels

* add tooltips

* add aria-hidden to items

* add aria-label

* add tooltips

* add spacing for better keyboard outline

Author: ElinorW

src/app/views/authentication/auth-util-components/ProfileButton.tsx

@@ -6,14 +6,15 @@ import { ProfileV9 } from '../profile/Profile';
 export const PersonaSignIn = (props: Partial<PersonaProps>) => {
   return (
     <Persona
+      aria-hidden={true}
       presence={{ status: 'offline' }}
       {...props}
     />
   );
 };
 
 const SignInButton = ({signIn}: {signIn: ()=> void})=>{
-  const styles = useHeaderStyles()
+  const styles = useHeaderStyles();
   return (
     <Tooltip
       content={translateMessage('sign in')}

src/app/views/common/popups/DrawerWrapper.tsx

@@ -7,7 +7,8 @@ import {
   DrawerHeaderTitle,
   Button,
   Spinner,
-  makeStyles
+  makeStyles,
+  Tooltip
 } from '@fluentui/react-components';
 import { ArrowLeft24Regular, Dismiss24Regular } from '@fluentui/react-icons';
 
@@ -66,22 +67,28 @@ export function DrawerWrapper(props: WrapperProps) {
     >
       <DrawerHeader>
         <DrawerHeaderTitle action={
-          <Button
-            icon={<Dismiss24Regular />}
-            appearance='subtle'
-            onClick={() => dismissPopup()}
-            aria-label={translateMessage('Close')}
-          />
-
-        }>
-          {showBackButton && (
+          <Tooltip
+            content={translateMessage('Close')} relationship='label'>
             <Button
-              icon={<ArrowLeft24Regular />}
+              icon={<Dismiss24Regular />}
               appearance='subtle'
               onClick={() => dismissPopup()}
-              aria-label={translateMessage('Back')}
-              className={drawerStyles.button}
+              aria-label={translateMessage('Close')}
             />
+          </Tooltip>
+        }>
+          {showBackButton && (
+            <Tooltip
+              content={translateMessage('Back')}
+              relationship='label'>
+              <Button
+                icon={<ArrowLeft24Regular />}
+                appearance='subtle'
+                onClick={() => dismissPopup()}
+                aria-label={translateMessage('Back')}
+                className={drawerStyles.button}
+              />
+            </Tooltip>
           )}
           {title || ''}
         </DrawerHeaderTitle>

src/app/views/layout/LayoutResizeHandler.tsx

@@ -64,13 +64,14 @@ export const LayoutResizeHandler = React.forwardRef<HTMLDivElement, HandleProps>
         ref={ref}
         onClick={handleClick}
         onMouseDown={onMouseDown}
-        tabIndex={0}
+        tabIndex={-1}
         className={hoverStyles}
         style={{
           position: 'absolute',
           borderRadius: '2px',
           ...positioningProps
         }}
+        aria-hidden={true}
       />
     );
   }

src/app/views/main-header/FeedbackButton.tsx

@@ -31,6 +31,7 @@ const FeedbackButton = ()=>{
     <>
       <Tooltip content={translateMessage('Feedback')} relationship="description">
         <Button
+          aria-label={translateMessage('Feedback')}
           onClick={activateSurvey}
           className={styles.iconButton} appearance="subtle" icon={<PersonFeedback20Regular />} />
       </Tooltip>

src/app/views/main-header/Help.tsx

@@ -35,6 +35,7 @@ const Help = ()=>{
       <Tooltip content={translateMessage('Help')} relationship="description">
         <MenuTrigger disableButtonEnhancement>
           <Button
+            aria-label={translateMessage('Help')}
             onClick={trackHelpButtonClickEvent}
             className={styles.iconButton} appearance="subtle" icon={<ChatHelp20Regular />} />
         </MenuTrigger>

src/app/views/main-header/settings/Settings.tsx

@@ -42,6 +42,7 @@ const Settings = ()=>{
       <Tooltip content={translateMessage('Settings')} relationship="description">
         <MenuTrigger disableButtonEnhancement>
           <Button
+            aria-label={translateMessage('Settings')}
             onClick={trackSettingsButtonClickEvent}
             className={styles.iconButton} appearance="subtle" icon={<Settings20Regular />} />
         </MenuTrigger>

src/app/views/query-response/QueryResponse.tsx

@@ -6,11 +6,13 @@ import {
   DialogSurface,
   DialogTrigger,
   makeStyles,
-  tokens
+  tokens,
+  Tooltip
 } from '@fluentui/react-components';
 import { DismissRegular, ExpandUpLeftRegular } from '@fluentui/react-icons';
 import { useState } from 'react';
 import { GetPivotItems } from './pivot-items/pivot-item';
+import { translateMessage } from '../../utils/translate-messages';
 
 const useStyles = makeStyles({
   container: {
@@ -45,13 +47,15 @@ const PivotItemsDialog = () => {
 
   return (
     <div>
-      <Button
-        appearance='transparent'
-        icon={<ExpandUpLeftRegular />}
-        aria-label='Expand'
-        className={styles.dialogBtn}
-        onClick={() => setOpen(true)}
-      />
+      <Tooltip content={translateMessage('Expand')} relationship='label'>
+        <Button
+          appearance='transparent'
+          icon={<ExpandUpLeftRegular />}
+          aria-label={translateMessage('Expand')}
+          className={styles.dialogBtn}
+          onClick={() => setOpen(true)}
+        />
+      </Tooltip>
       <Dialog open={open} onOpenChange={(_event, data) => setOpen(data.open)}>
         <DialogSurface className={styles.dialog}>
           <DialogBody>
@@ -60,13 +64,15 @@ const PivotItemsDialog = () => {
             </DialogContent>
           </DialogBody>
           <DialogTrigger disableButtonEnhancement>
-            <Button
-              appearance='transparent'
-              icon={<DismissRegular />}
-              aria-label='Collapse'
-              className={styles.dismissBtn}
-              onClick={() => setOpen(false)}
-            />
+            <Tooltip relationship='label' content={translateMessage('Close')}>
+              <Button
+                appearance='transparent'
+                icon={<DismissRegular />}
+                aria-label={translateMessage('Close')}
+                className={styles.dismissBtn}
+                onClick={() => setOpen(false)}
+              />
+            </Tooltip>
           </DialogTrigger>
         </DialogSurface>
       </Dialog>

src/app/views/query-response/pivot-items/pivot-item.tsx

@@ -50,6 +50,9 @@ const useStyles = makeStyles({
     height: '100%',
     overflow: 'hidden'
   },
+  tabList:{
+    padding: '5px 5px'
+  },
   tabContent: {
     flex: 1,
     display: 'flex',
@@ -137,7 +140,7 @@ export const GetPivotItems = () => {
           </TabList>
         </Overflow>
       ) : (
-        <TabList selectedValue={selectedValue} onTabSelect={onTabSelect} size='small'>
+        <TabList selectedValue={selectedValue} onTabSelect={onTabSelect} size='small' className={styles.tabList}>
           {tabs.map((tab) => (
             <Tab key={tab.id} value={tab.id} icon={tab.icon}>
               {tab.name}

src/app/views/query-runner/request/RequestV9.tsx

@@ -47,6 +47,9 @@ const useStyles = makeStyles({
     flexShrink: 0,
     overflowX: 'hidden'
   },
+  tabList: {
+    padding: '5px 5px'
+  },
   tabContent: {
     flex: 1,
     display: 'flex',
@@ -142,7 +145,10 @@ const Request = (props: IRequestProps) => {
             </TabList>
           </Overflow>
         ) : (
-          <TabList selectedValue={selectedTab} onTabSelect={(_, data) => handleTabSelect(data.value)} size='small'>
+          <TabList selectedValue={selectedTab}
+            onTabSelect={(_, data) => handleTabSelect(data.value)}
+            size='small' className={styles.tabList}
+          >
             {tabs.map((tab) => (
               <Tab key={tab.id} value={tab.id} icon={tab.icon}>
                 {tab.name}

src/app/views/sidebar/Sidebar.tsx

@@ -1,5 +1,6 @@
 import {
-  Button, ButtonProps, makeStyles, SelectTabData, SelectTabEvent, Tab, TabList, tokens
+  Button, ButtonProps, makeStyles, SelectTabData, SelectTabEvent, Tab, TabList, tokens,
+  Tooltip
 } from '@fluentui/react-components';
 import {
   GroupList20Regular, History20Regular, PanelLeftContract20Regular, PanelLeftExpand20Regular, Rocket20Regular
@@ -34,7 +35,13 @@ const SidebarToggle = (props: IShowSidebar & ButtonProps)=>{
   const {show, handleShow} = props;
   const PanelIcon = ()=> show ? <PanelLeftContract20Regular/>: <PanelLeftExpand20Regular/>
 
-  return <Button appearance='subtle' icon={PanelIcon()} onClick={handleShow} {...props}></Button>
+  return (
+    <Tooltip content={show? translateMessage('Minimize sidebar'): translateMessage('Maximize sidebar')}
+      relationship='label'>
+      <Button appearance='subtle' icon={PanelIcon()} onClick={handleShow} {...props}>
+      </Button>
+    </Tooltip>
+  )
 }
 
 interface SidebarProps {