diff --git a/core/tests/Drupal/Nightwatch/Tests/Claro/claroPrimaryTabsTest.js b/core/tests/Drupal/Nightwatch/Tests/Claro/claroPrimaryTabsTest.js new file mode 100644 index 0000000000000000000000000000000000000000..53e208c509101ea4714fd0088f01c5be1de7b5dc --- /dev/null +++ b/core/tests/Drupal/Nightwatch/Tests/Claro/claroPrimaryTabsTest.js @@ -0,0 +1,51 @@ +// This test is a duplicate of oliveroPrimaryTabsTest.js tagged for claro +const primaryTabsWrapper = '[data-drupal-nav-tabs]'; +const activeTab = '.tabs__tab.is-active'; +const inactiveTab = '.tabs__tab:not(.is-active)'; +const mobileToggle = `${activeTab} .tabs__trigger`; + +module.exports = { + '@tags': ['core', 'claro'], + before(browser) { + browser + .drupalInstall({ + setupFile: + 'core/tests/Drupal/TestSite/TestSiteClaroInstallTestScript.php', + installProfile: 'minimal', + }) + .drupalCreateUser({ + name: 'user', + password: '123', + permissions: ['administer nodes'], + }) + .drupalLogin({ name: 'user', password: '123' }); + browser.setWindowSize(1600, 800); + }, + after(browser) { + browser.drupalUninstall(); + }, + 'Verify desktop primary tab display': (browser) => { + browser + .drupalRelativeURL('/node/1') + .waitForElementVisible(primaryTabsWrapper) + .assert.visible(activeTab) + .assert.visible(inactiveTab) + .assert.not.visible(mobileToggle); + }, + 'Verify mobile tab display and click functionality': (browser) => { + browser + .setWindowSize(699, 800) + .drupalRelativeURL('/node/1') + .waitForElementVisible(primaryTabsWrapper) + .assert.visible(activeTab) + .assert.not.visible(inactiveTab) + .assert.visible(mobileToggle) + .assert.attributeEquals(mobileToggle, 'aria-expanded', 'false') + .click(mobileToggle) + .waitForElementVisible(inactiveTab) + .assert.attributeEquals(mobileToggle, 'aria-expanded', 'true') + .click(mobileToggle) + .waitForElementNotVisible(inactiveTab) + .assert.attributeEquals(mobileToggle, 'aria-expanded', 'false'); + }, +}; diff --git a/core/tests/Drupal/TestSite/TestSiteClaroInstallTestScript.php b/core/tests/Drupal/TestSite/TestSiteClaroInstallTestScript.php new file mode 100644 index 0000000000000000000000000000000000000000..4ab1b31f09621e5fb17d0524076a3959e5a8f6a9 --- /dev/null +++ b/core/tests/Drupal/TestSite/TestSiteClaroInstallTestScript.php @@ -0,0 +1,70 @@ +<?php + +declare(strict_types=1); + +namespace Drupal\TestSite; + +use Drupal\Core\Extension\ModuleInstallerInterface; +use Drupal\Core\Extension\ThemeInstallerInterface; +use Drupal\node\Entity\Node; +use Drupal\comment\Entity\Comment; + +/** + * Setup file used by TestSiteInstallTestScript. + * + * @see \Drupal\Tests\Scripts\TestSiteApplicationTest + */ +class TestSiteClaroInstallTestScript implements TestSetupInterface { + + /** + * {@inheritdoc} + */ + public function setup() { + // Install required module for the Olivero front page. + $module_installer = \Drupal::service('module_installer'); + assert($module_installer instanceof ModuleInstallerInterface); + $module_installer->install(['olivero_test']); + + // Install Claro instead of Olivero and set it as the default theme. + $theme_installer = \Drupal::service('theme_installer'); + assert($theme_installer instanceof ThemeInstallerInterface); + $theme_installer->install(['claro'], TRUE); + $system_theme_config = \Drupal::configFactory()->getEditable('system.theme'); + $system_theme_config->set('default', 'claro')->save(); + + // Create an article that will have no comments + $article_no_comments = Node::create(['type' => 'article']); + $article_no_comments->set('title', 'Article without comments'); + // Enable comments + $article_no_comments->set('comment', 2); + $article_no_comments->save(); + + // Create an article that will have comments + $article_with_comments = Node::create(['type' => 'article']); + $article_with_comments->set('title', 'Article with comments'); + // Enable comments + $article_with_comments->set('comment', 2); + $article_with_comments->save(); + + $values = [ + // These values are for the entity that you're creating the comment for, not the comment itself. + 'entity_type' => 'node', + 'entity_id' => 2, + 'field_name' => 'comment', + 'uid' => 1, + // These values are for the comment itself. + 'comment_type' => 'comment', + 'subject' => 'A comment', + 'comment_body' => 'Body of comment', + // Whether the comment is 'approved' or not. + 'status' => 1, + ]; + // Create comment entities out of our field values + $comment1 = Comment::create($values); + $comment1->save(); + + $comment2 = Comment::create($values); + $comment2->save(); + } + +} diff --git a/core/themes/claro/js/nav-tabs.js b/core/themes/claro/js/nav-tabs.js index 023acfefe49621a4c467b340efc0c8e904dffcf1..1d91dc054c814f4aac0ae413766907457fd1ecda 100644 --- a/core/themes/claro/js/nav-tabs.js +++ b/core/themes/claro/js/nav-tabs.js @@ -13,6 +13,7 @@ const openMenu = () => { $target.toggleClass('is-open'); + $target.find('button').attr('aria-expanded', $target.hasClass('is-open')); }; const toggleOrder = (reset) => { @@ -54,9 +55,11 @@ // the width of the parent container. const isHorizontal = $tab.attr('data-width') <= $tab.outerWidth(); $tab.toggleClass('is-horizontal', isHorizontal); + $tab.find('button').attr('aria-expanded', null); toggleOrder(isHorizontal); } else { toggleOrder(false); + $tab.find('button').attr('aria-expanded', 'false'); } };