add aria-selected and aria-expanded

ProjectMirador · Jun 6, 2024 · 1ec5dfc · 1ec5dfc
1 parent 8a02a05
commit 1ec5dfc
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 6 deletions.
diff --git a/src/components/LanguageSettings.js b/src/components/LanguageSettings.js
@@ -23,6 +23,7 @@ export class LanguageSettings extends Component {
         {
           languages.map(language => (
             <MenuItem
+              aria-selected={language.current}
               key={language.locale}
               onClick={() => { handleClick(language.locale); }}
             >

diff --git a/src/components/NestedMenu.js b/src/components/NestedMenu.js
@@ -45,7 +45,12 @@ export class NestedMenu extends Component {
     } = this.props;
     return (
       <>
-        <MenuItem onClick={this.handleMenuClick} divider={nestedMenuIsOpen} {...otherProps}>
+        <MenuItem
+          aria-expanded={nestedMenuIsOpen}
+          onClick={this.handleMenuClick}
+          divider={nestedMenuIsOpen}
+          {...otherProps}
+        >
           {icon && (<ListItemIcon>{icon}</ListItemIcon>)}
           <ListItemText primaryTypographyProps={{ variant: 'body1' }}>
             {label}

diff --git a/src/components/ThumbnailCanvasGrouping.js b/src/components/ThumbnailCanvasGrouping.js
@@ -46,6 +46,8 @@ export class ThumbnailCanvasGrouping extends PureComponent {
     } = data;
     const currentGroupings = canvasGroupings[index];
     const SPACING = 8;
+    const isSelected = currentGroupings.map(canvas => canvas.id).includes(currentCanvasId);
+
     return (
       <div
         style={{
@@ -58,6 +60,7 @@ export class ThumbnailCanvasGrouping extends PureComponent {
         }}
         className={ns('thumbnail-nav-container')}
         role="gridcell"
+        aria-selected={isSelected}
         aria-colindex={index + 1}
       >
         <StyledCanvas
@@ -73,10 +76,10 @@ export class ThumbnailCanvasGrouping extends PureComponent {
               outlineOffset: '-2px',
             },
             height: (position === 'far-right') ? 'auto' : `${height - SPACING}px`,
-            outline: currentGroupings.map(canvas => canvas.id).includes(currentCanvasId) ? `2px solid ${theme.palette.primary.main}` : 0,
-            ...(currentGroupings.map(canvas => canvas.id).includes(currentCanvasId) && {
+            outline: isSelected ? `2px solid ${theme.palette.primary.main}` : 0,
+            ...isSelected && {
               outlineOffset: '3px',
-            }),
+            },
             width: (position === 'far-bottom') ? 'auto' : `${style.width}px`,
           })}
           className={classNames(

diff --git a/src/components/WindowTopBar.js b/src/components/WindowTopBar.js
@@ -45,7 +45,7 @@ export class WindowTopBar extends Component {
       removeWindow, windowId, toggleWindowSideBar, t,
       maximizeWindow, maximized, minimizeWindow, allowClose, allowMaximize,
       focusWindow, allowFullscreen, allowTopMenuButton, allowWindowSideBar,
-      component,
+      component, sideBarOpen,
     } = this.props;
 
     return (
@@ -60,6 +60,7 @@ export class WindowTopBar extends Component {
           {allowWindowSideBar && (
             <MiradorMenuButton
               aria-label={t('toggleWindowSideBar')}
+              aria-expanded={sideBarOpen}
               onClick={toggleWindowSideBar}
               className={ns('window-menu-btn')}
             >
@@ -114,6 +115,7 @@ WindowTopBar.propTypes = {
   maximizeWindow: PropTypes.func,
   minimizeWindow: PropTypes.func,
   removeWindow: PropTypes.func.isRequired,
+  sideBarOpen: PropTypes.bool,
   t: PropTypes.func,
   toggleWindowSideBar: PropTypes.func.isRequired,
   windowDraggable: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types
@@ -132,6 +134,7 @@ WindowTopBar.defaultProps = {
   maximized: false,
   maximizeWindow: () => {},
   minimizeWindow: () => {},
+  sideBarOpen: false,
   t: key => key,
   windowDraggable: true,
 };
diff --git a/src/components/WindowTopMenuButton.js b/src/components/WindowTopMenuButton.js
@@ -56,6 +56,7 @@ export class WindowTopMenuButton extends Component {
           aria-haspopup="true"
           aria-label={t('windowMenu')}
           aria-owns={open ? menuId : undefined}
+          aria-selected={open}
           className={open ? classes.ctrlBtnSelected : undefined}
           selected={open}
           onClick={this.handleMenuClick}

diff --git a/src/components/WorkspaceMenu.js b/src/components/WorkspaceMenu.js
@@ -109,6 +109,7 @@ export class WorkspaceMenu extends Component {
           </MenuItem>
           <MenuItem
             aria-haspopup="true"
+            aria-expanded={Boolean(workspaceSelection.open)}
             onClick={(e) => { this.handleMenuItemClick('workspaceSelection', e); handleClose(e); }}
             aria-owns={workspaceSelection.anchorEl ? 'workspace-selection' : undefined}
           >

diff --git a/src/containers/WindowTopBar.js b/src/containers/WindowTopBar.js
@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
-import { getWindowConfig, isFocused } from '../state/selectors';
+import { getWindowConfig, isFocused, getWindow } from '../state/selectors';
 import { WindowTopBar } from '../components/WindowTopBar';
 
 /** mapStateToProps */
@@ -18,6 +18,7 @@ const mapStateToProps = (state, { windowId }) => {
     allowWindowSideBar: config.allowWindowSideBar,
     focused: isFocused(state, { windowId }),
     maximized: config.maximized,
+    sideBarOpen: (getWindow(state, { windowId }) || {}).sideBarOpen,
   };
 };