@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/components/list/index.js

@@ -1,101 +1,256 @@
-import { Ripple } from '../ripple/index';
-import { findElementParentByClassName, dispatchDomEvent } from '../common/dom';
+// https://www.w3.org/TR/wai-aria-practices/#Listbox
+// https://www.w3.org/TR/wai-aria-practices/#TreeView
+// https://www.w3.org/TR/wai-aria-practices/examples/landmarks/navigation.html
 
-class ListItem {
-  /**
-   * @param {Element} listItemElement
-   * @return {void}
-   */
-  static attach(listItemElement) {
-    Ripple.attach(listItemElement);
-    listItemElement.addEventListener('click', ListItem.onClick);
+import * as Attributes from '../../core/aria/attributes.js';
+import * as Keyboard from '../../core/aria/keyboard.js';
+import * as RovingTabIndex from '../../core/aria/rovingtabindex.js';
+
+import * as ListContent from './content.js';
+import * as ListItem from './item.js';
+
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+function onContentFocusEvent(event) {
+  const listElement = /** @type {HTMLElement} */ (event.currentTarget);
+  const onFocusInteraction = listElement.getAttribute('mdw-on-focus');
+  if (!onFocusInteraction) {
+    return;
+  }
+  const listContentElement = /** @type {HTMLElement} */ (event.target);
+  if (Attributes.isDisabled(listContentElement)) {
+    return;
+  }
+  for (const interaction of onFocusInteraction.split(' ')) {
+    switch (interaction) {
+      case 'select':
+        ListContent.setSelected(listContentElement, true);
+        break;
+      default:
+    }
   }
+}
 
-  /**
-   * @param {Element} listItemElement
-   * @return {void}
-   */
-  static detach(listItemElement) {
-    listItemElement.removeEventListener('click', ListItem.onClick);
-    Ripple.detach(listItemElement);
+/**
+ * @param {CustomEvent} event
+ * @return {void}
+ */
+function onSelectedChangeEvent(event) {
+  const listElement = /** @type {HTMLElement} */ (event.currentTarget);
+  // List is readonly
+  if (listElement.getAttribute('aria-readonly') === 'true') {
+    event.stopPropagation();
+    event.preventDefault();
+    return;
+  }
+  const listElementRole = listElement.getAttribute('role');
+  if (listElementRole !== 'listbox' && listElementRole !== 'tree') {
+    // Bubble up
+    return;
+  }
+  if (event.detail.value === 'false') {
+    // Item is radio-like and cannot be unselected
+    if (listElement.getAttribute('aria-required') === 'true'
+      && listElement.getAttribute('aria-multiselectable') !== 'true') {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+    return;
+  }
+  const itemElement = /** @type {HTMLElement} */ (event.target);
+  if (listElement.getAttribute('aria-multiselectable') !== 'true') {
+    // Item is radio-like and must uncheck others
+    setTimeout(() => {
+      // Wait to see if event is cancelled
+      if (event.defaultPrevented) {
+        return;
+      }
+      const role = itemElement.getAttribute('role');
+      for (const item of listElement.querySelectorAll(`[role="${role}"][aria-selected="true"]`)) {
+        if (item !== itemElement) {
+          item.setAttribute('aria-selected', 'false');
+        }
+      }
+    });
   }
+}
 
-  /**
-   * @param {MouseEvent|KeyboardEvent|PointerEvent} event
-   * @return {void}
-   */
-  static onClick(event) {
-    const el = event.currentTarget;
-    dispatchDomEvent(el, 'mdw:itemactivated');
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+function onTabIndexZeroed(event) {
+  event.stopPropagation();
+  const listElement = /** @type {HTMLElement} */ (event.currentTarget);
+  const currentItem = /** @type {HTMLElement} */ (event.target);
+  switch (listElement.getAttribute('role')) {
+    case 'tree':
+      RovingTabIndex.removeTabIndex(listElement.querySelectorAll('[role="treeitem"]'), [currentItem]);
+      break;
+    case 'listbox':
+      RovingTabIndex.removeTabIndex(listElement.querySelectorAll('[role="option"]'), [currentItem]);
+      break;
+    case 'radiogroup':
+      RovingTabIndex.removeTabIndex(listElement.querySelectorAll('[role="radio"]'), [currentItem]);
+      break;
+    default:
+  }
+}
+/**
+ * @param {CustomEvent} event
+ * @return {void}
+ */
+function onDownArrowKey(event) {
+  if (event.detail.ctrlKey || event.detail.altKey
+    || event.detail.shiftKey || event.detail.metaKey) {
+    return;
+  }
+  event.preventDefault();
+  event.stopPropagation();
+  const listElement = /** @type {HTMLElement} */ (event.currentTarget);
+  switch (listElement.getAttribute('role')) {
+    case 'tree':
+      RovingTabIndex.selectNext(listElement.querySelectorAll('[role="treeitem"]'));
+      break;
+    case 'listbox':
+      RovingTabIndex.selectNext(listElement.querySelectorAll('[role="option"]'));
+      break;
+    case 'radiogroup':
+      RovingTabIndex.selectNext(listElement.querySelectorAll('[role="radio"]'));
+      break;
+    default:
   }
 }
 
-class ListExpander {
-  /**
-   * @param {Element} listExpanderElement
-   * @return {void}
-   */
-  static attach(listExpanderElement) {
-    if (!listExpanderElement.firstElementChild) {
-      return;
-    }
-    listExpanderElement.firstElementChild.addEventListener('click', ListExpander.onItemClicked);
+/**
+ * @param {CustomEvent} event
+ * @return {void}
+ */
+function onUpArrowKey(event) {
+  if (event.detail.ctrlKey || event.detail.altKey
+    || event.detail.shiftKey || event.detail.metaKey) {
+    return;
+  }
+  event.preventDefault();
+  event.stopPropagation();
+  const listElement = /** @type {HTMLElement} */ (event.currentTarget);
+  switch (listElement.getAttribute('role')) {
+    case 'tree':
+      RovingTabIndex.selectPrevious(listElement.querySelectorAll('[role="treeitem"]'));
+      break;
+    case 'listbox':
+      RovingTabIndex.selectPrevious(listElement.querySelectorAll('[role="option"]'));
+      break;
+    case 'radiogroup':
+      RovingTabIndex.selectPrevious(listElement.querySelectorAll('[role="radio"]'));
+      break;
+    default:
   }
+}
 
-  static detach(listExpanderElement) {
-    if (!listExpanderElement.firstElementChild) {
-      return;
-    }
-    listExpanderElement.firstElementChild.removeEventListener('click', ListExpander.onItemClicked);
+/**
+ * @param {Element} listElement
+ * @param {string} role
+ * @return {void}
+ */
+export function setupAria(listElement, role = 'tree') {
+  if (!listElement.hasAttribute('role')) {
+    listElement.setAttribute('role', role);
   }
+  listElement.setAttribute('aria-orientation', 'vertical');
+  if (!listElement.hasAttribute('aria-multiselectable')) {
+    listElement.setAttribute('aria-multiselectable', 'false');
+  }
+}
 
-  /**
-   * @param {Event} event
-   * @return {void}
-   */
-  static onItemClicked(event) {
-    const listExpanderElement = findElementParentByClassName(event.target, 'mdw-list__expander');
-    if (!listExpanderElement) {
-      return;
-    }
-    if (listExpanderElement.hasAttribute('mdw-expanded')) {
-      listExpanderElement.removeAttribute('mdw-expanded');
+/**
+ * @param {Element} listElement
+ * @return {void}
+ */
+export function attach(listElement) {
+  let role = listElement.getAttribute('role');
+  if (!role) {
+    let newRole = 'listbox';
+    const parentRole = listElement.parentElement && listElement.parentElement.getAttribute('role');
+    if (parentRole === 'treeitem') {
+      newRole = 'group';
     } else {
-      listExpanderElement.setAttribute('mdw-expanded', '');
+      for (const child of listElement.children) {
+        if (child.hasAttribute('aria-expanded') && child.classList.contains('mdw-list__item')) {
+          newRole = 'tree';
+          break;
+        }
+      }
     }
+    listElement.setAttribute('role', newRole);
+    role = newRole;
   }
-}
 
-class List {
-  /**
-   * @param {Element} listElement
-   * @return {void}
-   */
-  static attach(listElement) {
-    const items = listElement.getElementsByClassName('mdw-list__item');
-    const expanders = listElement.getElementsByClassName('mdw-list__expander');
-    for (let i = 0; i < items.length; i += 1) {
-      ListItem.attach(items.item(i));
-    }
-    for (let i = 0; i < expanders.length; i += 1) {
-      ListExpander.attach(expanders.item(i));
+  setupAria(listElement, role);
+  for (const child of listElement.children) {
+    if (child.classList.contains('mdw-list__item')) {
+      ListItem.attach(child);
     }
   }
+  for (const el of listElement.getElementsByClassName('mdw-list')) {
+    attach(el);
+  }
+  if (listElement.hasAttribute('mdw-list-js')) {
+    return;
+  }
+  if (role !== 'listbox' && role !== 'tree' && role !== 'radiogroup') {
+    return;
+  }
 
-  static detach(listElement) {
-    const items = listElement.getElementsByClassName('mdw-list__item');
-    const expanders = listElement.getElementsByClassName('mdw-list__expander');
-    for (let i = 0; i < items.length; i += 1) {
-      ListItem.detach(items.item(i));
-    }
-    for (let i = 0; i < expanders.length; i += 1) {
-      ListExpander.detach(expanders.item(i));
-    }
+  switch (role) {
+    case 'tree':
+      RovingTabIndex.setupTabIndexes(listElement.querySelectorAll('[role="treeitem"]'));
+      break;
+    case 'listbox':
+      RovingTabIndex.setupTabIndexes(listElement.querySelectorAll('[role="option"]'));
+      break;
+    case 'radiogroup':
+      RovingTabIndex.setupTabIndexes(listElement.querySelectorAll('[role="radio"]'));
+      break;
+    default:
+      return;
   }
+
+  listElement.addEventListener(Keyboard.DOWN_ARROW_KEY, onDownArrowKey);
+  listElement.addEventListener(Keyboard.UP_ARROW_KEY, onUpArrowKey);
+  listElement.addEventListener(RovingTabIndex.TABINDEX_ZEROED, onTabIndexZeroed);
+  listElement.addEventListener(ListContent.SELECTED_CHANGE_EVENT, onSelectedChangeEvent);
+  listElement.addEventListener(ListContent.FOCUS_EVENT, onContentFocusEvent);
+  listElement.setAttribute('mdw-list-js', '');
+}
+
+/**
+ * @param {Element|Document} [root=document]
+ * @return {void}
+ */
+export function attachAll(root = document) {
+  for (const el of root.getElementsByClassName('mdw-list')) attach(el);
 }
 
-export {
-  List,
-  ListItem,
-  ListExpander,
-};
+/**
+ * @param {Element} listElement
+ * @return {void}
+ */
+export function detach(listElement) {
+  for (const child of listElement.children) {
+    if (child.classList.contains('mdw-list__item')) {
+      ListItem.detach(child);
+    }
+  }
+  const elements = listElement.querySelectorAll(`[role="${listElement.getAttribute('role') === 'tree' ? 'treeitem' : 'option'}"]`);
+  for (const element of elements) {
+    RovingTabIndex.detach(element);
+  }
+  listElement.removeEventListener(ListContent.SELECTED_CHANGE_EVENT, onSelectedChangeEvent);
+  listElement.removeEventListener(Keyboard.DOWN_ARROW_KEY, onDownArrowKey);
+  listElement.removeEventListener(Keyboard.UP_ARROW_KEY, onUpArrowKey);
+  listElement.removeEventListener(RovingTabIndex.TABINDEX_ZEROED, onTabIndexZeroed);
+  listElement.removeAttribute('mdw-list-js');
+}

package/components/list/index.scss

@@ -0,0 +1,2 @@
+@forward './_spec.scss';
+@forward './_theme.scss';

package/components/list/item.js

@@ -0,0 +1,167 @@
+import * as Keyboard from '../../core/aria/keyboard.js';
+import { getChildElementByClass } from '../../core/dom.js';
+
+import * as ListContent from './content.js';
+
+/**
+ * @param {Element} listItemElement
+ * @return {boolean}
+ */
+export function isExpanded(listItemElement) {
+  return (listItemElement.getAttribute('aria-expanded') === 'true');
+}
+
+/**
+ * @param {Element} listItemElement
+ * @param {boolean} value
+ * @return {void}
+ */
+export function setExpanded(listItemElement, value) {
+  listItemElement.setAttribute('aria-expanded', value ? 'true' : 'false');
+  for (const treeitem of listItemElement.querySelectorAll('[role="treeitem"]')) {
+    treeitem.setAttribute('mdw-skip-tab', value ? 'false' : 'true');
+  }
+}
+
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+export function onChildContentActivate(event) {
+  const activatedElement = /** @type {HTMLElement} */ (event.target);
+  const element = /** @type {HTMLElement} */ (event.currentTarget);
+  if (!activatedElement || activatedElement.parentElement !== element) {
+    return;
+  }
+  if (element.hasAttribute('aria-expanded')) {
+    event.stopPropagation();
+    setExpanded(element, !isExpanded(element));
+  }
+}
+
+/**
+ * @param {Element} listItemElement
+ * @return {void}
+ */
+export function setupAria(listItemElement) {
+  let isTreeItem = null;
+  let roleIsNone = false;
+  if (!listItemElement.hasAttribute('role')) {
+    if (listItemElement.hasAttribute('aria-expanded')) {
+      listItemElement.setAttribute('role', 'treeitem');
+      isTreeItem = true;
+      roleIsNone = false;
+    } else {
+      listItemElement.setAttribute('role', 'none');
+      isTreeItem = false;
+      roleIsNone = true;
+    }
+  }
+  if (isTreeItem !== false || listItemElement.getAttribute('role') === 'treeitem') {
+    const activatorContent = getChildElementByClass(listItemElement, 'mdw-list__content');
+    if (activatorContent && !activatorContent.hasAttribute('role')) {
+      activatorContent.setAttribute('role', 'none');
+    }
+  }
+  if (!roleIsNone) {
+    return;
+  }
+  const parentRole = listItemElement.parentElement && listItemElement.parentElement.getAttribute('role');
+  if (!parentRole) {
+    return;
+  }
+  const contentChild = getChildElementByClass(listItemElement, 'mdw-list__content');
+  if (!contentChild) {
+    return;
+  }
+  if (contentChild.hasAttribute('role')) {
+    return;
+  }
+  switch (parentRole) {
+    case 'listbox':
+      contentChild.setAttribute('role', 'option');
+      break;
+    case 'radiogroup':
+      contentChild.setAttribute('role', 'radio');
+      break;
+    case 'group':
+    case 'tree':
+    case 'treeitem':
+      contentChild.setAttribute('role', 'treeitem');
+      break;
+    default:
+    case 'list':
+  }
+}
+
+/**
+ * @param {KeyboardEvent} event
+ * @return {void}
+ */
+function onKeyDown(event) {
+  if (event.ctrlKey || event.shiftKey || event.altKey || event.metaKey) {
+    return;
+  }
+  if (event.key !== 'Enter' && event.key !== 'Spacebar' && event.key !== ' ') {
+    return;
+  }
+  if (document.activeElement !== event.currentTarget) {
+    return;
+  }
+  const element = /** @type {HTMLElement} */ (event.currentTarget);
+  if (!element) {
+    return;
+  }
+  if (!element.hasAttribute('aria-expanded')) {
+    return;
+  }
+  const activatorContent = getChildElementByClass(element, 'mdw-list__content');
+  if (!activatorContent) {
+    return;
+  }
+  event.stopPropagation();
+  event.preventDefault();
+  const newEvent = document.createEvent('Event');
+  newEvent.initEvent('click', true, true);
+  activatorContent.dispatchEvent(newEvent);
+}
+
+/**
+ * @param {Element} listItemElement
+ * @return {void}
+ */
+export function attachCore(listItemElement) {
+  setupAria(listItemElement);
+}
+/**
+ * @param {Element} listItemElement
+ * @return {void}
+ */
+export function attach(listItemElement) {
+  attachCore(listItemElement);
+  for (const element of listItemElement.getElementsByClassName('mdw-list__content')) { ListContent.attach(element); }
+  if (listItemElement.hasAttribute('aria-expanded')) {
+    if (!listItemElement.hasAttribute('mdw-expander-js')) {
+      listItemElement.setAttribute('mdw-pre-expander-js', '');
+      setTimeout(() => {
+        if (listItemElement.hasAttribute('mdw-pre-expander-js')) {
+          listItemElement.removeAttribute('mdw-pre-expander-js');
+          listItemElement.setAttribute('mdw-expander-js', '');
+        }
+      }, 500);
+    }
+    setExpanded(listItemElement, isExpanded(listItemElement));
+  }
+  listItemElement.addEventListener(ListContent.ACTIVATE_EVENT, onChildContentActivate);
+  listItemElement.addEventListener('keydown', onKeyDown);
+  Keyboard.attach(listItemElement);
+}
+
+/**
+ * @param {Element} listItemElement
+ * @return {void}
+ */
+export function detach(listItemElement) {
+  Keyboard.detach(listItemElement);
+  for (const element of listItemElement.getElementsByClassName('mdw-list__content')) { ListContent.detach(element); }
+}

package/components/list/secondary.js

@@ -0,0 +1,45 @@
+import { dispatchDomEvent } from '../../core/dom.js';
+
+export const SECONDARY_ACTION_EVENT = 'mdw:listsecondary-action';
+
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+export function onInteraction(event) {
+  event.stopPropagation();
+}
+
+/**
+ * @param {MouseEvent|KeyboardEvent|PointerEvent} event
+ * @return {void}
+ */
+export function onClick(event) {
+  event.stopPropagation();
+  const listSecondaryElement = /** @type {HTMLElement} */ (event.currentTarget);
+  dispatchDomEvent(listSecondaryElement, SECONDARY_ACTION_EVENT);
+}
+
+/**
+ * @param {Element} listSecondaryElement
+ * @return {void}
+ */
+export function attach(listSecondaryElement) {
+  if (!listSecondaryElement.hasAttribute('mdw-action')) {
+    return;
+  }
+  listSecondaryElement.addEventListener('click', onClick);
+  listSecondaryElement.addEventListener('mousedown', onInteraction, { passive: true });
+  listSecondaryElement.addEventListener('touchstart', onInteraction, { passive: true });
+  listSecondaryElement.addEventListener('keydown', onInteraction, { passive: true });
+}
+/**
+ * @param {Element} listSecondaryElement
+ * @return {void}
+ */
+export function detach(listSecondaryElement) {
+  listSecondaryElement.removeEventListener('click', onClick);
+  listSecondaryElement.removeEventListener('mousedown', onInteraction);
+  listSecondaryElement.removeEventListener('touchstart', onInteraction);
+  listSecondaryElement.removeEventListener('keydown', onInteraction);
+}