@vaadin-component-factory/vcf-anchor-nav - npm Package Compare versions

Comparing version 1.2.9 to 1.2.10

package.json

 {
   "name": "@vaadin-component-factory/vcf-anchor-nav",
-  "version": "1.2.9",
+  "version": "1.2.10",
   "description": "Component with tabs used as anchor navigation and content sections. Automates the linking of tabs and sections.",
@@ -5,0 +5,0 @@ "main": "vcf-anchor-nav.js",

src/vcf-anchor-nav-section.js

@@ -39,2 +39,6 @@ import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
 
+  static isSame(el) {
+    return el.tagName === `${AnchorNavSectionElement.is}`.toUpperCase();
+  }
+
   static get template() {
@@ -106,2 +110,7 @@ return html`
     this.$.tabSlot.addEventListener('slotchange', e => this._onTabSlotChange(e));
+    this.addEventListener('focus', e => {
+      if (AnchorNavSectionElement.isSame(e.target)) {
+        this.dispatchEvent(new CustomEvent('section-focus'));
+      }
+    });
   }
@@ -108,0 +117,0 @@

src/vcf-anchor-nav.js

@@ -146,4 +146,8 @@ import { html, PolymerElement } from '@polymer/polymer/polymer-element';
 
+  static isSame(el) {
+    return el.tagName === `${AnchorNavElement.is}`.toUpperCase();
+  }
+
   static get version() {
-    return '1.2.9';
+    return '1.2.10';
   }
@@ -239,4 +243,16 @@
     });
+    // Add nav focus listener
+    this.addEventListener('focus', e => this._onNavFocus(e), true);
+    // Init section focus listener
+    this.onSectionFocus = () => {
+      this.sections.forEach(section => section.removeAttribute('tabindex'));
+    };
   }
 
+  _onNavFocus(e) {
+    if (AnchorNavElement.isSame(e.target)) {
+      this.sections.forEach(section => section.setAttribute('tabindex', '-1'));
+    }
+  }
+
   _onSlotChange() {
@@ -253,2 +269,4 @@ if (this.sections.length) {
         }
+        section.removeEventListener('section-focus', this.onSectionFocus);
+        section.addEventListener('section-focus', this.onSectionFocus);
       });
@@ -258,10 +276,14 @@ this._sortTabs();
       if (this._deepLinks && location.hash) this._scrollToHash();
-      else if (this.selectedId) this._scrollToSection(this.selectedId);
+      else if (this.selectedId && this.selectedIndex !== 0) this._scrollToSection(this.selectedId);
       // Dispatch sections-ready event
       this.dispatchEvent(new CustomEvent('sections-ready', { detail: this.sections }));
       // Set exapnd-last theme height
-      this.style.setProperty('--_expand-last-height', `${this._expandLastHeight}px`);
+      this._setExpandLastHeight();
     }
   }
 
+  _setExpandLastHeight() {
+    this.style.setProperty('--_expand-last-height', `${this._expandLastHeight}px`);
+  }
+
   _onHeaderSlotChange() {
@@ -292,3 +314,3 @@ if (this.header) this.setAttribute('has-header', true);
   _scrollToHash() {
-    // Hack to fix initial scroll on Firefox
+    // rAF required to fix initial scroll on all browsers
     requestAnimationFrame(() => {
@@ -339,3 +361,4 @@ // Scroll to and select section in URL hash if possible
       this._initTabHighlight();
-      if (this.selectedId && firstResize) {
+      this._setExpandLastHeight();
+      if (this.selectedId && this.selectedIndex !== 0 && firstResize) {
         const section = this.querySelector(`#${this.selectedId}`);
@@ -342,0 +365,0 @@ if (section) this.scrollTo({ top: section.offsetTop - this._tabHeight });

No alert changes

Improved metrics

Total package byte prevSize

219383

increased by0.51%

Lines of code

2343

increased by1.21%

No dependency changes