Implement aria-current for sidebar links

client/src/components/Sidebar/menu/LinkMenuItem.tsx

@@ -7,6 +7,7 @@ import { MenuItemDefinition, MenuItemProps } from './MenuItem';
 
 export const LinkMenuItem: React.FunctionComponent<MenuItemProps<LinkMenuItemDefinition>> = (
   { item, path, state, dispatch, navigate }) => {
+  const isCurrent = state.activePath === path;
   const isActive = state.activePath.startsWith(path);
   const isInSubMenu = path.split('.').length > 2;
 
@@ -79,6 +80,7 @@ export const LinkMenuItem: React.FunctionComponent<MenuItemProps<LinkMenuItemDef
     <li className={className} ref={wrapperRef}>
       <a
         href={item.url}
+        aria-current={isCurrent ? 'page' : undefined}
         onClick={onClick}
         className={`sidebar-menu-item__link ${item.classNames}`}
       >

client/src/components/Sidebar/modules/CustomBranding.tsx

@@ -7,10 +7,17 @@ interface CustomBrandingProps {
   homeUrl: string;
   html: string;
   strings;
+  currentPath: string;
   navigate(url: string): void;
 }
 
-const CustomBranding: React.FunctionComponent<CustomBrandingProps> = ({ homeUrl, html, strings, navigate }) => {
+const CustomBranding: React.FunctionComponent<CustomBrandingProps> = ({
+  homeUrl,
+  html,
+  strings,
+  currentPath,
+  navigate,
+}) => {
   const onClick = (e: React.MouseEvent) => {
     // Do not capture click events with modifier keys or non-main buttons.
     if (
@@ -32,6 +39,7 @@ const CustomBranding: React.FunctionComponent<CustomBrandingProps> = ({ homeUrl,
       href={homeUrl}
       onClick={onClick}
       aria-label={strings.DASHBOARD}
+      aria-current={currentPath === homeUrl ? 'page' : undefined}
       dangerouslySetInnerHTML={{ __html: html }}
     />
   );
@@ -46,7 +54,14 @@ export class CustomBrandingModuleDefinition implements ModuleDefinition {
     this.html = html;
   }
 
-  render({ strings, navigate, key }) {
-    return <CustomBranding key={key} homeUrl={this.homeUrl} html={this.html} strings={strings} navigate={navigate} />;
+  render({ strings, currentPath, navigate, key }) {
+    return (<CustomBranding
+      key={key}
+      homeUrl={this.homeUrl}
+      html={this.html}
+      strings={strings}
+      currentPath={currentPath}
+      navigate={navigate}
+    />);
   }
 }

client/src/components/Sidebar/modules/WagtailBranding.tsx

@@ -15,10 +15,17 @@ interface WagtailBrandingProps {
   homeUrl: string;
   images: LogoImages;
   strings: Strings;
+  currentPath: string;
   navigate(url: string): void;
 }
 
-const WagtailBranding: React.FunctionComponent<WagtailBrandingProps> = ({ homeUrl, images, strings, navigate }) => {
+const WagtailBranding: React.FunctionComponent<WagtailBrandingProps> = ({
+  homeUrl,
+  images,
+  strings,
+  currentPath,
+  navigate,
+}) => {
   // Tail wagging
   // If the pointer changes direction 8 or more times without leaving, wag the tail!
   const lastMouseX = React.useRef(0);
@@ -71,6 +78,7 @@ const WagtailBranding: React.FunctionComponent<WagtailBrandingProps> = ({ homeUr
   return (
     <a
       className={desktopClassName} href={homeUrl} aria-label={strings.DASHBOARD}
+      aria-current={currentPath === homeUrl ? 'page' : undefined}
       onClick={onClick} onMouseMove={onMouseMove} onMouseLeave={onMouseLeave}
     >
       <div className="sidebar-wagtail-branding__icon-wrapper">
@@ -95,10 +103,10 @@ export class WagtailBrandingModuleDefinition implements ModuleDefinition {
     this.images = images;
   }
 
-  render({ strings, key, navigate }) {
+  render({ strings, key, navigate, currentPath }) {
     return (<WagtailBranding
       key={key} homeUrl={this.homeUrl} images={this.images}
-      strings={strings} navigate={navigate}
+      strings={strings} navigate={navigate} currentPath={currentPath}
     />);
   }
 }