bootstrap-italia 2.14.0 → 2.15.0

package/dist/plugins/util/focustrap.js

@@ -31,11 +31,13 @@ const TAB_NAV_BACKWARD = 'backward';
 const Default = {
   autofocus: true,
   trapElement: null, // The element to trap focus inside of
+  initialFocus: null, // The inside element (optional) to set the focus after trapped
 };
 
 const DefaultType = {
   autofocus: 'boolean',
   trapElement: 'element',
+  initialFocus: '(null|element|string|function)',
 };
 
 /**
@@ -48,6 +50,7 @@ class FocusTrap extends Config {
     this._config = this._getConfig(config);
     this._isActive = false;
     this._lastTabNavDirection = null;
+    this._affectedElements = [];
   }
 
   // Getters
@@ -70,7 +73,7 @@ class FocusTrap extends Config {
     }
 
     if (this._config.autofocus) {
-      this._config.trapElement.focus();
+      this._setInitialFocus();
     }
 
     EventHandler.off(document, EVENT_KEY); // guard against infinite focus loop
@@ -84,12 +87,30 @@ class FocusTrap extends Config {
     if (!this._isActive) {
       return
     }
-
     this._isActive = false;
+
     EventHandler.off(document, EVENT_KEY);
   }
 
   // Private
+  _setInitialFocus() {
+    if (this._config.initialFocus) {
+      let target;
+      if (typeof this._config.initialFocus === 'function') {
+        target = this._config.initialFocus();
+      } else {
+        target = this._config.initialFocus;
+      }
+      if (target && typeof target.focus === 'function') {
+        target.focus();
+      } else {
+        this._config.trapElement.focus();
+      }
+    } else {
+      this._config.trapElement.focus();
+    }
+  }
+
   _handleFocusin(event) {
     const { trapElement } = this._config;
 
@@ -98,7 +119,6 @@ class FocusTrap extends Config {
     }
 
     const elements = SelectorEngine.focusableChildren(trapElement);
-
     if (elements.length === 0) {
       trapElement.focus();
     } else if (this._lastTabNavDirection === TAB_NAV_BACKWARD) {

package/dist/plugins/util/focustrap.js.map

@@ -1 +1 @@
-{"version":3,"file":"focustrap.js","sources":["../../../src/js/plugins/util/focustrap.js"],"sourcesContent":["/**\n * --------------------------------------------------------------------------\n * Bootstrap Italia (https://italia.github.io/bootstrap-italia/)\n * Authors: https://github.com/italia/bootstrap-italia/blob/main/AUTHORS\n * Licensed under BSD-3-Clause license (https://github.com/italia/bootstrap-italia/blob/main/LICENSE)\n * This a fork of Bootstrap: Initial license and original file name below\n * Bootstrap (v5.2.3): util/focustrap.js\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\nimport EventHandler from '../dom/event-handler'\nimport SelectorEngine from '../dom/selector-engine'\nimport Config from './config'\n\n/**\n * Constants\n */\n\nconst NAME = 'focustrap'\nconst DATA_KEY = 'bs.focustrap'\nconst EVENT_KEY = `.${DATA_KEY}`\nconst EVENT_FOCUSIN = `focusin${EVENT_KEY}`\nconst EVENT_KEYDOWN_TAB = `keydown.tab${EVENT_KEY}`\n\nconst TAB_KEY = 'Tab'\nconst TAB_NAV_FORWARD = 'forward'\nconst TAB_NAV_BACKWARD = 'backward'\n\nconst Default = {\n  autofocus: true,\n  trapElement: null, // The element to trap focus inside of\n}\n\nconst DefaultType = {\n  autofocus: 'boolean',\n  trapElement: 'element',\n}\n\n/**\n * Class definition\n */\n\nclass FocusTrap extends Config {\n  constructor(config) {\n    super()\n    this._config = this._getConfig(config)\n    this._isActive = false\n    this._lastTabNavDirection = null\n  }\n\n  // Getters\n  static get Default() {\n    return Default\n  }\n\n  static get DefaultType() {\n    return DefaultType\n  }\n\n  static get NAME() {\n    return NAME\n  }\n\n  // Public\n  activate() {\n    if (this._isActive) {\n      return\n    }\n\n    if (this._config.autofocus) {\n      this._config.trapElement.focus()\n    }\n\n    EventHandler.off(document, EVENT_KEY) // guard against infinite focus loop\n    EventHandler.on(document, EVENT_FOCUSIN, (event) => this._handleFocusin(event))\n    EventHandler.on(document, EVENT_KEYDOWN_TAB, (event) => this._handleKeydown(event))\n\n    this._isActive = true\n  }\n\n  deactivate() {\n    if (!this._isActive) {\n      return\n    }\n\n    this._isActive = false\n    EventHandler.off(document, EVENT_KEY)\n  }\n\n  // Private\n  _handleFocusin(event) {\n    const { trapElement } = this._config\n\n    if (event.target === document || event.target === trapElement || trapElement.contains(event.target)) {\n      return\n    }\n\n    const elements = SelectorEngine.focusableChildren(trapElement)\n\n    if (elements.length === 0) {\n      trapElement.focus()\n    } else if (this._lastTabNavDirection === TAB_NAV_BACKWARD) {\n      elements[elements.length - 1].focus()\n    } else {\n      elements[0].focus()\n    }\n  }\n\n  _handleKeydown(event) {\n    if (event.key !== TAB_KEY) {\n      return\n    }\n\n    this._lastTabNavDirection = event.shiftKey ? TAB_NAV_BACKWARD : TAB_NAV_FORWARD\n  }\n}\n\nexport default FocusTrap\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"focustrap.js","sources":["../../../src/js/plugins/util/focustrap.js"],"sourcesContent":["/**\n * --------------------------------------------------------------------------\n * Bootstrap Italia (https://italia.github.io/bootstrap-italia/)\n * Authors: https://github.com/italia/bootstrap-italia/blob/main/AUTHORS\n * Licensed under BSD-3-Clause license (https://github.com/italia/bootstrap-italia/blob/main/LICENSE)\n * This a fork of Bootstrap: Initial license and original file name below\n * Bootstrap (v5.2.3): util/focustrap.js\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\nimport EventHandler from '../dom/event-handler'\nimport SelectorEngine from '../dom/selector-engine'\nimport Config from './config'\n\n/**\n * Constants\n */\n\nconst NAME = 'focustrap'\nconst DATA_KEY = 'bs.focustrap'\nconst EVENT_KEY = `.${DATA_KEY}`\nconst EVENT_FOCUSIN = `focusin${EVENT_KEY}`\nconst EVENT_KEYDOWN_TAB = `keydown.tab${EVENT_KEY}`\n\nconst TAB_KEY = 'Tab'\nconst TAB_NAV_FORWARD = 'forward'\nconst TAB_NAV_BACKWARD = 'backward'\n\nconst Default = {\n  autofocus: true,\n  trapElement: null, // The element to trap focus inside of\n  initialFocus: null, // The inside element (optional) to set the focus after trapped\n}\n\nconst DefaultType = {\n  autofocus: 'boolean',\n  trapElement: 'element',\n  initialFocus: '(null|element|string|function)',\n}\n\n/**\n * Class definition\n */\n\nclass FocusTrap extends Config {\n  constructor(config) {\n    super()\n    this._config = this._getConfig(config)\n    this._isActive = false\n    this._lastTabNavDirection = null\n    this._affectedElements = []\n  }\n\n  // Getters\n  static get Default() {\n    return Default\n  }\n\n  static get DefaultType() {\n    return DefaultType\n  }\n\n  static get NAME() {\n    return NAME\n  }\n\n  // Public\n  activate() {\n    if (this._isActive) {\n      return\n    }\n\n    if (this._config.autofocus) {\n      this._setInitialFocus()\n    }\n\n    EventHandler.off(document, EVENT_KEY) // guard against infinite focus loop\n    EventHandler.on(document, EVENT_FOCUSIN, (event) => this._handleFocusin(event))\n    EventHandler.on(document, EVENT_KEYDOWN_TAB, (event) => this._handleKeydown(event))\n\n    this._isActive = true\n  }\n\n  deactivate() {\n    if (!this._isActive) {\n      return\n    }\n    this._isActive = false\n\n    EventHandler.off(document, EVENT_KEY)\n  }\n\n  // Private\n  _setInitialFocus() {\n    if (this._config.initialFocus) {\n      let target\n      if (typeof this._config.initialFocus === 'function') {\n        target = this._config.initialFocus()\n      } else {\n        target = this._config.initialFocus\n      }\n      if (target && typeof target.focus === 'function') {\n        target.focus()\n      } else {\n        this._config.trapElement.focus()\n      }\n    } else {\n      this._config.trapElement.focus()\n    }\n  }\n\n  _handleFocusin(event) {\n    const { trapElement } = this._config\n\n    if (event.target === document || event.target === trapElement || trapElement.contains(event.target)) {\n      return\n    }\n\n    const elements = SelectorEngine.focusableChildren(trapElement)\n    if (elements.length === 0) {\n      trapElement.focus()\n    } else if (this._lastTabNavDirection === TAB_NAV_BACKWARD) {\n      elements[elements.length - 1].focus()\n    } else {\n      elements[0].focus()\n    }\n  }\n\n  _handleKeydown(event) {\n    if (event.key !== TAB_KEY) {\n      return\n    }\n\n    this._lastTabNavDirection = event.shiftKey ? TAB_NAV_BACKWARD : TAB_NAV_FORWARD\n  }\n}\n\nexport default FocusTrap\n"],"names":[],"mappings":"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"}

package/dist/version.js

@@ -8,7 +8,7 @@
 
 // NOTE:bootstrap italia version variable, useful to check for the current version
 
-const BOOTSTRAP_ITALIA_VERSION = '2.14.0';
+const BOOTSTRAP_ITALIA_VERSION = '2.15.0';
 
 export { BOOTSTRAP_ITALIA_VERSION as default };
 //# sourceMappingURL=version.js.map

package/dist/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sources":["../src/js/version.js"],"sourcesContent":["/**\n * --------------------------------------------------------------------------\n * Bootstrap Italia (https://italia.github.io/bootstrap-italia/)\n * Authors: https://github.com/italia/bootstrap-italia/blob/main/AUTHORS\n * Licensed under BSD-3-Clause license (https://github.com/italia/bootstrap-italia/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\n// NOTE:bootstrap italia version variable, useful to check for the current version\n\nconst BOOTSTRAP_ITALIA_VERSION = '2.14.0'\nexport default BOOTSTRAP_ITALIA_VERSION\n"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEK,MAAC,wBAAwB,GAAG;;;;"}
+{"version":3,"file":"version.js","sources":["../src/js/version.js"],"sourcesContent":["/**\n * --------------------------------------------------------------------------\n * Bootstrap Italia (https://italia.github.io/bootstrap-italia/)\n * Authors: https://github.com/italia/bootstrap-italia/blob/main/AUTHORS\n * Licensed under BSD-3-Clause license (https://github.com/italia/bootstrap-italia/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\n// NOTE:bootstrap italia version variable, useful to check for the current version\n\nconst BOOTSTRAP_ITALIA_VERSION = '2.15.0'\nexport default BOOTSTRAP_ITALIA_VERSION\n"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEK,MAAC,wBAAwB,GAAG;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-italia",
-  "version": "2.14.0",
+  "version": "2.15.0",
   "keywords": [
     "css",
     "sass",

package/src/js/plugins/navbar-collapsible.js

@@ -7,14 +7,13 @@
  */
 
 import BaseComponent from './base-component.js'
-
 import { getElementFromSelector, isVisible, reflow } from './util/index'
 import EventHandler from './dom/event-handler'
 import SelectorEngine from './dom/selector-engine'
-
 import { isScreenMobile } from './util/device'
-import { getElementIndex } from './util/dom'
-import { disablePageScroll, enablePageScroll } from './util/pageScroll'
+import ScrollBarHelper from './util/scrollbar'
+import FocusTrap from './util/focustrap'
+import Backdrop from './util/backdrop'
 
 const NAME = 'navbarcollapsible'
 const DATA_KEY = 'bs.navbarcollapsible'
@@ -23,7 +22,6 @@ const DATA_API_KEY = '.data-api'
 
 const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
 const EVENT_CLICK = `click${EVENT_KEY}`
-const EVENT_KEYUP = `keyup${EVENT_KEY}`
 const EVENT_KEYDOWN = `keydown${EVENT_KEY}`
 const EVENT_HIDE = `hide${EVENT_KEY}`
 const EVENT_HIDDEN = `hidden${EVENT_KEY}`
@@ -31,54 +29,88 @@ const EVENT_SHOW = `show${EVENT_KEY}`
 const EVENT_SHOWN = `shown${EVENT_KEY}`
 const EVENT_RESIZE = `resize${EVENT_KEY}`
 
-const CLASS_NAME_FADE = 'fade'
+const CLASS_NAME_OPEN = 'navbar-open'
 const CLASS_NAME_SHOW = 'show'
 const CLASS_NAME_EXPANDED = 'expanded'
 
 const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="navbarcollapsible"]'
