diff options
Diffstat (limited to 'core/modules/toolbar')
6 files changed, 103 insertions, 42 deletions
diff --git a/core/modules/toolbar/css/toolbar.theme.css b/core/modules/toolbar/css/toolbar.theme.css index ea108f658098..d6def4739400 100644 --- a/core/modules/toolbar/css/toolbar.theme.css +++ b/core/modules/toolbar/css/toolbar.theme.css @@ -5,10 +5,10 @@ font-family: "Source Sans Pro", "Lucida Grande", Verdana, sans-serif; /* Set base font size to 13px based on root ems. */ font-size: 0.8125rem; - -moz-tap-highlight-color: rgba(0, 0, 0, 0); - -o-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - tap-highlight-color: rgba(0, 0, 0, 0); + -moz-tap-highlight-color: rgb(0, 0, 0, 0); + -o-tap-highlight-color: rgb(0, 0, 0, 0); + -webkit-tap-highlight-color: rgb(0, 0, 0, 0); + tap-highlight-color: rgb(0, 0, 0, 0); -moz-touch-callout: none; -o-touch-callout: none; -webkit-touch-callout: none; @@ -31,10 +31,10 @@ .toolbar .toolbar-bar { color: #ddd; background-color: #0f0f0f; - box-shadow: -1px 0 3px 1px rgba(0, 0, 0, 0.3333); /* LTR */ + box-shadow: -1px 0 3px 1px rgb(0, 0, 0, 0.3333); /* LTR */ } [dir="rtl"] .toolbar .toolbar-bar { - box-shadow: 1px 0 3px 1px rgba(0, 0, 0, 0.3333); + box-shadow: 1px 0 3px 1px rgb(0, 0, 0, 0.3333); } .toolbar .toolbar-bar .toolbar-item { color: #fff; @@ -44,7 +44,7 @@ } .toolbar .toolbar-bar .toolbar-tab > .toolbar-item:hover, .toolbar .toolbar-bar .toolbar-tab > .toolbar-item:focus { - background-image: linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%); + background-image: linear-gradient(rgb(255, 255, 255, 0.125) 20%, transparent 200%); } .toolbar .toolbar-bar .toolbar-tab > .toolbar-item.is-active { color: #000; @@ -68,19 +68,19 @@ .toolbar .toolbar-tray-vertical { border-right: 1px solid #aaa; /* LTR */ background-color: #f5f5f5; - box-shadow: -1px 0 5px 2px rgba(0, 0, 0, 0.3333); /* LTR */ + box-shadow: -1px 0 5px 2px rgb(0, 0, 0, 0.3333); /* LTR */ } [dir="rtl"] .toolbar .toolbar-tray-vertical { border-right: 0 none; border-left: 1px solid #aaa; - box-shadow: 1px 0 5px 2px rgba(0, 0, 0, 0.3333); + box-shadow: 1px 0 5px 2px rgb(0, 0, 0, 0.3333); } .toolbar-horizontal .toolbar-tray { border-bottom: 1px solid #aaa; - box-shadow: -2px 1px 3px 1px rgba(0, 0, 0, 0.3333); /* LTR */ + box-shadow: -2px 1px 3px 1px rgb(0, 0, 0, 0.3333); /* LTR */ } [dir="rtl"] .toolbar-horizontal .toolbar-tray { - box-shadow: 2px 1px 3px 1px rgba(0, 0, 0, 0.3333); + box-shadow: 2px 1px 3px 1px rgb(0, 0, 0, 0.3333); } .toolbar .toolbar-tray-horizontal .toolbar-tray { background-color: #f5f5f5; diff --git a/core/modules/toolbar/js/escapeAdmin.js b/core/modules/toolbar/js/escapeAdmin.js index 2d76991e9dc5..f7956befe233 100644 --- a/core/modules/toolbar/js/escapeAdmin.js +++ b/core/modules/toolbar/js/escapeAdmin.js @@ -14,7 +14,7 @@ // loaded within an existing "workflow". if ( !pathInfo.currentPathIsAdmin && - !/destination=/.test(windowLocation.search) + !windowLocation.search.includes('destination=') ) { sessionStorage.setItem('escapeAdminPath', windowLocation); } diff --git a/core/modules/toolbar/js/views/ToolbarVisualView.js b/core/modules/toolbar/js/views/ToolbarVisualView.js index 89f472f0eafa..00bd236973f6 100644 --- a/core/modules/toolbar/js/views/ToolbarVisualView.js +++ b/core/modules/toolbar/js/views/ToolbarVisualView.js @@ -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'); @@ -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; diff --git a/core/modules/toolbar/tests/src/FunctionalJavascript/ToolbarIntegrationTest.php b/core/modules/toolbar/tests/src/FunctionalJavascript/ToolbarIntegrationTest.php index c315f9f6ebb0..dcf0ff6d79c3 100644 --- a/core/modules/toolbar/tests/src/FunctionalJavascript/ToolbarIntegrationTest.php +++ b/core/modules/toolbar/tests/src/FunctionalJavascript/ToolbarIntegrationTest.php @@ -4,6 +4,7 @@ declare(strict_types=1); namespace Drupal\Tests\toolbar\FunctionalJavascript; +use Behat\Mink\Element\NodeElement; use Drupal\FunctionalJavascriptTests\WebDriverTestBase; /** @@ -43,12 +44,22 @@ class ToolbarIntegrationTest extends WebDriverTestBase { $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'); @@ -87,4 +98,33 @@ class ToolbarIntegrationTest extends WebDriverTestBase { $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; + }) + ); + } + } diff --git a/core/modules/toolbar/tests/src/Nightwatch/Tests/toolbarTest.js b/core/modules/toolbar/tests/src/Nightwatch/Tests/toolbarTest.js index cbba417abe3a..0bed815f330b 100644 --- a/core/modules/toolbar/tests/src/Nightwatch/Tests/toolbarTest.js +++ b/core/modules/toolbar/tests/src/Nightwatch/Tests/toolbarTest.js @@ -13,27 +13,10 @@ const userOrientationBtn = `${itemUserTray} .toolbar-toggle-orientation button`; module.exports = { '@tags': ['core'], before(browser) { - browser - .drupalInstall() - .drupalInstallModule('toolbar', true) - .drupalCreateUser({ - name: 'user', - password: '123', - permissions: [ - 'access site reports', - 'access toolbar', - 'access administration pages', - 'administer menu', - 'administer modules', - 'administer site configuration', - 'administer account settings', - 'administer software updates', - 'access content', - 'administer permissions', - 'administer users', - ], - }) - .drupalLogin({ name: 'user', password: '123' }); + browser.drupalInstall({ + setupFile: + 'core/modules/toolbar/tests/src/Nightwatch/ToolbarTestSetup.php', + }); }, beforeEach(browser) { // Set the resolution to the default desktop resolution. Ensure the default @@ -189,7 +172,7 @@ module.exports = { browser.drupalRelativeURL('/admin'); // Don't check the visibility as stark doesn't add the .path-admin class // to the <body> required to display the button. - browser.assert.attributeContains(escapeSelector, 'href', '/user/2'); + browser.assert.attributeContains(escapeSelector, 'href', '/user/login'); }, 'Aural view test: tray orientation': (browser) => { browser.waitForElementPresent( diff --git a/core/modules/toolbar/tests/src/Nightwatch/ToolbarTestSetup.php b/core/modules/toolbar/tests/src/Nightwatch/ToolbarTestSetup.php new file mode 100644 index 000000000000..47dd0e6e50a4 --- /dev/null +++ b/core/modules/toolbar/tests/src/Nightwatch/ToolbarTestSetup.php @@ -0,0 +1,38 @@ +<?php + +declare(strict_types=1); + +namespace Drupal\Tests\toolbar\Nightwatch; + +use Drupal\Core\Extension\ModuleInstallerInterface; +use Drupal\TestSite\TestSetupInterface; +use Drupal\user\Entity\Role; +use Drupal\user\RoleInterface; + +/** + * Sets up the site for testing the toolbar module. + */ +class ToolbarTestSetup implements TestSetupInterface { + + /** + * {@inheritdoc} + */ + public function setup(): void { + $module_installer = \Drupal::service('module_installer'); + assert($module_installer instanceof ModuleInstallerInterface); + $module_installer->install(['toolbar']); + + $role = Role::load(RoleInterface::ANONYMOUS_ID); + foreach ([ + 'access toolbar', + 'access administration pages', + 'administer modules', + 'administer site configuration', + 'administer account settings', + ] as $permission) { + $role->grantPermission($permission); + } + $role->save(); + } + +} |