@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/core/aria/rovingtabindex.js

@@ -1,67 +1,12 @@
 // https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
 
 import {
-  iterateArrayLike,
-  isRtl,
   dispatchDomEvent,
+  iterateArrayLike,
   iterateSomeOfArrayLike,
-} from '../dom';
+} from '../dom.js';
 
 export const TABINDEX_ZEROED = 'mdw:rovingtabindex-tabindexzeroed';
-export const FORWARDS_REQUESTED = 'mdw:rovingtabindex-forwardsrequested';
-export const BACKWARDS_REQUESTED = 'mdw:rovingtabindex-backwardsrequested';
-
-/**
- * @param {Element} parentElement
- * @param {string} querySelectorString
- * @param {boolean} [focusableWhenDisabled=true]
- * @return {void}
- */
-export function setupTabIndexes(parentElement, querySelectorString, focusableWhenDisabled = true) {
-  /** @type {Element} */
-  let currentlyFocusedChild = null;
-  /** @type {Element} */
-  let currentTabIndexChild = null;
-  /** @type {Element} */
-  let firstFocusableChild = null;
-  iterateArrayLike(parentElement.querySelectorAll(querySelectorString), (child) => {
-    if (!currentlyFocusedChild && document.activeElement === child) {
-      currentlyFocusedChild = child;
-    } else if (!currentTabIndexChild && child.getAttribute('tabindex') === '0') {
-      currentTabIndexChild = child;
-    } else {
-      if (!firstFocusableChild && child.getAttribute('aria-hidden') !== 'true'
-        && (focusableWhenDisabled || child.getAttribute('aria-disabled') !== 'true')) {
-        firstFocusableChild = child;
-      }
-      child.setAttribute('tabindex', '-1');
-    }
-    child.addEventListener('focus', onChildFocus);
-  });
-  if (currentlyFocusedChild) {
-    currentlyFocusedChild.setAttribute('tabindex', '0');
-  } else if (currentTabIndexChild) {
-    if (currentlyFocusedChild) {
-      currentTabIndexChild.setAttribute('tabindex', '-1');
-    }
-  } else if (firstFocusableChild) {
-    firstFocusableChild.setAttribute('tabindex', '0');
-  }
-  parentElement.addEventListener('keydown', onKeyDownHandler);
-}
-
-
-/**
- * @param {Element} parentElement
- * @param {string} querySelectorString
- * @return {void}
- */
-export function detach(parentElement, querySelectorString) {
-  iterateArrayLike(parentElement.querySelectorAll(querySelectorString), (child) => {
-    child.removeEventListener('focus', onChildFocus);
-  });
-  parentElement.removeEventListener('keydown', onKeyDownHandler);
-}
 
 /**
  * @param {FocusEvent} event
@@ -93,100 +38,6 @@ export function removeTabIndex(items, excludeItems = []) {
   });
 }
 
-/**
- * @param {KeyboardEvent} event
- * @return {void}
- */
-export function onKeyDownHandler(event) {
-  if (event.ctrlKey || event.altKey || event.shiftKey || event.metaKey) {
-    return;
-  }
-
-  /** @type {Element} */
-  const parentElement = (event.currentTarget);
-  /** @type {Element} */
-  const childElement = (event.target);
-
-  let moveHorizontal = false;
-  let moveVertical = false;
-  switch (event.key) {
-    case 'ArrowLeft':
-    case 'ArrowRight':
-    case 'Left':
-    case 'Right':
-      moveHorizontal = true;
-      break;
-    case 'ArrowDown':
-    case 'ArrowUp':
-    case 'Down':
-    case 'Up':
-      moveVertical = true;
-      break;
-    default:
-      return;
-  }
-
-  let verticalOrientation = true;
-  // DOM Read
-  const ariaOrientation = parentElement.getAttribute('aria-orientation');
-  if (ariaOrientation === 'horizontal') {
-    verticalOrientation = false;
-  } else if (ariaOrientation !== 'vertical') {
-    switch (parentElement.getAttribute('role')) {
-      case 'listbox':
-      case 'tablist':
-      case 'tree':
-        verticalOrientation = true;
-        break;
-      default:
-        verticalOrientation = false;
-    }
-  }
-  let moveForwards = false;
-  if (verticalOrientation) {
-    if (!moveVertical) {
-      return;
-    }
-    switch (event.key) {
-      case 'ArrowDown':
-      case 'Down':
-        moveForwards = true;
-        break;
-      case 'ArrowUp':
-      case 'Up':
-        // moveForwards = false;
-        break;
-      default:
-        return;
-    }
-  } else {
-    if (!moveHorizontal) {
-      return;
-    }
-    const isPageRTL = isRtl();
-    switch (event.key) {
-      case 'ArrowLeft':
-      case 'Left':
-        moveForwards = isPageRTL;
-        break;
-      case 'ArrowRight':
-      case 'Right':
-        moveForwards = !isPageRTL;
-        break;
-      default:
-        return;
-    }
-  }
-  event.stopPropagation();
-  event.preventDefault();
-
-  if (moveForwards) {
-    dispatchDomEvent(childElement, FORWARDS_REQUESTED);
-  } else {
-    dispatchDomEvent(childElement, BACKWARDS_REQUESTED);
-  }
-}
-
 /**
  * @param {HTMLElement} element
  * @return {boolean}
@@ -203,10 +54,11 @@ function attemptFocus(element) {
 /**
  * @param {ArrayLike<HTMLElement>} list
  * @param {Element} [current]
+ * @param {boolean} [loop=true]
  * @param {boolean} [reverse]
  * @return {void}
  */