-
-//const SELECTOR_NAVBAR = '.navbar-collapsable'
 const SELECTOR_BTN_CLOSE = '.close-div button'
 const SELECTOR_BTN_MENU_CLOSE = '.close-menu'
 const SELECTOR_BTN_BACK = '.it-back-button'
-const SELECTOR_OVERLAY = '.overlay'
 const SELECTOR_MENU_WRAPPER = '.menu-wrapper'
 const SELECTOR_NAVLINK = '.nav-link'
 const SELECTOR_MEGAMENUNAVLINK = '.nav-item .list-item'
 const SELECTOR_HEADINGLINK = '.it-heading-link'
 const SELECTOR_FOOTERLINK = '.it-footer-link'
 
+const Default = {
+  backdrop: true,
+  focus: true,
+}
+
+const DefaultType = {
+  backdrop: '(boolean|string)',
+  focus: 'boolean',
+}
+
 class NavBarCollapsible extends BaseComponent {
-  constructor(element) {
-    super(element)
+  constructor(element, config) {
+    super(element, config)
+
+    this._mainElement = SelectorEngine.findOne('main')
+    this._isNavbarOutsideMain = this._mainElement && !this._mainElement.contains(this._element)
+    this._parentElement = this._element.parentNode
 
     this._isShown = this._element.classList.contains(CLASS_NAME_EXPANDED)
-    this._isTransitioning = false
 
-    this._isMobile = isScreenMobile()
-    this._isKeyShift = false
+    if (!this._element.getAttribute('tabindex')) {
+      this._element.setAttribute('tabindex', '-1')
+    }
 
-    this._currItemIdx = 0
+    this._backdrop = this._initializeBackDrop()
+    this._focustrap = this._initializeFocusTrap()
+    this._scrollBar = new ScrollBarHelper()
+    this._isTransitioning = false
+    this._isMobile = isScreenMobile()
 
     this._btnClose = SelectorEngine.findOne(SELECTOR_BTN_CLOSE, this._element)
     this._btnBack = SelectorEngine.findOne(SELECTOR_BTN_BACK, this._element)
     this._menuWrapper = SelectorEngine.findOne(SELECTOR_MENU_WRAPPER, this._element)
-    this._overlay = null
-    this._setOverlay()
+
     this._menuItems = SelectorEngine.find(
       [SELECTOR_NAVLINK, SELECTOR_MEGAMENUNAVLINK, SELECTOR_HEADINGLINK, SELECTOR_FOOTERLINK, SELECTOR_BTN_MENU_CLOSE].join(','),
       this._element
     )
 
+    this._toggleButton =
+      SelectorEngine.findOne(`${SELECTOR_DATA_TOGGLE}[data-bs-target="#${this._element.id}"]`) ||
+      SelectorEngine.findOne(`${SELECTOR_DATA_TOGGLE}[href="#${this._element.id}"]`)
+
+    if (this._toggleButton) {
+      if (!this._toggleButton.getAttribute('aria-expanded')) {
+        this._toggleButton.setAttribute('aria-expanded', this._isShown ? 'true' : 'false')
+      }
+    }
     this._bindEvents()
   }
+
   // Getters
+  static get Default() {
+    return Default
+  }
+
+  static get DefaultType() {
+    return DefaultType
+  }
 
   static get NAME() {
     return NAME
   }
 
   // Public
+  toggle(relatedTarget) {
+    this._isShown ? this.hide() : this.show(relatedTarget)
+  }
 
   show(relatedTarget) {
     if (this._isShown || this._isTransitioning) {
@@ -93,14 +125,22 @@ class NavBarCollapsible extends BaseComponent {
       return
     }
 
+    this._isShown = true
+    this._isTransitioning = true
+    this._scrollBar.hide()
+
     if (this._btnBack) {
       this._btnBack.classList.add(CLASS_NAME_SHOW)
     }
 
-    this._isShown = true
+    document.body.classList.add(CLASS_NAME_OPEN)
 
-    disablePageScroll()
+    this._backdrop.show()
     this._showElement()
+
+    if (this._toggleButton) {
+      this._toggleButton.setAttribute('aria-expanded', 'true')
+    }
   }
 
   hide() {
@@ -116,45 +156,64 @@ class NavBarCollapsible extends BaseComponent {
 
     this._isShown = false
 
-    const isAnimated = this._isAnimated()
-
-    if (isAnimated) {
-      this._isTransitioning = true
-    }
+    this._isTransitioning = true
+    this._focustrap.deactivate()
 
     if (this._btnBack) {
       this._btnBack.classList.remove(CLASS_NAME_SHOW)
     }
-    if (this._overlay) {
-      this._overlay.classList.remove(CLASS_NAME_SHOW)
-    }
 
     this._element.classList.remove(CLASS_NAME_EXPANDED)
 
-    enablePageScroll()
-    this._queueCallback(() => this._hideElement(), this._menuWrapper, isAnimated)
-  }
+    this._backdrop.hide()
 
-  toggle(relatedTarget) {
-    this._isShown ? this.hide() : this.show(relatedTarget)
+    this._queueCallback(() => this._hideElement(), this._menuWrapper, this._isAnimated())
+
+    if (this._toggleButton) {
+      this._toggleButton.setAttribute('aria-expanded', 'false')
+    }
   }
 
   dispose() {
     if (typeof window !== 'undefined' && typeof document !== 'undefined') {
       EventHandler.off(window, EVENT_RESIZE)
-      super.dispose()
+      EventHandler.off(document, EVENT_KEYDOWN)
     }
+    this._backdrop.dispose()
+
+    this._focustrap.deactivate()
+    super.dispose()
   }
 
-  // Private
+  _initializeBackDrop() {
+    return new Backdrop({
+      isVisible: Boolean(this._config.backdrop), // 'static' option will be translated to true, and booleans will keep their value,
+      isAnimated: this._isAnimated(),
+      className: 'navbar-backdrop',
+      rootElement: this._parentElement,
+      clickCallback: () => {
+        this.hide()
+      },
+    })
+  }
+
+  _initializeFocusTrap() {
+    return new FocusTrap({
+      trapElement: this._element,
+      initialFocus: () => this._btnClose || this._element.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),
+    })
+  }
 
+  // Private
   _bindEvents() {
     if (typeof window !== 'undefined' && typeof document !== 'undefined') {
       EventHandler.on(window, EVENT_RESIZE, () => this._onResize())
+      EventHandler.on(document, EVENT_KEYDOWN, (evt) => {
+        if (this._isShown && evt.key === 'Escape') {
+          this.hide()
+        }
+      })
 
-      if (this._overlay) {
-        EventHandler.on(this._overlay, EVENT_CLICK, () => this.hide())
-      }
       EventHandler.on(this._btnClose, EVENT_CLICK, (evt) => {
         evt.preventDefault()
         this.hide()
@@ -163,11 +222,8 @@ class NavBarCollapsible extends BaseComponent {
         evt.preventDefault()
         this.hide()
       })
-
       this._menuItems.forEach((item) => {
         EventHandler.on(item, EVENT_KEYDOWN, (evt) => this._isMobile && this._onMenuItemKeyDown(evt))
-        EventHandler.on(item, EVENT_KEYUP, (evt) => this._isMobile && this._onMenuItemKeyUp(evt))
-        EventHandler.on(item, EVENT_CLICK, (evt) => this._isMobile && this._onMenuItemClick(evt))
       })
     }
   }
@@ -176,30 +232,14 @@ class NavBarCollapsible extends BaseComponent {
     this._isMobile = isScreenMobile()
   }
 
-  _onMenuItemKeyUp(evt) {
-    if (evt.key === 'Shift') {
-      this._isKeyShift = false
-    }
-  }
   _onMenuItemKeyDown(evt) {
-    if (evt.key === 'Shift') {
-      this._isKeyShift = true
-    }
-    if (evt.key === 'Tab') {
-      evt.preventDefault()
-      this._focusNext()
+    if (evt.key === 'Escape') {
+      this.hide()
     }
   }
-  /**
-   * Update the last focused element when an interactive element is clicked
-   */
-  _onMenuItemClick(evt) {
-    this.currItemIdx = getElementIndex(evt.currentTarget, this._menuItems)
-  }
 
   _isAnimated() {
-    //there's no an animation css class you can toggle with a "show" css class, so it is supposed true
-    return true //this._element.classList.contains(CLASS_NAME_EXPANDED)
+    return true
   }
 
   _isElementHidden(element) {
@@ -207,108 +247,47 @@ class NavBarCollapsible extends BaseComponent {
   }
 
   _showElement() {
-    const isAnimated = this._isAnimated()
-
     this._element.style.display = 'block'
-    this._element.removeAttribute('aria-hidden')
-    this._element.setAttribute('aria-expanded', true)
-    //this._element.setAttribute('role', 'dialog')
-    if (this._overlay) {
-      this._overlay.style.display = 'block'
+    if (!this._element.getAttribute('aria-label') && !this._element.getAttribute('aria-labelledby')) {
+      this._element.setAttribute('aria-label', 'Menu')
     }
+    this._element.setAttribute('aria-modal', true)
+    this._element.setAttribute('role', 'dialog')
 
-    if (isAnimated) {
-      reflow(this._element)
+    if (this._mainElement && this._isNavbarOutsideMain) {
+      this._mainElement.setAttribute('inert', '')
     }
 
+    reflow(this._element)
+
     this._element.classList.add(CLASS_NAME_EXPANDED)
-    if (this._overlay) {
-      this._overlay.classList.add(CLASS_NAME_SHOW)
-    }
 
     const transitionComplete = () => {
-      this._isTransitioning = false
-      const firstItem = this._getNextVisibleItem(0) //at pos 0 there's the close button
-      if (firstItem.item) {
-        firstItem.item.focus()
-        this._currItemIdx = firstItem.index
+      if (this._config.focus) {
+        this._focustrap.activate()
       }
+      this._isTransitioning = false
       EventHandler.trigger(this._element, EVENT_SHOWN)
     }
 
-    this._queueCallback(transitionComplete, this._menuWrapper, isAnimated)
+    this._queueCallback(transitionComplete, this._menuWrapper, this._isAnimated())
   }
 
   _hideElement() {
-    if (this._overlay) {
-      this._overlay.style.display = 'none'
-    }
-
     this._element.style.display = 'none'
-    this._element.setAttribute('aria-hidden', true)
-    this._element.removeAttribute('aria-expanded')
-    //this._element.removeAttribute('aria-modal')
-    //this._element.removeAttribute('role')
-    this._isTransitioning = false
-    EventHandler.trigger(this._element, EVENT_HIDDEN)
-  }
+    this._element.removeAttribute('aria-modal')
+    this._element.removeAttribute('role')
 
-  _setOverlay() {
-    this._overlay = SelectorEngine.findOne(SELECTOR_OVERLAY, this._element)
-    if (this._isAnimated) {
-      this._overlay.classList.add(CLASS_NAME_FADE)
-    }
-  }
+    document.body.classList.remove(CLASS_NAME_OPEN)
 
-  /**
-   * Moves focus to the next focusable element based on the DOM exploration direction
-   */
-  _focusNext() {
-    let nextIdx = this._currItemIdx + (this._isKeyShift ? -1 : 1)
-    if (nextIdx < 0) {
-      nextIdx = this._menuItems.length - 1
-    } else if (nextIdx >= this._menuItems.length) {
-      nextIdx = 0
-    }
-    const target = this._getNextVisibleItem(nextIdx, this._isKeyShift)
-    if (target.item) {
-      target.item.focus()
-      this._currItemIdx = target.index
-    }
-  }
-  /**
-   * Get the next focusable element from a starting point
-   * @param {int} start - the index of the array of the elements as starting point (included)
-   * @param {boolean} wayTop - the array search direction (true: bottom to top, false: top to bottom)
-   * @returns {Object} the item found and its index in the array
-   */
-  _getNextVisibleItem(start, wayTop) {
-    let found = null
-    let foundIdx = null
-
-    let i = start
-    let incr = wayTop ? -1 : 1
-    let firstCheck = false
-    while (!found && (i != start || !firstCheck)) {
-      if (i == start) {
-        firstCheck = true
-      }
-      if (!this._isElementHidden(this._menuItems[i])) {
-        found = this._menuItems[i]
-        foundIdx = i
-      }
-      i = i + incr
-      if (i < 0) {
-        i = this._menuItems.length - 1
-      } else if (i >= this._menuItems.length) {
-        i = 0
-      }
+    if (this._mainElement && this._isNavbarOutsideMain) {
+      this._mainElement.removeAttribute('inert')
     }
 
-    return {
-      item: found,
-      index: foundIdx,
-    }
+    this._scrollBar.reset()
+    this._isTransitioning = false
+
+    EventHandler.trigger(this._element, EVENT_HIDDEN)
   }
 }
 

package/src/js/plugins/navscroll.js

@@ -25,6 +25,7 @@ const SELECTOR_TOGGLER = '.custom-navbar-toggler'
 const SELECTOR_TOGGLER_ICON = '.it-list'
 const SELECTOR_COLLAPSIBLE = '.navbar-collapsable'
 const SELECTOR_PROGRESS_BAR = '.it-navscroll-progressbar'
+const SELECTOR_MENU_WRAPPER = '.menu-wrapper'
 
 const Default = {
   scrollPadding: 10,
@@ -44,6 +45,11 @@ class NavScroll extends BaseComponent {
     this._callbackQueue = []
     this._scrollCb = null
 
+    const menuWrapper = SelectorEngine.findOne(SELECTOR_MENU_WRAPPER, this._element)
+    if (menuWrapper && !menuWrapper.hasAttribute('tabindex')) {
+      menuWrapper.setAttribute('tabindex', '-1')
+    }
+
     this._bindEvents()
   }
   // Getters
@@ -147,13 +153,31 @@ class NavScroll extends BaseComponent {
   }
 
   _scrollToHash(hash) {
-    const target = SelectorEngine.findOne(hash, this._sectionContainer)
+    if (!hash || hash === '#') {
+      // Validate hash to prevent errors
+      return
+    }
+    const target = this._sectionContainer // Fallback: when container is null, omit the second parameter entirely
+      ? SelectorEngine.findOne(hash, this._sectionContainer)
+      : SelectorEngine.findOne(hash)
     if (target) {
       documentScrollTo(target.offsetTop - this._getScrollPadding(), {
         duration: this._config.duration,
         easing: this._config.easing,
-        /*complete: () => {
-        },*/
+        complete: () => {
+          const isHeading = target.matches('h1, h2, h3, h4, h5, h6')
+          const needsTabIndex = !target.hasAttribute('tabindex')
+          if (needsTabIndex) {
+            target.setAttribute('tabindex', '-1')
+          }
+          target.focus({ preventScroll: true }) // preventScroll to avoid double scrolling
+          if (needsTabIndex && isHeading) {
+            // remove tabIndex for headings after 500ms
+            setTimeout(() => {
+              target.removeAttribute('tabindex')
+            }, 500)
+          }
+        },
       })
 
       if (history.pushState) {

package/src/js/plugins/util/focustrap.js

@@ -30,11 +30,13 @@ const TAB_NAV_BACKWARD = 'backward'
 const Default = {
   autofocus: true,
   trapElement: null, // The element to trap focus inside of
+  initialFocus: null, // The inside element (optional) to set the focus after trapped
 }
 
 const DefaultType = {
   autofocus: 'boolean',
   trapElement: 'element',
+  initialFocus: '(null|element|string|function)',
 }
 
 /**
@@ -47,6 +49,7 @@ class FocusTrap extends Config {
     this._config = this._getConfig(config)
     this._isActive = false
     this._lastTabNavDirection = null
+    this._affectedElements = []
   }
 
   // Getters
@@ -69,7 +72,7 @@ class FocusTrap extends Config {
     }
 
     if (this._config.autofocus) {
-      this._config.trapElement.focus()
+      this._setInitialFocus()
     }
 
     EventHandler.off(document, EVENT_KEY) // guard against infinite focus loop
@@ -83,12 +86,30 @@ class FocusTrap extends Config {
     if (!this._isActive) {
       return
     }
-
     this._isActive = false
+
     EventHandler.off(document, EVENT_KEY)
   }
 
   // Private
+  _setInitialFocus() {
+    if (this._config.initialFocus) {
+      let target
+      if (typeof this._config.initialFocus === 'function') {
+        target = this._config.initialFocus()
+      } else {
+        target = this._config.initialFocus
+      }
+      if (target && typeof target.focus === 'function') {
+        target.focus()
+      } else {
+        this._config.trapElement.focus()
+      }
+    } else {
+      this._config.trapElement.focus()
+    }
+  }
+
   _handleFocusin(event) {
     const { trapElement } = this._config
 
@@ -97,7 +118,6 @@ class FocusTrap extends Config {
     }
 
     const elements = SelectorEngine.focusableChildren(trapElement)
-
     if (elements.length === 0) {
       trapElement.focus()
     } else if (this._lastTabNavDirection === TAB_NAV_BACKWARD) {

package/src/js/version.js

@@ -8,5 +8,5 @@
 
 // NOTE:bootstrap italia version variable, useful to check for the current version
 
-const BOOTSTRAP_ITALIA_VERSION = '2.14.0'
+const BOOTSTRAP_ITALIA_VERSION = '2.15.0'
 export default BOOTSTRAP_ITALIA_VERSION

package/src/scss/base/_version.scss

@@ -1,3 +1,3 @@
 :root {
-  --bootstrap-italia-version: '2.14.0';
+  --bootstrap-italia-version: '2.15.0';
 }