Update headernav popover js

Import popover support function, don’t set anchor-name and position-anchor attributes (since css now uses anchor-scope), add button role to subnav link for more intuitive screen reader accessibility, rename subhav link variable and clarify code comments.

Author: JoelCDL

src/js/headernav.js

@@ -1,55 +1,51 @@
 // Headernav Component //
 
+import { popoverSupport } from './popover-support'
 const headerNav = document.querySelector('.js-headernav')
 const subNavs = headerNav.querySelectorAll(':scope > ul > li:has(> ul)')
 const headerNavMediaQuery = window.matchMedia('(min-width: 760px)')
-let counter = 1
 
-if (document.querySelector('.c-headernav')) {
+if (headerNav && popoverSupport()) {
   for (const subNav of subNavs) {
-    const subNavSiblingLink = subNav.querySelector('a')
+    const subNavLink = subNav.querySelector('a')
     const subNavPopover = subNav.querySelector('ul')
-    subNavPopover.popover = ''
-
-    // Anchor each sibling link to its popover using unique anchor names:
-    const anchorName = '--anchor' + counter++
-
-    // The properties 'anchor-name' and 'position-anchor' can't be set using style.setProperty in browsers that don't support them. Instead, use setAttribute to force them to appear in so that the anchor positioning polyfill sees them:
-    subNavSiblingLink.setAttribute('style', 'anchor-name: ' + anchorName)
-    subNavPopover.setAttribute('style', 'position-anchor: ' + anchorName)
+    subNavPopover.popover = 'auto'
+    subNavLink.setAttribute('role', 'button')
 
     const headerNavToggles = mq => {
+      // Only a <button> as a popover invoker has built-in accessiblity bindings, so set and toggle the link's aria expanded state:
       const expandedState = () => {
         if (subNavPopover.matches(':popover-open')) {
-          subNavSiblingLink.setAttribute('aria-expanded', 'true')
+          subNavLink.setAttribute('aria-expanded', 'true')
         } else {
-          subNavSiblingLink.setAttribute('aria-expanded', 'false')
+          subNavLink.setAttribute('aria-expanded', 'false')
         }
       }
 
       if (mq.matches) {
-        // Only a <button> as a popover control has built-in accessiblity bindings, so set and toggle sibling link aria expanded state:
-        subNavSiblingLink.setAttribute('aria-expanded', 'false') // initial state
+        // Initial state:
+        expandedState()
 
-        // Show/hide subnav on mouse pointer over and out:
+        // Show subnav on mouseover:
         subNav.addEventListener('mouseover', () => {
           subNavPopover.showPopover()
           expandedState()
         })
 
+        // Hide subnav on mouseout:
         subNav.addEventListener('mouseout', () => {
           subNavPopover.hidePopover()
           expandedState()
         })
 
-        // Toggle subnav if sibling link is clicked by keyboard return key:
-        subNavSiblingLink.addEventListener('click', (e) => {
+        // Toggle subnav if link clicked:
+        subNavLink.addEventListener('click', (e) => {
           subNavPopover.togglePopover()
-          e.preventDefault() // disable link from going to its URL when clicked
           expandedState()
+          e.preventDefault() // disable link from going to its URL when clicked
         })
 
-        // Hide subnav when keyboard focus leaves its popover control:
+        // Hide previously opened subnav when keyboard focus leaves it:
         subNav.addEventListener('focusout', (e) => {
           if (!e.currentTarget.contains(e.relatedTarget)) {
             subNavPopover.hidePopover()