More fixes of accessibility issues

src/components/AuthorAffiliations/AuthorAffiliations.tsx

@@ -76,7 +76,7 @@ const AffiliationHeader = ({ formState }: { formState: AffTableState }) => {
       <Heading as="h2" size="md" mt="2" id="author-affiliation-title">
         {caption}
       </Heading>
-      <Text color="gray.500">{sub}</Text>
+      <Text>{sub}</Text>
     </>
   );
 };

src/components/BibstemPicker/BibstemPicker.tsx

@@ -273,7 +273,7 @@ const BibstemPickerImpl = (props: IBibstemPickerProps, ref: ForwardedRef<never>)
           name="bibstems"
           defaultValue={state.hiddenValue}
           {...omit(['value'], inputProps)}
-          onFocus={() => selectRef.current.focus()}
+          tabIndex={-1}
           ref={ref}
         />
       </VisuallyHidden>
@@ -341,6 +341,10 @@ const BibstemPickerImpl = (props: IBibstemPickerProps, ref: ForwardedRef<never>)
             ':hover': { backgroundColor: colors.pill },
             color: colors.pillText,
           }),
+          placeholder: (provided) => ({
+            ...provided,
+            color: colors.pillText,
+          }),
         }}
         {...pick(['onBlur'], inputProps)}
       />

src/components/ClassicForm/ClassicForm.tsx

