Add aria labels to all logical blocks (#291)

* css changes

* more changes

Author: nuwandavek

web/src/components/common/ActionStack.tsx

@@ -298,7 +298,7 @@ const PlanningActionStack: React.FC = () => {
   }, []);
 
   return (
-  <HStack aria-label={"planning"} className={'action-stack'} justifyContent={'start'} width={"100%"}> 
+  <HStack aria-label={"planning"} className={'action-stack'} justifyContent={'start'} width={"100%"}>
     <Box
       bg={'minusxGreen.800'}
       p={2}
@@ -307,12 +307,13 @@ const PlanningActionStack: React.FC = () => {
       width={"100%"}
       display={"flex"}
       justifyContent={"center"}
+      aria-label={"planning-bubble"}
     >
       <HStack>
         <Box>
           <Text key={currentTitleIndex} animation={currentTitleIndex > 0 ? `${scrollUp} 0.5s ease-in-out` : ""} >{planningActions[currentTitleIndex]}</Text>
         </Box>
-        <Spinner size="xs" speed={'0.75s'} color="minusxBW.100" />
+        <Spinner size="xs" speed={'0.75s'} color="minusxBW.100" aria-label={"planning-spinner"}/>
       </HStack>
     </Box>
   </HStack>

web/src/components/common/Auth.tsx

@@ -58,7 +58,7 @@ const FeatureHighlightBubble = ({items}: {items: HighlightItem[]}) => {
 
   return (
     isVisibile && <Box position="absolute"
-      top={items[hintIdx].top}
+      top={items[hintIdx].top} aria-label='login-highlights'
       >
       {
         items[hintIdx].arrow && 
@@ -335,8 +335,8 @@ const Auth = () => {
     <Box p={5} maxW="md" mx="auto" width={`${width}px`} height={"100%"} backgroundColor={"minusxBW.200"}
     borderWidth={1.5} borderLeftColor={"minusxBW.500"}>
       <Image src={logo} alt="MinusX" maxWidth='150px'/>
-      <VStack spacing={4} mt={5} position={"relative"}>
-        {isEmbedded && <Text>Logging you in...</Text>}
+      {isEmbedded && <Text>Logging you in...</Text>}
+      <VStack spacing={4} mt={5} position={"relative"} aria-label='login-form'>
         <Input
           type="email"
           placeholder="Enter work email ID"

web/src/components/common/Chat.tsx

@@ -122,6 +122,7 @@ const Chat: React.FC<ReturnType<typeof addToolInfoToActionPlanMessages>[number]>
           <ChatContent content={content} messageIndex={index} role={role}/>
 
           <Box
+            aria-label='message-arrow'
             position="absolute"
             bottom="-5px"
             left={role == 'user' ? 'auto' : '0px'}

web/src/components/common/DemoComponents.tsx

@@ -58,7 +58,7 @@ export const DemoHelperMessage = ({url}: {url: string}) => {
     }
 
   const message = MESSAGES[demoIDX]
-  return <SettingsBlock title={MESSAGE_TITLES[demoIDX]}><Markdown content={message}/></SettingsBlock>
+  return <SettingsBlock title={MESSAGE_TITLES[demoIDX]} ariaLabel="welcome-message"><Markdown content={message}/></SettingsBlock>
 
 }
 

web/src/components/common/Markdown.tsx

@@ -23,7 +23,7 @@ function LinkRenderer(props: any) {
         return (
             <a href={props.href} target="_blank" rel="minusxapp">
                 {/* <Button leftIcon={<BsBarChartFill />} size={"xs"} colorScheme={"minusxGreen"}>{props.children}</Button> */}
-                <Tag size='sm' colorScheme='minusxGreen' variant='solid' border={"1px solid #fff"}>
+                <Tag size='sm' colorScheme='minusxGreen' variant='solid' border={"1px solid #fff"} aria-label='card-link'>
                     <TagLeftIcon as={BsBarChartFill} />
                     <TagLabel>{props.children}</TagLabel>
                 </Tag>
@@ -80,10 +80,10 @@ function ModifiedCode(props: any) {
         const text = props.children?.toString() || '';
 
         if (text.startsWith('[badge]')) {
-        return <Badge color={"minusxGreen.600"}>{text.replace('[badge]', '')}</Badge>;
+        return <Badge color={"minusxGreen.600"} aria-label='mx-badge'>{text.replace('[badge]', '')}</Badge>;
         }
         if (text.startsWith('[badge_mx]')) {
-        return <><br></br><Badge borderLeftColor={"minusxGreen.600"} borderLeft={"2px solid"} color={"minusxGreen.600"} fontSize={"sm"} mt={2}>{text.replace('[badge_mx]', '')}</Badge><br></br></>;
+        return <><br></br><Badge aria-label='mx-badge' borderLeftColor={"minusxGreen.600"} borderLeft={"2px solid"} color={"minusxGreen.600"} fontSize={"sm"} mt={2}>{text.replace('[badge_mx]', '')}</Badge><br></br></>;
         }
     }
 

web/src/components/common/Suggestions.tsx

@@ -22,7 +22,7 @@ export const Suggestions = ({ title, suggestions, onSuggestionClick }: {title: s
         onSuggestionClick?.(suggestion)
     };
   return (
-    <Flex wrap="wrap" gap={2}>
+    <Flex wrap="wrap" gap={2} aria-label='suggestions'>
       <HStack justifyContent={"space-between"} width={"100%"}>
         <HStack color="minusxGreen.500">
           <HiMiniSparkles/>