From 1e85ff454c3699279682346ce240e0c755446a2e Mon Sep 17 00:00:00 2001 From: Helen Chapman Date: Thu, 20 Jun 2019 18:02:28 +0100 Subject: [PATCH] Move focus to the pages explorer menu when open (#5336, #5394) * Ensure that when you open the explorer the focus moves to the first link of the menu, and add a label for the explorer navigation * Add dialog role to pages explorer popup, and ensure that there is an option to close the dialog window when tabbing by making the close button visually hidden rather than display none --- CHANGELOG.txt | 1 + client/src/components/Button/Button.js | 4 ++ client/src/components/Button/Button.test.js | 4 ++ .../Button/__snapshots__/Button.test.js.snap | 18 ++++++++ .../src/components/Explorer/ExplorerPanel.js | 7 +-- .../src/components/Explorer/ExplorerToggle.js | 1 + .../__snapshots__/ExplorerHeader.test.js.snap | 3 ++ .../__snapshots__/ExplorerItem.test.js.snap | 11 +++++ .../__snapshots__/ExplorerPanel.test.js.snap | 45 ++++++++++++------- .../__snapshots__/ExplorerToggle.test.js.snap | 1 + .../src/components/Transition/Transition.js | 4 ++ .../components/Transition/Transition.test.js | 4 ++ .../__snapshots__/Transition.test.js.snap | 15 +++++++ client/tests/stubs.js | 1 + docs/releases/2.6.rst | 1 + .../templates/wagtailadmin/admin_base.html | 1 + 16 files changed, 103 insertions(+), 18 deletions(-) diff --git a/CHANGELOG.txt b/CHANGELOG.txt index b7032cadf..cad8279c7 100644 --- a/CHANGELOG.txt +++ b/CHANGELOG.txt @@ -56,6 +56,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) diff --git a/client/src/components/Button/Button.js b/client/src/components/Button/Button.js index 932755d07..ec9942448 100644 --- a/client/src/components/Button/Button.js +++ b/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} @@ -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; diff --git a/client/src/components/Button/Button.test.js b/client/src/components/Button/Button.test.js index f82bf2fe6..611b2d2ab 100644 --- a/client/src/components/Button/Button.test.js +++ b/client/src/components/Button/Button.test.js @@ -20,6 +20,10 @@ describe('Button', () => { expect(shallow( - +
(