add aria-selected and aria-expanded

src/components/LanguageSettings.js

@@ -14,6 +14,7 @@ export function LanguageSettings({ handleClick, languages }) {
       {
         languages.map(language => (
           <MenuItem
+            aria-selected={language.current}
             key={language.locale}
             onClick={() => { handleClick(language.locale); }}
           >

src/components/NestedMenu.js

@@ -21,7 +21,7 @@ export function NestedMenu({
 
   return (
     <>
-      <MenuItem onClick={handleMenuClick} divider={nestedMenuIsOpen} {...otherProps}>
+      <MenuItem aria-expanded={nestedMenuIsOpen} onClick={handleMenuClick} divider={nestedMenuIsOpen} {...otherProps}>
         {icon && (<ListItemIcon>{icon}</ListItemIcon>)}
         <ListItemText primaryTypographyProps={{ variant: 'body1' }}>
           {label}

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(

src/components/WindowTopBar.js

@@ -39,7 +39,7 @@ export function WindowTopBar({
   removeWindow, windowId, toggleWindowSideBar,
   maximizeWindow = () => {}, maximized = false, minimizeWindow = () => {}, allowClose = true, allowMaximize = true,
   focusWindow = () => {}, allowFullscreen = false, allowTopMenuButton = true, allowWindowSideBar = true,
-  component = 'nav',
+  component = 'nav', sideBarOpen = false,
 }) {
   const { t } = useTranslation();
   const ownerState = arguments[0]; // eslint-disable-line prefer-rest-params
@@ -55,6 +55,7 @@ export function WindowTopBar({
       >
         {allowWindowSideBar && (
           <MiradorMenuButton
+            aria-expanded={sideBarOpen}
             aria-label={t('toggleWindowSideBar')}
             onClick={toggleWindowSideBar}
             className={ns('window-menu-btn')}
@@ -109,6 +110,7 @@ WindowTopBar.propTypes = {
   maximizeWindow: PropTypes.func,
   minimizeWindow: PropTypes.func,
   removeWindow: PropTypes.func.isRequired,
+  sideBarOpen: PropTypes.bool,
   toggleWindowSideBar: PropTypes.func.isRequired,
   windowDraggable: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types
   windowId: PropTypes.string.isRequired,

src/components/WindowTopMenuButton.js

@@ -31,6 +31,7 @@ export function WindowTopMenuButton({ classes = {}, windowId }) {
         aria-haspopup="true"
         aria-label={t('windowMenu')}
         aria-owns={open ? menuId : undefined}
+        aria-selected={open}
         className={open ? classes.ctrlBtnSelected : undefined}
         selected={open}
         onClick={handleMenuClick}

src/components/WorkspaceMenu.js

@@ -67,6 +67,7 @@ export function WorkspaceMenu({
         </MenuItem>
         <MenuItem
           aria-haspopup="true"
+          aria-expanded={selectedOption === 'workspaceSelection'}
           onClick={(e) => { handleClick('workspaceSelection', e); }}
           aria-owns={selectedOption === 'workspaceSelection' ? 'workspace-selection' : undefined}
         >

src/containers/WindowTopBar.js

@@ -2,7 +2,7 @@ import { compose } from 'redux';
 import { connect } from 'react-redux';
 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 */
@@ -17,6 +17,7 @@ const mapStateToProps = (state, { windowId }) => {
     allowWindowSideBar: config.allowWindowSideBar,
     focused: isFocused(state, { windowId }),
     maximized: config.maximized,
+    sideBarOpen: (getWindow(state, { windowId }) || {}).sideBarOpen,
   };
 };