@ons/design-system 48.0.1 → 49.0.0

package/components/{header/header-nav.js → navigation/navigation.js}

@@ -5,10 +5,10 @@ import onViewportChange from '../../js/utils/viewport-change';
 const attrExpanded = 'aria-expanded';
 const attrHidden = 'aria-hidden';
 
-export default class NavToggle {
-  constructor(toggle, nav, hideClass) {
+export default class NavigationToggle {
+  constructor(toggle, navigation, hideClass) {
     this.toggle = toggle;
-    this.nav = nav;
+    this.navigation = navigation;
     this.hideClass = hideClass;
     this.toggle.classList.remove('ons-u-d-no');
     this.setAria();
@@ -20,17 +20,17 @@ export default class NavToggle {
   }
 
   toggleNav() {
-    const isHidden = this.nav.getAttribute(attrHidden);
+    const isHidden = this.navigation.getAttribute(attrHidden);
     isHidden === 'false' ? this.closeNav() : this.openNav();
   }
 
   openNav() {
-    const input = [...this.nav.getElementsByTagName('INPUT')][0];
+    const input = [...this.navigation.getElementsByTagName('INPUT')][0];
 
     this.toggle.setAttribute(attrExpanded, 'true');
     this.toggle.classList.add('active');
-    this.nav.setAttribute(attrHidden, 'false');
-    this.nav.classList.remove(this.hideClass);
+    this.navigation.setAttribute(attrHidden, 'false');
+    this.navigation.classList.remove(this.hideClass);
 
     if (input) {
       input.focus();
@@ -40,23 +40,23 @@ export default class NavToggle {
   closeNav() {
     this.toggle.setAttribute(attrExpanded, 'false');
     this.toggle.classList.remove('active');
-    this.nav.setAttribute(attrHidden, 'true');
-    this.nav.classList.add(this.hideClass);
+    this.navigation.setAttribute(attrHidden, 'true');
+    this.navigation.classList.add(this.hideClass);
   }
 
   setAria() {
     const viewportDetails = GetViewportDetails();
-    const hasAria = this.nav.hasAttribute(attrHidden);
+    const hasAria = this.navigation.hasAttribute(attrHidden);
 
-    if (viewportDetails.width < 740) {
+    if (viewportDetails.width < 980) {
       if (!hasAria) {
         this.closeNav();
       }
     } else if (hasAria) {
       this.toggle.removeAttribute(attrExpanded);
-      this.nav.removeAttribute(attrHidden);
+      this.navigation.removeAttribute(attrHidden);
       if (this.hideClass !== 'ons-u-d-no') {
-        this.nav.classList.remove(this.hideClass);
+        this.navigation.classList.remove(this.hideClass);
       } else {
         this.closeNav();
       }

package/components/section-navigation/_macro.njk

@@ -1,6 +1,6 @@
 {% macro onsSectionNavigation(params) %}
   <nav class="ons-section-nav{% if params.variants is defined and params.variants == 'vertical' %} ons-section-nav--vertical{% endif %}" id="{{ params.id }}" aria-label="{{ params.ariaLabel | default("Section menu") }}">
-      <ul class="ons-section-nav__list" aria-label="{{ params.ariaListLabel | default("Section menu links") }}">
+      <ul class="ons-section-nav__list">
         {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) %}
           <li class="ons-section-nav__item {{ item.classes }}{{ ' ons-section-nav__item--active' if (item.url == params.currentPath) or (item.url in params.currentPath) or (params.tabQuery == item.title|lower) }}">
             <a class="ons-section-nav__link" href="{{ item.url }}" {% if (item.url == params.currentPath) or (item.url in params.currentPath) or (params.tabQuery == item.title|lower) %} aria-current="location" {% endif %}>{{ item.title }}</a>