diff --git a/core/modules/contextual/js/toolbar/views/AuralView.es6.js b/core/modules/contextual/js/toolbar/views/AuralView.es6.js index f243e4bd34..757c8868d1 100644 --- a/core/modules/contextual/js/toolbar/views/AuralView.es6.js +++ b/core/modules/contextual/js/toolbar/views/AuralView.es6.js @@ -30,6 +30,7 @@ this.listenTo(this.model, 'change:isViewing', this.manageTabbing); $(document).on('keyup', _.bind(this.onKeypress, this)); + this.manageTabbing(); }, /** diff --git a/core/modules/contextual/js/toolbar/views/AuralView.js b/core/modules/contextual/js/toolbar/views/AuralView.js index 7bf7e40765..d3af87bc8f 100644 --- a/core/modules/contextual/js/toolbar/views/AuralView.js +++ b/core/modules/contextual/js/toolbar/views/AuralView.js @@ -16,6 +16,7 @@ this.listenTo(this.model, 'change:isViewing', this.manageTabbing); $(document).on('keyup', _.bind(this.onKeypress, this)); + this.manageTabbing(); }, render: function render() { this.$el.find('button').attr('aria-pressed', !this.model.get('isViewing')); diff --git a/core/modules/contextual/tests/src/FunctionalJavascript/EditModeTest.php b/core/modules/contextual/tests/src/FunctionalJavascript/EditModeTest.php index dc978aad1d..a61ea8a3d7 100644 --- a/core/modules/contextual/tests/src/FunctionalJavascript/EditModeTest.php +++ b/core/modules/contextual/tests/src/FunctionalJavascript/EditModeTest.php @@ -44,27 +44,45 @@ protected function setUp() { } /** - * Tests that Drupal.announce messages appear. + * Tests enabling and disabling edit mode. */ - public function testAnnounceEditMode() { + public function testEditModeEnableDisalbe() { $web_assert = $this->assertSession(); - $this->drupalGet('user'); - - // After the page loaded we need to additionally wait until the settings - // tray Ajax activity is done. - $web_assert->assertWaitOnAjaxRequest(); - - // Enable edit mode. - $this->pressToolbarEditButton(); - $this->assertAnnounceEditMode(); - // Disable edit mode. - $this->pressToolbarEditButton(); - $this->assertAnnounceLeaveEditMode(); - // Enable edit mode again. - $this->pressToolbarEditButton(); - // Finally assert that the 'edit mode enabled' announcement is still correct - // after toggling the edit mode at least once. - $this->assertAnnounceEditMode(); + $page = $this->getSession()->getPage(); + // Get the page twice to ensure edit mode remains enabled after a new page + // request. + for ($page_get_count = 0; $page_get_count < 2; $page_get_count++) { + $this->drupalGet('user'); + $expected_restricted_tab_count = 1 + count($page->findAll('css', '[data-contextual-id]')); + + // After the page loaded we need to additionally wait until the settings + // tray Ajax activity is done. + $web_assert->assertWaitOnAjaxRequest(); + + if ($page_get_count == 0) { + $unrestricted_tab_count = $this->getTabbableElementsCount(); + $this->assertGreaterThan($expected_restricted_tab_count, $unrestricted_tab_count); + + // Enable edit mode. + // After the first page load the page will be in edit mode when loaded. + $this->pressToolbarEditButton(); + } + + $this->assertAnnounceEditMode(); + $this->assertSame($expected_restricted_tab_count, $this->getTabbableElementsCount()); + + // Disable edit mode. + $this->pressToolbarEditButton(); + $this->assertAnnounceLeaveEditMode(); + $this->assertSame($unrestricted_tab_count, $this->getTabbableElementsCount()); + // Enable edit mode again. + $this->pressToolbarEditButton(); + // Finally assert that the 'edit mode enabled' announcement is still + // correct after toggling the edit mode at least once. + $this->assertAnnounceEditMode(); + $this->assertSame($expected_restricted_tab_count, $this->getTabbableElementsCount()); + } + } /** @@ -100,4 +118,20 @@ protected function assertAnnounceLeaveEditMode() { $web_assert->elementNotContains('css', static::ANNOUNCE_SELECTOR, 'Tabbing is constrained to a set of'); } + /** + * Gets the number of elements that are tabbable. + * + * @return int + * The number of tabbable elements. + */ + protected function getTabbableElementsCount() { + // Mark all tabbable elements. + $this->getSession()->executeScript("jQuery(':tabbable').attr('data-marked', '');"); + // Count all marked elements. + $count = count($this->getSession()->getPage()->findAll('css', "[data-marked]")); + // Remove set attributes. + $this->getSession()->executeScript("jQuery('[data-marked]').removeAttr('data-marked');"); + return $count; + } + }