Austenem/Accessibility updates (#3648)

* aria child roles * aria and lang updates * update search * detail page updates * update search menu * update toggle * update nested detail accordion * add changelog * clean up * review updates
hubmapconsortium · Jan 6, 2025 · 6c6ee37 · 6c6ee37
1 parent c174175
commit 6c6ee37
Show file tree

Hide file tree

Showing 14 changed files with 39 additions and 28 deletions.
diff --git a/CHANGELOG-accessibility-updates.md b/CHANGELOG-accessibility-updates.md
@@ -0,0 +1 @@
+- Resolve accessibility issues related to arias and interactive controls throughout the portal.
diff --git a/...xt/app/static/js/components/detailPage/DetailPageSection/CollapsibleDetailPageSection.tsx b/...xt/app/static/js/components/detailPage/DetailPageSection/CollapsibleDetailPageSection.tsx
@@ -64,6 +64,8 @@ export default function CollapsibleDetailPageSection({
               <StyledInfoIcon color="primary" />
             </SecondaryBackgroundTooltip>
           )}
+        </AccordionSummary>
+        <AccordionDetails sx={{ padding: 0 }}>
           {action && (
             <Box
               onClick={(e) => {
@@ -72,12 +74,13 @@ export default function CollapsibleDetailPageSection({
               }}
               ml="auto"
               className="accordion-section-action"
+              sx={{ position: 'absolute', right: 0, top: 7 }}
             >
               {action}
             </Box>
           )}
-        </AccordionSummary>
-        <AccordionDetails sx={{ padding: 0 }}>{children}</AccordionDetails>
+          {children}
+        </AccordionDetails>
       </DetailPageSectionAccordion>
     </DetailPageSection>
   );

diff --git a/context/app/static/js/components/detailPage/MetadataSection/MetadataSection.tsx b/context/app/static/js/components/detailPage/MetadataSection/MetadataSection.tsx
@@ -11,7 +11,8 @@ import withShouldDisplay from 'js/helpers/withShouldDisplay';
 import { sectionIconMap } from 'js/shared-styles/icons/sectionIconMap';
 import { SectionDescription } from 'js/shared-styles/sections/SectionDescription';
 import { getTableEntities } from 'js/components/detailPage/MetadataSection/utils';
-import { DownloadIcon, StyledWhiteBackgroundIconButton } from '../MetadataTable/style';
+import { WhiteBackgroundIconButton } from 'js/shared-styles/buttons';
+import { DownloadIcon } from '../MetadataTable/style';
 import MetadataTabs from '../multi-assay/MultiAssayMetadataTabs';
 import { Columns, defaultTSVColumns } from './columns';
 
@@ -54,12 +55,12 @@ function MetadataWrapper({ allTableRows, tsvColumns = defaultTSVColumns, childre
       action={
         <SecondaryBackgroundTooltip title="Download">
           <a href={downloadUrl} download={`${hubmap_id}.tsv`}>
-            <StyledWhiteBackgroundIconButton
+            <WhiteBackgroundIconButton
               aria-label="Download TSV of selected items' metadata"
               onClick={() => trackEntityPageEvent({ action: `Metadata / Download Metadata` })}
             >
               <DownloadIcon color="primary" />
-            </StyledWhiteBackgroundIconButton>
+            </WhiteBackgroundIconButton>
           </a>
         </SecondaryBackgroundTooltip>
       }

diff --git a/context/app/static/js/components/detailPage/MetadataTable/style.ts b/context/app/static/js/components/detailPage/MetadataTable/style.ts
@@ -1,7 +1,5 @@
 import { styled } from '@mui/material/styles';
 import GetAppIcon from '@mui/icons-material/GetAppRounded';
-
-import { WhiteBackgroundIconButton } from 'js/shared-styles/buttons';
 import SectionHeader from 'js/shared-styles/sections/SectionHeader';
 
 const DownloadIcon = styled(GetAppIcon)({
@@ -13,12 +11,8 @@ const Flex = styled('div')({
   justifyContent: 'space-between',
 });
 
-const StyledWhiteBackgroundIconButton = styled(WhiteBackgroundIconButton)(({ theme }) => ({
-  marginBottom: theme.spacing(0.5),
-}));
-
 const StyledSectionHeader = styled(SectionHeader)({
   alignSelf: 'flex-end',
 });
 
-export { DownloadIcon, Flex, StyledWhiteBackgroundIconButton, StyledSectionHeader };
+export { DownloadIcon, Flex, StyledSectionHeader };
diff --git a/context/app/static/js/components/detailPage/StatusIcon/StatusIcon.tsx b/context/app/static/js/components/detailPage/StatusIcon/StatusIcon.tsx
@@ -44,7 +44,7 @@ const StatusIcon = forwardRef(function StatusIcon(
 
   if (tooltip) {
     return (
-      <SecondaryBackgroundTooltip title={irregularCaseStatus}>
+      <SecondaryBackgroundTooltip title={irregularCaseStatus} role="status">
         {/* The wrapper is required for the tooltip to work */}
         <Box display="flex">{content}</Box>
       </SecondaryBackgroundTooltip>

diff --git a/context/app/static/js/components/home/Hero/Hero.tsx b/context/app/static/js/components/home/Hero/Hero.tsx
@@ -80,7 +80,7 @@ const heroTabs = [
 export default function Hero() {
   const [activeTab, setActiveTab] = useState(0);
   return (
-    <Paper component="section" role="tablist" aria-label="HuBMAP Introduction">
+    <Paper component="section" aria-label="HuBMAP Introduction">
       <HeroTabContextProvider activeTab={activeTab} setActiveTab={setActiveTab}>
         <HeroGridContainer $activeSlide={activeTab} role="tablist">
           {heroTabs.map((tab, index) => (

diff --git a/context/app/static/js/components/search/Results/ResultsTiles.tsx b/context/app/static/js/components/search/Results/ResultsTiles.tsx
@@ -5,6 +5,7 @@ import MenuItem from '@mui/material/MenuItem';
 import FormControl from '@mui/material/FormControl';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 import ListItemIcon from '@mui/material/ListItemIcon';
+import InputLabel from '@mui/material/InputLabel';
 import Check from '@mui/icons-material/Check';
 
 import { Entity } from 'js/components/types';
@@ -14,6 +15,7 @@ import { capitalizeString } from 'js/helpers/functions';
 import TileGrid from 'js/shared-styles/tiles/TileGrid';
 import { useEntityTileAriaLabelText } from 'js/hooks/useEntityTileAriaLabel';
 import { trackEvent } from 'js/helpers/trackers';
+import { StyledDownIcon } from 'js/shared-styles/dropdowns/DropdownMenuButton/style';
 import { useSearch } from '../Search';
 import ViewMoreResults from './ViewMoreResults';
 import { useSearchStore } from '../store';
@@ -45,10 +47,16 @@ function TilesSortSelect() {
 
   return (
     <FormControl>
+      <InputLabel id="sort-select-label" sx={{ display: 'none' }}>
+        Sort by
+      </InputLabel>
       <Select
         value={sortField.field}
         onChange={handleChange}
+        labelId="sort-select-label"
         color="primary"
+        variant="outlined"
+        IconComponent={StyledDownIcon}
         sx={(theme) => ({
           backgroundColor: theme.palette.primary.main,
           color: theme.palette.white.main,

diff --git a/context/app/static/js/components/search/Search.tsx b/context/app/static/js/components/search/Search.tsx
@@ -176,7 +176,7 @@ function Bar({ type }: TypeProps) {
   return (
     <Stack direction="row" spacing={1}>
       <Box flexGrow={1}>
-        <SearchBar />
+        <SearchBar type={type} />
       </Box>
       <MetadataMenu type={type} />
       <WorkspacesDropdownMenu type={type} />

diff --git a/context/app/static/js/components/search/SearchBar.tsx b/context/app/static/js/components/search/SearchBar.tsx
@@ -5,7 +5,7 @@ import { trackSiteSearch, trackEvent } from 'js/helpers/trackers';
 import SearchBarComponent from 'js/shared-styles/inputs/SearchBar';
 import { useSearchStore } from './store';
 
-function SearchBar() {
+function SearchBar({ type }: { type: string }) {
   const { setSearch, search, analyticsCategory } = useSearchStore(
     useShallow((state) => ({
       setSearch: state.setSearch,
@@ -41,6 +41,7 @@ function SearchBar() {
       <SearchBarComponent
         id="free-text-search"
         fullWidth
+        placeholder={`Search ${type.toLowerCase()}s`}
         value={input}
         onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
           setInput(event.target.value);

diff --git a/context/app/static/js/components/workspaces/WorkspaceListItem.tsx b/context/app/static/js/components/workspaces/WorkspaceListItem.tsx
@@ -62,7 +62,9 @@ function WorkspaceListItem({
         <SecondaryBackgroundTooltip title={tooltipToDisplay}>
           <span>
             <ToggleComponent
-              aria-label={`Select ${workspace.name}.`}
+              inputProps={{
+                'aria-label': `Select ${workspace.name}.`,
+              }}
               checked={selected}
               onChange={() => toggleItem(workspace.id)}
               disabled={isRunning || disabled}

diff --git a/context/app/static/js/shared-styles/buttons/index.tsx b/context/app/static/js/shared-styles/buttons/index.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, ComponentProps } from 'react';
+import React, { PropsWithChildren, ComponentProps, useId } from 'react';
 import { Theme, styled } from '@mui/material/styles';
 import IconButton, { IconButtonProps } from '@mui/material/IconButton';
 import ToggleButton from '@mui/material/ToggleButton';
@@ -66,10 +66,11 @@ function TooltipToggleButton({
   ...rest
 }: TooltipToggleButtonProps) {
   const Tooltip = tooltipComponent;
+  const tooltipId = useId();
 
   return (
-    <Tooltip title={tooltipTitle}>
-      <span>
+    <Tooltip title={tooltipTitle} id={tooltipId}>
+      <span aria-describedby={tooltipId}>
         <WhiteBackgroundToggleButton {...rest} id={id} data-testid={id}>
           {children}
         </WhiteBackgroundToggleButton>

diff --git a/context/app/static/js/shared-styles/dropdowns/DropdownMenuButton/style.ts b/context/app/static/js/shared-styles/dropdowns/DropdownMenuButton/style.ts
@@ -1,12 +1,12 @@
-import { styled } from '@mui/material/styles';
+import { Theme, styled } from '@mui/material/styles';
 import { UpIcon, DownIcon } from 'js/shared-styles/icons';
 
-const StyledUpIcon = styled(UpIcon)(({ theme }) => ({
+const sharedIconStyles = ({ theme }: { theme: Theme }) => ({
   marginLeft: theme.spacing(0.5),
-}));
+  fontSize: '1.5rem',
+});
 
-const StyledDownIcon = styled(DownIcon)(({ theme }) => ({
-  marginLeft: theme.spacing(0.5),
-}));
+const StyledUpIcon = styled(UpIcon)(sharedIconStyles);
+const StyledDownIcon = styled(DownIcon)(sharedIconStyles);
 
 export { StyledUpIcon, StyledDownIcon };
diff --git a/context/app/static/js/shared-styles/icons/icons.tsx b/context/app/static/js/shared-styles/icons/icons.tsx
@@ -18,7 +18,7 @@ import EditRoundedIcon from '@mui/icons-material/EditRounded';
 import CollectionsBookmarkRoundedIcon from '@mui/icons-material/CollectionsBookmarkRounded';
 import EmailRoundedIcon from '@mui/icons-material/EmailRounded';
 import ListAltRoundedIcon from '@mui/icons-material/ListAltRounded';
-import ArrowDropDownRoundedIcon from '@mui/icons-material/ExpandMoreRounded';
+import ArrowDropDownRoundedIcon from '@mui/icons-material/ArrowDropDownRounded';
 import ArrowDropUpRoundedIcon from '@mui/icons-material/ArrowDropUpRounded';
 import AddRoundedIcon from '@mui/icons-material/AddRounded';
 import DescriptionRoundedIcon from '@mui/icons-material/DescriptionRounded';

diff --git a/context/app/static/js/shared-styles/tooltips/InfoTextTooltip/InfoTextTooltip.tsx b/context/app/static/js/shared-styles/tooltips/InfoTextTooltip/InfoTextTooltip.tsx
@@ -11,7 +11,7 @@ function InfoTextTooltip({ tooltipTitle, children }: InfoTextTooltipProps) {
   return (
     <StyledOuterStack>
       {children}
-      <SecondaryBackgroundTooltip title={tooltipTitle}>
+      <SecondaryBackgroundTooltip title={tooltipTitle} role="definition">
         <StyledInnerStack>
           <StyledInfoIcon />
         </StyledInnerStack>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		- Resolve accessibility issues related to arias and interactive controls throughout the portal.