Add ARIA markup for sidebar regions and toggle buttons

client/src/components/Sidebar/Sidebar.tsx

@@ -9,6 +9,8 @@ export interface Strings {
   DASHBOARD: string;
   EDIT_YOUR_ACCOUNT: string,
   SEARCH: string,
+  TOGGLE_SIDEBAR: string,
+  MAIN_MENU: string,
 }
 
 export interface ModuleRenderContext {
@@ -166,7 +168,7 @@ export const Sidebar: React.FunctionComponent<SidebarProps> = (
 
   return (
     <>
-      <aside
+      <div
         className={
           'sidebar'
           + (slim ? ' sidebar--slim' : '')
@@ -175,7 +177,12 @@ export const Sidebar: React.FunctionComponent<SidebarProps> = (
         }
       >
         <div className="sidebar__inner">
-          <button onClick={onClickCollapseToggle} className="button sidebar__collapse-toggle">
+          <button
+            onClick={onClickCollapseToggle}
+            aria-label={strings.TOGGLE_SIDEBAR}
+            aria-expanded={!slim}
+            className="button sidebar__collapse-toggle"
+          >
             {collapsed ? <Icon name="angle-double-right" /> : <Icon name="angle-double-left" />}
           </button>
 
@@ -189,9 +196,11 @@ export const Sidebar: React.FunctionComponent<SidebarProps> = (
             {renderedModules}
           </div>
         </div>
-      </aside>
+      </div>
       <button
         onClick={onClickOpenCloseToggle}
+        aria-label={strings.TOGGLE_SIDEBAR}
+        aria-expanded={visibleOnMobile}
         className={
           'button sidebar-nav-toggle'
           + (isMobile ? ' sidebar-nav-toggle--mobile' : '')

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

@@ -168,7 +168,7 @@ export const Menu: React.FunctionComponent<MenuProps> = (
 
   return (
     <>
-      <nav className={className}>
+      <nav className={className} aria-label={strings.MAIN_MENU}>
         <ul className="sidebar-main-menu__list">
           {renderMenu('', menuItems, slim, state, dispatch, navigate)}
         </ul>

client/tests/stubs.js

@@ -65,6 +65,8 @@ global.wagtailConfig = {
     SAVE_PAGE_TO_ADD_COMMENT: 'Save the page to add this comment',
     SAVE_PAGE_TO_SAVE_COMMENT_CHANGES: 'Save the page to save this comment',
     SAVE_PAGE_TO_SAVE_REPLY: 'Save the page to save this reply',
+    TOGGLE_SIDEBAR: 'Toggle sidebar',
+    MAIN_MENU: 'Main menu',
   },
   WAGTAIL_I18N_ENABLED: true,
   LOCALES: [

wagtail/admin/localization.py

@@ -97,6 +97,8 @@ def get_js_translation_strings():
         'SAVE_PAGE_TO_ADD_COMMENT': _('Save the page to add this comment'),
         'SAVE_PAGE_TO_SAVE_COMMENT_CHANGES': _('Save the page to save this comment'),
         'SAVE_PAGE_TO_SAVE_REPLY': _('Save the page to save this reply'),
+        'TOGGLE_SIDEBAR': _('Toggle sidebar'),
+        'MAIN_MENU': _('Main menu'),
         'DASHBOARD': _('Dashboard'),
         'EDIT_YOUR_ACCOUNT': _('Edit your account'),
         'SEARCH': _('Search'),

wagtail/admin/templates/wagtailadmin/base.html

@@ -4,7 +4,7 @@
 {% block furniture %}
     {% slim_sidebar_enabled as slim_sidebar_enabled %}
     {% if slim_sidebar_enabled %}
-    <aside id="wagtail-sidebar" data-props="{% menu_props %}"></aside>
+    <aside id="wagtail-sidebar" data-wagtail-sidebar data-props="{% menu_props %}"></aside>
     {% else %}
     <aside id="wagtail-sidebar" class="nav-wrapper" data-nav-primary>
         <div class="inner">