Verified Commit 4f4ff211 authored by Théodore Biadala's avatar Théodore Biadala
Browse files

Issue #3500425 by cilefen, julio_retkwa, smustgrave, bnjmnm, sandip, haris... 

Issue #3500425 by cilefen, julio_retkwa, smustgrave, bnjmnm, sandip, haris khan jadoon, snehal-chibde, nod_, vasantha deepika: Add a close icon for Claro primary tabs on mobile
parent 904e8cd9

core/tests/Drupal/Nightwatch/Tests/Claro/claroPrimaryTabsTest.js

+15 −1
Original line number Diff line number Diff line
@@ -3,6 +3,8 @@ const primaryTabsWrapper = '[data-drupal-nav-tabs]'; 
const activeTab = '.tabs__tab.is-active';

const inactiveTab = '.tabs__tab:not(.is-active)';

const mobileToggle = `${activeTab} .tabs__trigger`;

const hamburgerIcon = `${mobileToggle} .hamburger-icon`;

const closeIcon = `${mobileToggle} .close-icon`;



module.exports = {

  '@tags': ['core', 'claro'],
@@ -40,12 +42,24 @@ module.exports = { 
      .assert.visible(activeTab)

      .assert.not.visible(inactiveTab)

      .assert.visible(mobileToggle)

      .assert.visible(hamburgerIcon)

      .assert.not.visible(closeIcon)

      .assert.attributeEquals(mobileToggle, 'aria-expanded', 'false')

      .assert.attributeEquals(hamburgerIcon, 'aria-hidden', 'false')

      .assert.attributeEquals(closeIcon, 'aria-hidden', 'true')

      .click(mobileToggle)

      .waitForElementVisible(inactiveTab)

      .assert.attributeEquals(mobileToggle, 'aria-expanded', 'true')

      .assert.not.visible(hamburgerIcon)

      .assert.visible(closeIcon)

      .assert.attributeEquals(hamburgerIcon, 'aria-hidden', 'true')

      .assert.attributeEquals(closeIcon, 'aria-hidden', 'false')

      .click(mobileToggle)

      .waitForElementNotVisible(inactiveTab)

      .assert.attributeEquals(mobileToggle, 'aria-expanded', 'false');

      .assert.attributeEquals(mobileToggle, 'aria-expanded', 'false')

      .assert.visible(hamburgerIcon)

      .assert.not.visible(closeIcon)

      .assert.attributeEquals(hamburgerIcon, 'aria-hidden', 'false')

      .assert.attributeEquals(closeIcon, 'aria-hidden', 'true');

  },

};

core/themes/claro/css/components/tabs.css

+9 −0
Original line number Diff line number Diff line
@@ -172,6 +172,15 @@ 
  box-shadow: none;

}



.tabs__trigger .hamburger-icon,

.tabs__trigger .close-icon {

  line-height: normal;

}



.tabs__trigger .close-icon {

  display: none;

}



.position-container {

  position: relative;

}

core/themes/claro/css/components/tabs.pcss.css

+9 −0
Original line number Diff line number Diff line
@@ -150,6 +150,15 @@ 
    border-radius: var(--tabs-border-radius-size);

    box-shadow: none;

  }



  .hamburger-icon,

  .close-icon {

    line-height: normal;

  }



  .close-icon {

    display: none;

  }

}



.position-container {

core/themes/claro/js/nav-tabs.js

+6 −1
Original line number Diff line number Diff line
@@ -13,7 +13,12 @@ 


    const openMenu = () => {

      $target.toggleClass('is-open');

      $target.find('button').attr('aria-expanded', $target.hasClass('is-open'));

      const isOpen = $target.hasClass('is-open');



      $target.find('button').attr('aria-expanded', isOpen);



      $tab.find('.hamburger-icon').toggle(!isOpen).attr('aria-hidden', isOpen);

      $tab.find('.close-icon').toggle(isOpen).attr('aria-hidden', !isOpen);

    };



    const toggleOrder = (reset) => {

core/themes/claro/templates/navigation/menu-local-task.html.twig

+2 −1
Original line number Diff line number Diff line
@@ -28,7 +28,8 @@ 
  {% if is_active and level == 'primary' %}

    {{ attach_library('core/drupal.reset-appearance') }}

    <button class="reset-appearance tabs__trigger" type="button" aria-label="{{ 'Tabs display toggle'|t }}" data-drupal-nav-tabs-trigger>

      {% include "@claro/../images/src/hamburger-menu.svg" %}

      <span class="hamburger-icon" aria-hidden="false">{% include "@claro/../images/src/hamburger-menu.svg" %}</span>

      <span class="close-icon" aria-hidden="true">{% include "@claro/../images/icons/002e9a/ex.svg" %}</span>

    </button>

  {% endif %}

</li>