5336 focus move to pages explorer when open

CHANGELOG.txt

@@ -55,6 +55,7 @@ Changelog
  * Fix: Remove tab order customisations in CMS admin (Jordan Bauer)
  * Fix: Add labels to permission checkboxes for screen reader users (Helen Chapman, Katie Locke)
  * Fix: Page.copy() no longer copies child objects when the accesssor name is included in `exclude_fields_in_copy` (Karl Hobley)
+ * Fix: Move focus to the pages explorer menu when open (Helen Chapman)
 
 
 2.5.1 (07.05.2019)

client/src/components/Button/Button.js

@@ -38,6 +38,7 @@ const Button = ({
   target,
   preventDefault,
   onClick,
+  dialogTrigger,
 }) => {
   const hasText = children !== null;
   const iconName = isLoading ? 'spinner' : icon;
@@ -54,6 +55,7 @@ const Button = ({
       rel={target === '_blank' ? 'noopener noreferrer' : null}
       href={href}
       target={target}
+      aria-haspopup={dialogTrigger ? 'dialog' : null}
     >
       {hasText ? children : accessibleElt}
     </a>
@@ -73,6 +75,7 @@ Button.propTypes = {
   onClick: PropTypes.func,
   isLoading: PropTypes.bool,
   preventDefault: PropTypes.bool,
+  dialogTrigger: PropTypes.bool,
 };
 
 Button.defaultProps = {
@@ -85,6 +88,7 @@ Button.defaultProps = {
   onClick: null,
   isLoading: false,
   preventDefault: true,
+  dialogTrigger: false,
 };
 
 export default Button;

client/src/components/Button/Button.test.js

@@ -20,6 +20,10 @@ describe('Button', () => {
     expect(shallow(<Button accessibleLabel="I am here in the shadows" />)).toMatchSnapshot();
   });
 
+  it('#dialogTrigger', () => {
+    expect(shallow(<Button dialogTrigger />)).toMatchSnapshot();
+  });
+
   it('#icon', () => {
     expect(shallow(<Button icon="test-icon" />)).toMatchSnapshot();
   });

client/src/components/Button/__snapshots__/Button.test.js.snap

@@ -2,6 +2,7 @@
 
 exports[`Button #accessibleLabel 1`] = `
 <a
+  aria-haspopup={null}
   className=" "
   href="#"
   onClick={[Function]}
@@ -18,6 +19,7 @@ exports[`Button #accessibleLabel 1`] = `
 
 exports[`Button #children 1`] = `
 <a
+  aria-haspopup={null}
   className=" "
   href="#"
   onClick={[Function]}
@@ -28,8 +30,20 @@ exports[`Button #children 1`] = `
 </a>
 `;
 
+exports[`Button #dialogTrigger 1`] = `
+<a
+  aria-haspopup="dialog"
+  className=" "
+  href="#"
+  onClick={[Function]}
+  rel={null}
+  target={null}
+/>
+`;
+
 exports[`Button #icon 1`] = `
 <a
+  aria-haspopup={null}
   className=" icon icon-test-icon"
   href="#"
   onClick={[Function]}
@@ -40,6 +54,7 @@ exports[`Button #icon 1`] = `
 
 exports[`Button #icon changes with #isLoading 1`] = `
 <a
+  aria-haspopup={null}
   className=" icon icon-spinner"
   href="#"
   onClick={[Function]}
@@ -50,6 +65,7 @@ exports[`Button #icon changes with #isLoading 1`] = `
 
 exports[`Button #multiple icons 1`] = `
 <a
+  aria-haspopup={null}
   className=" icon icon-test-icon icon-secondary-icon"
   href="#"
   onClick={[Function]}
@@ -60,6 +76,7 @@ exports[`Button #multiple icons 1`] = `
 
 exports[`Button #target 1`] = `
 <a
+  aria-haspopup={null}
   className=" "
   href="#"
   onClick={[Function]}
@@ -70,6 +87,7 @@ exports[`Button #target 1`] = `
 
 exports[`Button basic 1`] = `
 <a
+  aria-haspopup={null}
   className=" "
   href="#"
   onClick={[Function]}

client/src/components/Explorer/ExplorerPanel.js

@@ -137,18 +137,19 @@ class ExplorerPanel extends React.Component {
 
     return (
       <FocusTrap
-        tag="nav"
+        tag="div"
+        role="dialog"
         className="explorer"
         paused={paused || !page || page.isFetching}
         focusTrapOptions={{
-          initialFocus: '.c-explorer__close',
+          initialFocus: '.c-explorer__header',
           onDeactivate: onClose,
         }}
       >
         <Button className="c-explorer__close u-hidden" onClick={onClose}>
           {STRINGS.CLOSE_EXPLORER}
         </Button>
-        <Transition name={transition} className="c-explorer">
+        <Transition name={transition} className="c-explorer" component="nav" label={STRINGS.PAGE_EXPLORER}>
           <div key={path.length} className="c-transition-group">
             <ExplorerHeader
               depth={path.length}

client/src/components/Explorer/ExplorerToggle.js

@@ -13,6 +13,7 @@ const ExplorerToggle = ({ children, onToggle }) => (
   <Button
     className="submenu-trigger"
     icon="folder-open-inverse"
+    dialogTrigger={true}
     onClick={onToggle}
   >
     {children}

client/src/components/Explorer/__snapshots__/ExplorerHeader.test.js.snap

@@ -4,6 +4,7 @@ exports[`ExplorerHeader #depth at root 1`] = `
 <Button
   accessibleLabel={null}
   className="c-explorer__header"
+  dialogTrigger={false}
   href="/admin/pages/"
   icon=""
   isLoading={false}
@@ -30,6 +31,7 @@ exports[`ExplorerHeader #page 1`] = `
 <Button
   accessibleLabel={null}
   className="c-explorer__header"
+  dialogTrigger={false}
   href="/admin/pages/a/"
   icon=""
   isLoading={false}
@@ -56,6 +58,7 @@ exports[`ExplorerHeader basic 1`] = `
 <Button
   accessibleLabel={null}
   className="c-explorer__header"
+  dialogTrigger={false}
   href="/admin/pages/"
   icon=""
   isLoading={false}

client/src/components/Explorer/__snapshots__/ExplorerItem.test.js.snap

@@ -7,6 +7,7 @@ exports[`ExplorerItem children 1`] = `
   <Button
     accessibleLabel={null}
     className="c-explorer__item__link"
+    dialogTrigger={false}
     href="/admin/pages/5/"
     icon=""
     isLoading={false}
@@ -28,6 +29,7 @@ exports[`ExplorerItem children 1`] = `
   <Button
     accessibleLabel={null}
     className="c-explorer__item__action c-explorer__item__action--small"
+    dialogTrigger={false}
     href="/admin/pages/5/edit/"
     icon=""
     isLoading={false}
@@ -44,6 +46,7 @@ exports[`ExplorerItem children 1`] = `
   <Button
     accessibleLabel={null}
     className="c-explorer__item__action"
+    dialogTrigger={false}
     href="/admin/pages/5/"
     icon=""
     isLoading={false}
@@ -67,6 +70,7 @@ exports[`ExplorerItem renders 1`] = `
   <Button
     accessibleLabel={null}
     className="c-explorer__item__link"
+    dialogTrigger={false}
     href="/admin/pages/5/"
     icon=""
     isLoading={false}
@@ -83,6 +87,7 @@ exports[`ExplorerItem renders 1`] = `
   <Button
     accessibleLabel={null}
     className="c-explorer__item__action c-explorer__item__action--small"
+    dialogTrigger={false}
     href="/admin/pages/5/edit/"
     icon=""
     isLoading={false}
@@ -106,6 +111,7 @@ exports[`ExplorerItem should show a publication status if not live 1`] = `
   <Button
     accessibleLabel={null}
     className="c-explorer__item__link"
+    dialogTrigger={false}
     href="/admin/pages/5/"
     icon=""
     isLoading={false}
@@ -140,6 +146,7 @@ exports[`ExplorerItem should show a publication status if not live 1`] = `
   <Button
     accessibleLabel={null}
     className="c-explorer__item__action c-explorer__item__action--small"
+    dialogTrigger={false}
     href="/admin/pages/5/edit/"
     icon=""
     isLoading={false}
@@ -156,6 +163,7 @@ exports[`ExplorerItem should show a publication status if not live 1`] = `
   <Button
     accessibleLabel={null}
     className="c-explorer__item__action"
+    dialogTrigger={false}
     href="/admin/pages/5/"
     icon=""
     isLoading={false}
@@ -179,6 +187,7 @@ exports[`ExplorerItem should show a publication status with unpublished changes
   <Button
     accessibleLabel={null}
     className="c-explorer__item__link"
+    dialogTrigger={false}
     href="/admin/pages/5/"
     icon=""
     isLoading={false}
@@ -213,6 +222,7 @@ exports[`ExplorerItem should show a publication status with unpublished changes
   <Button
     accessibleLabel={null}
     className="c-explorer__item__action c-explorer__item__action--small"
+    dialogTrigger={false}
     href="/admin/pages/5/edit/"
     icon=""
     isLoading={false}
@@ -229,6 +239,7 @@ exports[`ExplorerItem should show a publication status with unpublished changes
   <Button
     accessibleLabel={null}
     className="c-explorer__item__action"
+    dialogTrigger={false}
     href="/admin/pages/5/"
     icon=""
     isLoading={false}