Improve accessibility of comparisons tab content

synzen · Jan 18, 2025 · f1a8dc1 · f1a8dc1
1 parent 2ad1520
commit f1a8dc1
Show file tree

Hide file tree

Showing 6 changed files with 214 additions and 143 deletions.
diff --git a/...kend-api/client/src/features/feedConnections/components/ArticlePlaceholderTable/index.tsx b/...kend-api/client/src/features/feedConnections/components/ArticlePlaceholderTable/index.tsx
@@ -75,7 +75,7 @@ const PlaceholderRow = ({
         </HStack>
       </Td>
       <Td whiteSpace="normal">
-        <Box maxHeight={150} overflow="auto">
+        <Box maxHeight={150} overflow="auto" tabIndex={0}>
           {value.split("\n").map((line, idx) => (
             // eslint-disable-next-line react/no-array-index-key
             <span key={idx}>

diff --git a/...ent/src/features/feedConnections/components/ComparisonsTabSection/AddComparisonSelect.tsx b/...ent/src/features/feedConnections/components/ComparisonsTabSection/AddComparisonSelect.tsx
@@ -1,15 +1,21 @@
-import { AddIcon } from "@chakra-ui/icons";
-import { Flex, IconButton, Select } from "@chakra-ui/react";
+import { Box, Button, Select, Stack, chakra } from "@chakra-ui/react";
 import { useState } from "react";
 
 interface Props {
   properties?: string[];
   isDisabled?: boolean;
   isLoading?: boolean;
   onChange: (value: string) => Promise<void>;
+  formLabel: string;
 }
 
-export const AddComparisonSelect = ({ properties, isDisabled, isLoading, onChange }: Props) => {
+export const AddComparisonSelect = ({
+  properties,
+  isDisabled,
+  isLoading,
+  onChange,
+  formLabel,
+}: Props) => {
   const [value, setValue] = useState("");
   const [isAdding, setIsAdding] = useState(false);
 
@@ -21,35 +27,39 @@ export const AddComparisonSelect = ({ properties, isDisabled, isLoading, onChang
   };
 
   return (
-    <Flex>
-      <Select
-        size="sm"
-        borderTopLeftRadius="lg"
-        borderBottomLeftRadius="lg"
-        borderTopRightRadius={0}
-        borderBottomRightRadius={0}
-        isDisabled={isAdding || isDisabled}
-        minWidth={16}
-        borderRightStyle="none"
-        borderColor="gray.700"
-        placeholder="Select a property to add"
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-      >
-        {properties?.map((comparison) => (
-          <option value={comparison}>{comparison}</option>
-        ))}
-      </Select>
-      <IconButton
-        size="sm"
-        borderTopLeftRadius="0"
-        borderBottomLeftRadius={0}
-        icon={<AddIcon />}
-        isDisabled={isAdding || isDisabled || !value}
-        aria-label="Add comparison"
-        isLoading={isAdding || isLoading}
-        onClick={onClickAdd}
-      />
-    </Flex>
+    <Box as="form" onSubmit={() => onClickAdd()}>
+      <Stack>
+        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+        <label>
+          <chakra.span paddingBottom="1" display="block" fontSize="sm" fontWeight="medium">
+            {formLabel}
+          </chakra.span>
+          <Select
+            size="sm"
+            isDisabled={isAdding || isDisabled}
+            minWidth={16}
+            placeholder="Select a property to add"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+          >
+            {properties?.map((comparison) => (
+              <option value={comparison}>{comparison}</option>
+            ))}
+          </Select>
+        </label>
+        <Button
+          onClick={(e) => {
+            e.preventDefault();
+            onClickAdd();
+          }}
+          type="submit"
+          size="sm"
+          minW={32}
+          isLoading={isAdding || isLoading}
+        >
+          Add
+        </Button>
+      </Stack>
+    </Box>
   );
 };
diff --git a/...pi/client/src/features/feedConnections/components/ComparisonsTabSection/ComparisonTag.tsx b/...pi/client/src/features/feedConnections/components/ComparisonsTabSection/ComparisonTag.tsx
@@ -1,13 +1,14 @@
-import { Box, Spinner, Tag, TagCloseButton, TagLabel, TagRightIcon } from "@chakra-ui/react";
+import { Spinner, Tag, TagCloseButton, TagLabel, TagRightIcon } from "@chakra-ui/react";
 import { useState } from "react";
 
 interface Props {
   colorScheme: string;
   title: string;
   onDelete: () => Promise<void>;
+  deleteButtonAriaLabel?: string;
 }
 
-export const ComparisonTag = ({ colorScheme, title, onDelete }: Props) => {
+export const ComparisonTag = ({ colorScheme, title, onDelete, deleteButtonAriaLabel }: Props) => {
   const [isDeleting, setIsDeleting] = useState(false);
 
   const onClickDelete = async () => {
@@ -17,12 +18,12 @@ export const ComparisonTag = ({ colorScheme, title, onDelete }: Props) => {
   };
 
   return (
-    <Box>
-      <Tag size="lg" colorScheme={colorScheme} margin={0}>
-        <TagLabel>{title}</TagLabel>
-        {isDeleting && <TagRightIcon as={Spinner} />}
-        {!isDeleting && <TagCloseButton aria-label="Delete" onClick={() => onClickDelete()} />}
-      </Tag>
-    </Box>
+    <Tag size="lg" colorScheme={colorScheme} margin={0} as="li">
+      <TagLabel>{title}</TagLabel>
+      {isDeleting && <TagRightIcon as={Spinner} />}
+      {!isDeleting && (
+        <TagCloseButton aria-label={deleteButtonAriaLabel} onClick={() => onClickDelete()} />
+      )}
+    </Tag>
   );
 };