@shortfuse/materialdesignweb 0.8.0 → 0.9.1

package/mixins/KeyboardNavMixin.js

@@ -1,4 +1,6 @@
-import { attemptFocus, isRtl } from '../core/dom.js';
+import { attemptFocus, isFocused, isRtl } from '../core/dom.js';
+
+import AriaReflectorMixin from './AriaReflectorMixin.js';
 
 const DEFAULT_ELEMENT_QUERY = [
   'button',
@@ -10,13 +12,16 @@ const DEFAULT_ELEMENT_QUERY = [
 ].join(', ');
 
 /**
+ * Adds keyboard roving navigation utilities for focus management within a list.
  * @param {typeof import('../core/CustomElement.js').default} Base
  */
 export default function KeyboardNavMixin(Base) {
   return Base
+    .mixin(AriaReflectorMixin)
     .observe({
-      /** Keyboard navigation attribute */
+      /** Enable keyboard roving navigation when present (set to 'true'). */
       kbdNav: { empty: 'true' },
+      /** Internal flag used to mark focusable children in the roving list. */
       _kbdFocusable: { empty: true },
 
     })
@@ -46,8 +51,7 @@ export default function KeyboardNavMixin(Base) {
     })
     .methods({
       _ariaOrientationIsVertical() {
-        return (this.ariaOrientation
-          ?? this.getAttribute('aria-orientation')
+        return (this.readAriaProperty('ariaOrientation')
           ?? this.ariaOrientationDefault) === 'vertical';
       },
       focusCurrentOrFirst() {
@@ -94,7 +98,7 @@ export default function KeyboardNavMixin(Base) {
         }
 
         if (!loop) {
-          if (document.activeElement !== current && current instanceof HTMLElement) {
+          if (!isFocused(current) && current instanceof HTMLElement) {
             current.focus();
           }
           return current;
@@ -158,7 +162,7 @@ export default function KeyboardNavMixin(Base) {
         /** @type {HTMLElement} */
         let firstFocusableChild = null;
         for (const child of this.kbdNavChildren) {
-          if (!currentlyFocusedChild && document.activeElement === child) {
+          if (!currentlyFocusedChild && isFocused(child)) {
             currentlyFocusedChild = child;
           } else if (!currentTabIndexChild && child.getAttribute('tabindex') === '0') {
             currentTabIndexChild = child;
@@ -172,7 +176,7 @@ export default function KeyboardNavMixin(Base) {
           }
           // Bind
           if (!child.hasAttribute('tabindex')) {
-            child.tabIndex = (document.activeElement === child) ? 0 : -1;
+            child.tabIndex = isFocused(child) ? 0 : -1;
           }
         // this.rtiBindChild(child);
         }

package/mixins/NavigationListenerMixin.js

@@ -0,0 +1,33 @@
+/**
+ * Listens for HTMLAnchorElement click events that will trigger navigation
+ * and throws a cancelable `mdw:hyperlink` event before firing.
+ * Will be supported until Navigation API is widely available
+ * @param {typeof import('../core/CustomElement.js').default} Base
+ */
+export default function NavigationListenerMixin(Base) {
+  return Base
+    .rootEvents({
+      click(event) {
+        const { target } = event;
+        if (!(target instanceof HTMLAnchorElement)) return;
+        if (!target.href) return;
+        const actionAllowed = target.dispatchEvent(new CustomEvent('mdw:hyperlink', {
+          bubbles: true,
+          composed: true,
+          cancelable: true,
+          detail: {
+            download: target.download,
+            href: target.href,
+            hreflang: target.hreflang,
+            target: target.target,
+          },
+        }));
+        if (!actionAllowed) {
+          // Allow the click event to propagate
+          // event.stopPropagation();
+          // Don't perform native hyperlink action
+          event.preventDefault();
+        }
+      },
+    });
+}