-export function selectNext(list, current = null, reverse = false) {
+export function selectNext(list, current = null, loop = true, reverse = false) {
   let foundCurrent = false;
 
   const iterateResult = iterateSomeOfArrayLike(list, (item, index, array) => {
@@ -235,6 +87,12 @@ export function selectNext(list, current = null, reverse = false) {
   if (iterateResult) {
     return;
   }
+  if (!loop) {
+    if (document.activeElement !== current && current instanceof HTMLElement) {
+      current.focus();
+    }
+    return;
+  }
   iterateSomeOfArrayLike(list, (item, index, array) => {
     const candidate = reverse ? (array[array.length - 1 - index]) : item;
     if (!candidate.hasAttribute('tabindex')) {
@@ -256,8 +114,65 @@ export function selectNext(list, current = null, reverse = false) {
  * Alias for selectNext(list, current, true);
  * @param {ArrayLike<HTMLElement>} list
  * @param {Element} [current]
+ * @param {boolean} [loop=true]
  * @return {void}
  */
-export function selectPrevious(list, current) {
-  return selectNext(list, current, true);
+export function selectPrevious(list, current, loop = true) {
+  return selectNext(list, current, loop, true);
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function attach(element) {
+  if (!element.hasAttribute('tabindex')) {
+    element.setAttribute('tabindex', (document.activeElement === element) ? '0' : '-1');
+  }
+  element.addEventListener('focus', onChildFocus);
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function detach(element) {
+  element.removeEventListener('focus', onChildFocus);
+}
+
+/**
+ * @param {ArrayLike<Element>} items
+ * @param {boolean} [focusableWhenDisabled=true]
+ * @return {void}
+ */
+export function setupTabIndexes(items, focusableWhenDisabled = true) {
+  /** @type {Element} */
+  let currentlyFocusedChild = null;
+  /** @type {Element} */
+  let currentTabIndexChild = null;
+  /** @type {Element} */
+  let firstFocusableChild = null;
+  iterateArrayLike(items, (child) => {
+    if (!currentlyFocusedChild && document.activeElement === child) {
+      currentlyFocusedChild = child;
+    } else if (!currentTabIndexChild && child.getAttribute('tabindex') === '0') {
+      currentTabIndexChild = child;
+    } else {
+      if (!firstFocusableChild && child.getAttribute('aria-hidden') !== 'true'
+        && (focusableWhenDisabled || child.getAttribute('aria-disabled') !== 'true')) {
+        firstFocusableChild = child;
+      }
+      child.setAttribute('tabindex', '-1');
+    }
+    attach(child);
+  });
+  if (currentlyFocusedChild) {
+    currentlyFocusedChild.setAttribute('tabindex', '0');
+  } else if (currentTabIndexChild) {
+    if (currentlyFocusedChild) {
+      currentTabIndexChild.setAttribute('tabindex', '-1');
+    }
+  } else if (firstFocusableChild) {
+    firstFocusableChild.setAttribute('tabindex', '0');
+  }
 }

package/core/aria/tab.js

@@ -1,38 +1,20 @@
 // https://www.w3.org/TR/wai-aria-1.1/#tab
 
-import { setSelected } from './attributes';
+import * as Attributes from './attributes.js';
+import * as Keyboard from './keyboard.js';
 
 /**
  * @param {Element} element
- * @return {void}
- */
-export function attach(element) {
-  element.setAttribute('role', 'tab');
-  element.setAttribute('mdw-aria-tab-js', '');
-  element.addEventListener('click', onClick);
-  element.addEventListener('keydown', onKeyDown);
-}
-
-/**
- * @param {Element} element
- * @return {void}
+ * @param {string|boolean} value
+ * @param {string} [dispatchEventName]
+ * @return {boolean} successful
  */
-export function detach(element) {
-  element.removeEventListener('keydown', onKeyDown);
-  element.removeAttribute('mdw-aria-tab-js');
-}
-
-/**
- * @param {MouseEvent} event
- * @return {void}
- */
-function onClick(event) {
-  /** @type {HTMLElement} */
-  const element = (event.currentTarget);
-  if (element.getAttribute('aria-disabled') === 'true') {
-    return;
+export function setSelected(element, value, dispatchEventName) {
+  if (Attributes.setSelected(element, value, dispatchEventName)) {
+    Attributes.setCurrent(element, value);
+    return true;
   }
-  setSelected(element, 'true');
+  return false;
 }
 
 /**
@@ -55,3 +37,24 @@ function onKeyDown(event) {
   newEvent.initEvent('click', true, true);
   element.dispatchEvent(newEvent);
 }
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function attach(element) {
+  element.setAttribute('role', 'tab');
+  element.setAttribute('mdw-aria-tab-js', '');
+  element.addEventListener('keydown', onKeyDown);
+  Keyboard.attach(element);
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function detach(element) {
+  Keyboard.detach(element);
+  element.removeEventListener('keydown', onKeyDown);
+  element.removeAttribute('mdw-aria-tab-js');
+}