From 1ec5dfc241c9754e73034463a7def1b55144c4b3 Mon Sep 17 00:00:00 2001
From: Fabian Stoehr <stoehr@ub.uni-leipzig.de>
Date: Thu, 6 Jun 2024 12:45:23 +0200
Subject: [PATCH] add aria-selected and aria-expanded

---
 src/components/LanguageSettings.js        | 1 +
 src/components/NestedMenu.js              | 7 ++++++-
 src/components/ThumbnailCanvasGrouping.js | 9 ++++++---
 src/components/WindowTopBar.js            | 5 ++++-
 src/components/WindowTopMenuButton.js     | 1 +
 src/components/WorkspaceMenu.js           | 1 +
 src/containers/WindowTopBar.js            | 3 ++-
 7 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/components/LanguageSettings.js b/src/components/LanguageSettings.js
index f0048c4788..cf0f7d3af9 100644
--- 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
index b611077864..61a3425aa7 100644
--- 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
index f01d399260..354379a5e5 100644
--- 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
index 5e32f8cd07..c54d40ae45 100644
--- 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
index e48bd84d2c..191ba6ac32 100644
--- 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
index c6e9a191a6..826ab78b6f 100644
--- 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
index ae9fc34b90..ea2b3480bc 100644
--- 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,
   };
 };