Austenem/Accessibility updates

CHANGELOG-accessibility-updates.md

@@ -0,0 +1 @@
+- Resolve accessibility issues related to arias and interactive controls throughout the portal.

context/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: 0 }}
             >
               {action}
             </Box>
           )}
-        </AccordionSummary>
-        <AccordionDetails sx={{ padding: 0 }}>{children}</AccordionDetails>
+          {children}
+        </AccordionDetails>
       </DetailPageSectionAccordion>
     </DetailPageSection>
   );

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>

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) => (

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';
@@ -13,6 +14,7 @@ import { getTileDescendantCounts } from 'js/components/entity-tile/EntityTile/ut
 import { capitalizeString } from 'js/helpers/functions';
 import TileGrid from 'js/shared-styles/tiles/TileGrid';
 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';
@@ -44,10 +46,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,

context/app/static/js/components/search/Search.tsx

@@ -175,7 +175,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} />

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);

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}

context/app/static/js/shared-styles/buttons/index.tsx

@@ -69,7 +69,7 @@ function TooltipToggleButton({
 
   return (
     <Tooltip title={tooltipTitle}>
-      <span>
+      <span role="tooltip">
         <WhiteBackgroundToggleButton {...rest} id={id} data-testid={id}>
           {children}
         </WhiteBackgroundToggleButton>

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 };

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';

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>

context/app/templates/base-pages/base.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html lang="en">
 
 <head>
   <meta charset="utf-8">