Loading core/modules/toolbar/js/views/ToolbarVisualView.js +2 −2 Original line number Diff line number Diff line Loading @@ -210,7 +210,7 @@ // Deactivate the previous tab. $(this.model.previous('activeTab')) .removeClass('is-active') .prop('aria-pressed', false); .attr('aria-pressed', false); // Deactivate the previous tray. $(this.model.previous('activeTray')).removeClass('is-active'); Loading @@ -222,7 +222,7 @@ $tab .addClass('is-active') // Mark the tab as pressed. .prop('aria-pressed', true); .attr('aria-pressed', true); const name = $tab.attr('data-toolbar-tray'); // Store the active tab name or remove the setting. const id = $tab.get(0).id; Loading core/modules/toolbar/tests/src/FunctionalJavascript/ToolbarIntegrationTest.php +46 −6 Original line number Diff line number Diff line Loading @@ -4,6 +4,7 @@ namespace Drupal\Tests\toolbar\FunctionalJavascript; use Behat\Mink\Element\NodeElement; use Drupal\FunctionalJavascriptTests\WebDriverTestBase; /** Loading Loading @@ -43,12 +44,22 @@ public function testToolbarToggling(): void { $page = $this->getSession()->getPage(); // Test that it is possible to toggle the toolbar tray. $content = $page->findLink('Content'); $this->assertTrue($content->isVisible(), 'Toolbar tray is open by default.'); $page->clickLink('Manage'); $this->assertFalse($content->isVisible(), 'Toolbar tray is closed after clicking the "Manage" link.'); $page->clickLink('Manage'); $this->assertTrue($content->isVisible(), 'Toolbar tray is visible again after clicking the "Manage" button a second time.'); $content_link = $page->findLink('Content'); $manage_link = $page->find('css', '#toolbar-item-administration'); // Start with open tray. $this->waitAndAssertAriaPressedState($manage_link, TRUE); $this->assertTrue($content_link->isVisible(), 'Toolbar tray is open by default.'); // Click to close. $manage_link->click(); $this->waitAndAssertAriaPressedState($manage_link, FALSE); $this->assertFalse($content_link->isVisible(), 'Toolbar tray is closed after clicking the "Manage" link.'); // Click to open. $manage_link->click(); $this->waitAndAssertAriaPressedState($manage_link, TRUE); $this->assertTrue($content_link->isVisible(), 'Toolbar tray is visible again after clicking the "Manage" button a second time.'); // Test toggling the toolbar tray between horizontal and vertical. $tray = $page->findById('toolbar-item-administration-tray'); Loading Loading @@ -87,4 +98,33 @@ public function testEmptyTray(): void { $this->assertFalse($button->isVisible(), 'Orientation toggle from other tray is not visible'); } /** * Asserts that an element's `aria-pressed` attribute matches expected state. * * Uses `waitFor()` to pause until either the condition is met or the timeout * of `1` second has passed. * * @param \Behat\Mink\Element\NodeElement $element * The element to be tested. * @param bool $expected * The expected value of `aria-pressed`, as a boolean. * * @throws ExpectationFailedException */ private function waitAndAssertAriaPressedState(NodeElement $element, bool $expected): void { $this->assertTrue( $this ->getSession() ->getPage() ->waitFor(1, function () use ($element, $expected): bool { // Get boolean representation of `aria-pressed`. // TRUE if `aria-pressed="true"`, FALSE otherwise. $actual = $element->getAttribute('aria-pressed') == 'true'; // Exit `waitFor()` when $actual == $expected. return $actual == $expected; }) ); } } Loading
core/modules/toolbar/js/views/ToolbarVisualView.js +2 −2 Original line number Diff line number Diff line Loading @@ -210,7 +210,7 @@ // Deactivate the previous tab. $(this.model.previous('activeTab')) .removeClass('is-active') .prop('aria-pressed', false); .attr('aria-pressed', false); // Deactivate the previous tray. $(this.model.previous('activeTray')).removeClass('is-active'); Loading @@ -222,7 +222,7 @@ $tab .addClass('is-active') // Mark the tab as pressed. .prop('aria-pressed', true); .attr('aria-pressed', true); const name = $tab.attr('data-toolbar-tray'); // Store the active tab name or remove the setting. const id = $tab.get(0).id; Loading
core/modules/toolbar/tests/src/FunctionalJavascript/ToolbarIntegrationTest.php +46 −6 Original line number Diff line number Diff line Loading @@ -4,6 +4,7 @@ namespace Drupal\Tests\toolbar\FunctionalJavascript; use Behat\Mink\Element\NodeElement; use Drupal\FunctionalJavascriptTests\WebDriverTestBase; /** Loading Loading @@ -43,12 +44,22 @@ public function testToolbarToggling(): void { $page = $this->getSession()->getPage(); // Test that it is possible to toggle the toolbar tray. $content = $page->findLink('Content'); $this->assertTrue($content->isVisible(), 'Toolbar tray is open by default.'); $page->clickLink('Manage'); $this->assertFalse($content->isVisible(), 'Toolbar tray is closed after clicking the "Manage" link.'); $page->clickLink('Manage'); $this->assertTrue($content->isVisible(), 'Toolbar tray is visible again after clicking the "Manage" button a second time.'); $content_link = $page->findLink('Content'); $manage_link = $page->find('css', '#toolbar-item-administration'); // Start with open tray. $this->waitAndAssertAriaPressedState($manage_link, TRUE); $this->assertTrue($content_link->isVisible(), 'Toolbar tray is open by default.'); // Click to close. $manage_link->click(); $this->waitAndAssertAriaPressedState($manage_link, FALSE); $this->assertFalse($content_link->isVisible(), 'Toolbar tray is closed after clicking the "Manage" link.'); // Click to open. $manage_link->click(); $this->waitAndAssertAriaPressedState($manage_link, TRUE); $this->assertTrue($content_link->isVisible(), 'Toolbar tray is visible again after clicking the "Manage" button a second time.'); // Test toggling the toolbar tray between horizontal and vertical. $tray = $page->findById('toolbar-item-administration-tray'); Loading Loading @@ -87,4 +98,33 @@ public function testEmptyTray(): void { $this->assertFalse($button->isVisible(), 'Orientation toggle from other tray is not visible'); } /** * Asserts that an element's `aria-pressed` attribute matches expected state. * * Uses `waitFor()` to pause until either the condition is met or the timeout * of `1` second has passed. * * @param \Behat\Mink\Element\NodeElement $element * The element to be tested. * @param bool $expected * The expected value of `aria-pressed`, as a boolean. * * @throws ExpectationFailedException */ private function waitAndAssertAriaPressedState(NodeElement $element, bool $expected): void { $this->assertTrue( $this ->getSession() ->getPage() ->waitFor(1, function () use ($element, $expected): bool { // Get boolean representation of `aria-pressed`. // TRUE if `aria-pressed="true"`, FALSE otherwise. $actual = $element->getAttribute('aria-pressed') == 'true'; // Exit `waitFor()` when $actual == $expected. return $actual == $expected; }) ); } }