@@ -304,7 +304,7 @@ ClassicForm.propTypes = propTypes;
 const LogicRadios = (props: { variant: 'andor' | 'all'; radioProps: UseFormRegisterReturn }) => {
   const { variant, radioProps } = props;
   return (
-    <RadioGroup defaultValue="and">
+    <RadioGroup defaultValue="and" aria-label="logical selector">
       <Stack spacing={4} direction="row">
         <Radio size="sm" {...radioProps} value="and">
           And

src/components/FeedbackForms/AssociatedArticles/AssociatedArticlesForm.tsx

@@ -402,7 +402,7 @@ export const AssociatedTable = () => {
                 {associatedBibcodes.map((b, index) => (
                   <FormControl isInvalid={!!errors.associatedBibcodes?.[index]} key={`asso-bib-${b.value}`}>
                     <HStack>
-                      <Input {...register(`associatedBibcodes.${index}.value`)} />
+                      <Input {...register(`associatedBibcodes.${index}.value`)} aria-label="bibcode" />
                       <IconButton
                         data-index={index}
                         aria-label="Delete"
@@ -429,6 +429,7 @@ export const AssociatedTable = () => {
                   value={newAssociatedBibcode}
                   ref={newAssociatedBibcodeRef}
                   onKeyDown={handleKeydownNewBibcode}
+                  aria-label="add new bibcode"
                 />
                 <IconButton
                   aria-label="Add"

src/components/FeedbackForms/MissingRecord/AuthorsTable.tsx

@@ -188,6 +188,7 @@ export const AuthorsTable = ({ editable }: { editable: boolean }) => {
           value={newAuthor?.name ?? ''}
           ref={newAuthorNameRef}
           onKeyDown={handleKeydownNewAuthor}
+          aria-label="name"
         />
       </Td>
       <Td>
@@ -196,6 +197,7 @@ export const AuthorsTable = ({ editable }: { editable: boolean }) => {
           onChange={handleNewAffChange}
           value={newAuthor?.aff ?? ''}
           onKeyDown={handleKeydownNewAuthor}
+          aria-label="affiliation"
         />
       </Td>
       <Td>
@@ -204,6 +206,7 @@ export const AuthorsTable = ({ editable }: { editable: boolean }) => {
           onChange={handleNewOrcidChange}
           value={newAuthor?.orcid ?? ''}
           onKeyDown={handleKeydownNewAuthor}
+          aria-label="orcid"
         />
       </Td>
       <Td>
@@ -223,7 +226,7 @@ export const AuthorsTable = ({ editable }: { editable: boolean }) => {
       <Table size="sm">
         <Thead>
           <Tr>
-            <Th aria-label="index" w="4%"></Th>
+            <Th w="4%">No.</Th>
             <Th>Name</Th>
             <Th>Affiliation</Th>
             <Th w="20%">ORCiD</Th>

src/components/FeedbackForms/MissingRecord/ReferencesField.tsx

@@ -151,7 +151,7 @@ export const ReferencesTable = ({ editable }: { editable: boolean }) => {
     <Table size="sm">
       <Thead>
         <Tr>
-          <Th aria-label="index" w="4%"></Th>
+          <Th w="4%">No.</Th>
           <Th w="30%">Type</Th>
           <Th>Reference</Th>
           {editable && <Th w="10%">Actions</Th>}

src/components/FeedbackForms/MissingRecord/UrlsField.tsx

@@ -173,7 +173,7 @@ export const UrlsTable = ({ editable }: { editable: boolean }) => {
     <Table size="sm">
       <Thead>
         <Tr>
-          <Th aria-label="index" w="4%"></Th>
+          <Th w="4%">No.</Th>
           <Th w="30%">Type</Th>
           <Th>URL</Th>
           {editable && <Th w="10%">Actions</Th>}

src/components/FeedbackForms/MissingReferences/MissingReferenceTable.tsx

@@ -111,7 +111,7 @@ export const MissingReferenceTable = () => {
         <Table size="sm">
           <Thead>
             <Tr>
-              <Th aria-label="index" w="4%"></Th>
+              <Th w="4%">No.</Th>
               <Th>Citing Bibcode</Th>
               <Th>Cited Bibcode</Th>
               <Th>Actions</Th>

src/components/Libraries/CollabTable.tsx

@@ -196,10 +196,10 @@ export const CollabTable = ({ id }: { id: LibraryIdentifier }) => {
           <Table size="sm" data-testid="collab-table">
             <Thead>
               <Tr>
-                <Th aria-label="position" w="10%"></Th>
+                <Th w="10%">No.</Th>
                 <Th>Email</Th>
                 <Th w="30%">Permission</Th>
-                <Th w="10%"></Th>
+                <Th w="10%">Action</Th>
               </Tr>
             </Thead>
             <Tbody>

src/components/Libraries/LibraryEntityPane.tsx

@@ -342,7 +342,7 @@ export const LibraryEntityPane = ({ id, publicView }: ILibraryEntityPaneProps) =
                   <LockIcon aria-label="private" />
                 </Tooltip>
               )}
-              <Heading variant="pageTitle" as="h1" data-testid="lib-title">
+              <Heading variant="pageTitle" as="h2" data-testid="lib-title">
                 {name}
               </Heading>
             </Flex>
@@ -528,6 +528,7 @@ const BulkMenu = ({
             onChange={handleChange}
             mr={2}
             data-testid="select-all-checkbox"
+            aria-label="select or deselect all"
           />
         </Tooltip>
         {selectedDocs.length > 0 && (

src/components/Libraries/LibraryListTable.tsx

@@ -53,13 +53,13 @@ type SortDirection = 'asc' | 'desc';
 const columns: { id: Column; heading: string; sortable: boolean; hint?: string }[] = [
   {
     id: 'public',
-    heading: '',
+    heading: 'Visibility',
     sortable: false,
     hint: 'public or private',
   },
   {
     id: 'num_users',
-    heading: '',
+    heading: 'Users',
     sortable: false,
     hint: 'number of collaborators',
   },
@@ -192,7 +192,7 @@ export const LibraryListTable = (props: ILibraryListTableProps) => {
           <Table variant="simple" {...tableProps} data-testid="libraries-table">
             <Thead>
               <Tr>
-                {!isMobile && (selectable || showIndex) && <Th aria-label="index"></Th>}
+                {!isMobile && (selectable || showIndex) && <Th>Select</Th>}
                 {columns.map((column) => (
                   <Fragment key={`col-${column.id}`}>
                     {allHiddenCols.indexOf(column.id) === -1 && (
@@ -269,7 +269,12 @@ export const LibraryListTable = (props: ILibraryListTableProps) => {
                       <Td>
                         {showIndex && `${pageSize * pageIndex + index + 1} `}
                         {selectable && (
-                          <Checkbox isChecked={selected.includes(id)} pointerEvents="none" tabIndex={-1} />
+                          <Checkbox
+                            isChecked={selected.includes(id)}
+                            pointerEvents="none"
+                            tabIndex={-1}
+                            aria-label={`library ${selected.includes(id)} ? 'selected' ? 'not selected`}
+                          />
                         )}
                       </Td>
                     )}

src/components/Libraries/LibrarySettingsPane.tsx

@@ -211,6 +211,7 @@ export const LibrarySettingsPane = ({ id, isFromLanding = false }: ISettingsPane
                 href={isFromLanding ? '/user/libraries' : `/user/libraries/${id}`}
                 display="inline"
                 data-testid="settings-back-btn"
+                aria-label="Back to library"
               >
                 <ChevronLeftIcon mr={2} />
               </SimpleLink>

src/components/Libraries/OperationModal.tsx

@@ -197,7 +197,7 @@ export const OperationModal = ({
                     name="action"
                     control={control}
                     render={({ field: { ref, ...rest } }) => (
-                      <RadioGroup {...rest}>
+                      <RadioGroup {...rest} aria-label="operation">
                         <Stack direction={{ base: 'column', sm: 'row' }}>
                           <Radio value="union" autoFocus>
                             Union

src/components/NavBar/FeedbackDropdown.tsx

@@ -1,8 +1,9 @@
 import { ChevronDownIcon } from '@chakra-ui/icons';
-import { HStack, List, ListItem, Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react';
+import { DarkMode, HStack, Link, List, ListItem, Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import { MouseEvent, ReactElement } from 'react';
 import { ListType } from './types';
+import { useColorModeColors } from '@/lib/useColorModeColors';
 
 export const feedbackItems = {
   record: {
@@ -45,19 +46,7 @@ export const FeedbackDropdown = (props: IFeedbackDropdownProps): ReactElement =>
   const { type, onFinished } = props;
   const items = Object.values(feedbackItems);
   const router = useRouter();
-
-  const handleAccordionClick = (e: MouseEvent<HTMLAnchorElement>) => {
-    if (typeof onFinished === 'function') {
-      // Allow the default navigation but also close the drawer.
-      // Use setTimeout so the drawer closes after the click propagates.
-      setTimeout(() => onFinished(), 0);
-    }
-
-    // If Cmd/Ctrl+Click, let the browser handle natively (new tab)
-    if (e.metaKey || e.ctrlKey) {
-      return;
-    }
-  };
+  const colors = useColorModeColors();
 
   return type === ListType.DROPDOWN ? (
     <Menu variant="navbar" id="nav-menu-feedback">
@@ -68,23 +57,61 @@ export const FeedbackDropdown = (props: IFeedbackDropdownProps): ReactElement =>
       </MenuButton>
       <MenuList zIndex={500}>
         {items.map((item) => (
-          <MenuItem key={item.id} as="a" href={buildHref(item.path, router.asPath)} data-id={item.id}>
+          <MenuItem
+            key={item.id}
+            as="a"
+            href={buildHref(item.path, router.asPath)}
+            data-id={item.id}
+            fontWeight="normal"
+            color={colors.text}
+            _hover={{ textDecoration: 'none' }}
+          >
             {item.label}
           </MenuItem>
         ))}
       </MenuList>
     </Menu>
   ) : (
+    <DarkMode>
+      <SideFeedbackMenu onFinished={onFinished} />
+    </DarkMode>
+  );
+};
+
+const SideFeedbackMenu = ({ onFinished }: { onFinished?: () => void }) => {
+  const items = Object.values(feedbackItems);
+
+  const colors = useColorModeColors();
+
+  const router = useRouter();
+
+  const handleAccordionClick = (e: MouseEvent<HTMLAnchorElement>) => {
+    if (typeof onFinished === 'function') {
+      // Allow the default navigation but also close the drawer.
+      // Use setTimeout so the drawer closes after the click propagates.
+      setTimeout(() => onFinished(), 0);
+    }
+
+    // If Cmd/Ctrl+Click, let the browser handle natively (new tab)
+    if (e.metaKey || e.ctrlKey) {
+      return;
+    }
+  };
+
+  return (
     <List variant="navbar" role="menu">
       {items.map((item) => (
         <ListItem key={item.id} role="menuitem" id={`feedback-item-${item.id}`}>
-          <a
+          <Link
             href={buildHref(item.path, router.asPath)}
             onClick={handleAccordionClick}
             style={{ display: 'block', width: '100%' }}
+            fontWeight="normal"
+            color={colors.text}
+            _hover={{ textDecoration: 'none' }}
           >
             {item.label}
-          </a>
+          </Link>
         </ListItem>
       ))}
     </List>

src/components/Pagination/ControlledPaginationControls.tsx

@@ -42,6 +42,7 @@ export const ControlledPaginationControls = (props: IControlledPaginationControl
           onChange={(e) => onChangePageSize(e.target.value ? (Number(e.target.value) as NumPerPageType) : 10)}
           size="sm"
           data-testid="page-size-selector"
+          aria-label="page size"
         >
           <option value={10}>10</option>
           <option value={25}>25</option>

src/components/Pagination/PaginationControls.tsx

@@ -27,6 +27,7 @@ export const PaginationControls = <T extends object>(props: IPaginationControlsP
           onChange={(e) => table.setPageSize(e.target.value ? Number(e.target.value) : 10)}
           size="sm"
           display={{ base: 'none', sm: 'block' }}
+          aria-label="numbers per page"
         >
           <option value={10}>10</option>
           <option value={25}>25</option>

src/components/RecaptchaMessage/RecaptchaMessage.tsx

@@ -3,7 +3,7 @@ import { SimpleLink } from '@/components/SimpleLink';
 
 export const RecaptchaMessage = (props: TextProps) => {
   return (
-    <Text fontSize="sm" color="gray.500" mt="4" {...props}>
+    <Text fontSize="sm" mt="4" {...props}>
       This site is protected by reCAPTCHA and the Google
       <SimpleLink display="inline" href={'https://policies.google.com/privacy'}>
         {' '}

src/components/SearchFacet/SearchFacetModal/SelectedList.tsx

@@ -1,4 +1,4 @@
-import { BoxProps, Flex, IconButton, Tag, TagCloseButton, TagLabel, Wrap } from '@chakra-ui/react';
+import { BoxProps, Flex, IconButton, Tag, TagCloseButton, TagLabel, Wrap, WrapItem } from '@chakra-ui/react';
 import { useFacetStore } from '@/components/SearchFacet/store/FacetStore';
 import { isEmpty } from 'ramda';
 import { MouseEventHandler } from 'react';
@@ -41,18 +41,20 @@ export const SelectedList = (props: BoxProps) => {
     >
       <Wrap flex="1" spacing="1">
         {selected.map((key) => (
-          <Tag key={key} size="sm" variant="subtle">
-            <TagLabel>
-              {facetId === 'simbad_object_facet_hier' && key.startsWith('1/')
-                ? getObjectName(formatKeyToName(key), queryClient)
-                : formatKeyToName(key)}
-            </TagLabel>
-            <TagCloseButton
-              onClick={handleDeselect}
-              data-key={key}
-              aria-label={`remove ${formatKeyToName(key)} from selection`}
-            />
-          </Tag>
+          <WrapItem key={key}>
+            <Tag size="sm" variant="subtle">
+              <TagLabel>
+                {facetId === 'simbad_object_facet_hier' && key.startsWith('1/')
+                  ? getObjectName(formatKeyToName(key), queryClient)
+                  : formatKeyToName(key)}
+              </TagLabel>
+              <TagCloseButton
+                onClick={handleDeselect}
+                data-key={key}
+                aria-label={`remove ${formatKeyToName(key)} from selection`}
+              />
+            </Tag>
+          </WrapItem>
         ))}
       </Wrap>
       <IconButton

src/components/SearchFacet/SearchFacetModal/SortControl.tsx

@@ -37,7 +37,14 @@ export const SortControl = ({
       }}
       {...flexProps}
     >
-      <Select size="sm" value={value} onChange={handleSortChange} borderRightRadius="none" _focus={{ boxShadow: '' }}>
+      <Select
+        aria-label="sort by"
+        size="sm"
+        value={value}
+        onChange={handleSortChange}
+        borderRightRadius="none"
+        _focus={{ boxShadow: '' }}
+      >
         <option value="count">Count</option>
         {onlyCount ? null : <option value="index">A-Z</option>}
       </Select>

src/components/Tags/Tags.tsx

@@ -26,7 +26,7 @@ export const Tags = ({ tagItems, onRemove, onClear, placeHolder, ...boxProps }:
   return (
     <Flex justifyContent="space-between" alignItems="center" borderWidth={1} px={2} {...boxProps}>
       <Box>
-        {tagItems.length === 0 && placeHolder ? <Text color="gray.300">{placeHolder}</Text> : null}
+        {tagItems.length === 0 && placeHolder ? <Text color="gray.500">{placeHolder}</Text> : null}
         {tagItems.map((item) => (
           <Tag key={`tag-${item.id}`} size="md" m={1}>
             <TagLabel>{item.label}</TagLabel>

src/components/Visualizations/GraphPanes/AuthorNetworkGraphPane.tsx

@@ -45,7 +45,7 @@ export const AuthorNetworkGraphPane = ({
   return (
     <Stack as="section" aria-label="Author Network" width="100%" mt={5}>
       <PaperLimit initialLimit={paperLimit} max={maxPaperLimit} onApply={handleChangePaperLimit} />
-      <RadioGroup defaultChecked onChange={handleChangeView} value={view.id}>
+      <RadioGroup defaultChecked onChange={handleChangeView} value={view.id} aria-label="view option">
         <Stack direction="row">
           {views.map((v) => (
             <Radio value={v.id} key={v.id}>