@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/components/list/index.js

@@ -0,0 +1,260 @@
+// 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
+
+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 { iterateArrayLike, iterateSomeOfArrayLike } from '../../core/dom.js';
+
+import * as ListContent from './content.js';
+import * as ListItem from './item.js';
+
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+function onContentFocusEvent(event) {
+  /** @type {HTMLElement} */
+  const listElement = (event.currentTarget);
+  const onFocusInteraction = listElement.getAttribute('mdw-on-focus');
+  if (!onFocusInteraction) {
+    return;
+  }
+  /** @type {HTMLElement} */
+  const listContentElement = (event.target);
+  if (Attributes.isDisabled(listContentElement)) {
+    return;
+  }
+  onFocusInteraction.split(' ').forEach((interaction) => {
+    switch (interaction) {
+      case 'select':
+        ListContent.setSelected(listContentElement, true);
+        break;
+      default:
+    }
+  });
+}
+
+/**
+ * @param {CustomEvent} event
+ * @return {void}
+ */
+function onSelectedChangeEvent(event) {
+  /** @type {HTMLElement} */
+  const listElement = (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;
+  }
+  const { detail } = event;
+  if (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;
+  }
+  /** @type {HTMLElement} */
+  const itemElement = (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');
+      iterateArrayLike(listElement.querySelectorAll(`[role="${role}"][aria-selected="true"]`),
+        (item) => {
+          if (item === itemElement) {
+            return;
+          }
+          item.setAttribute('aria-selected', 'false');
+        });
+    });
+  }
+}
+
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+function onTabIndexZeroed(event) {
+  event.stopPropagation();
+  /** @type {HTMLElement} */
+  const listElement = (event.currentTarget);
+  /** @type {HTMLElement} */
+  const currentItem = (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();
+  /** @type {HTMLElement} */
+  const listElement = (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:
+  }
+}
+
+/**
+ * @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();
+  /** @type {HTMLElement} */
+  const listElement = (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:
+  }
+}
+
+/**
+ * @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 {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 if (iterateSomeOfArrayLike(listElement.children,
+      (child) => child.hasAttribute('aria-expanded') && child.classList.contains('mdw-list__item'))) {
+      newRole = 'tree';
+    }
+    listElement.setAttribute('role', newRole);
+    role = newRole;
+  }
+
+  setupAria(listElement, role);
+  iterateArrayLike(listElement.children, (child) => {
+    if (child.classList.contains('mdw-list__item')) {
+      ListItem.attach(child);
+    }
+  });
+  iterateArrayLike(listElement.getElementsByClassName('mdw-list'), attach);
+  if (listElement.hasAttribute('mdw-list-js')) {
+    return;
+  }
+  if (role !== 'listbox' && role !== 'tree' && role !== 'radiogroup') {
+    return;
+  }
+
+  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) {
+  iterateArrayLike(root.getElementsByClassName('mdw-list'), attach);
+}
+
+/**
+ * @param {Element} listElement
+ * @return {void}
+ */
+export function detach(listElement) {
+  iterateArrayLike(listElement.children, (child) => {
+    if (child.classList.contains('mdw-list__item')) {
+      ListItem.detach(child);
+    }
+  });
+  iterateArrayLike(listElement.querySelectorAll(`[role="${listElement.getAttribute('role') === 'tree' ? 'treeitem' : 'option'}"]`),
+    RovingTabIndex.detach);
+  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,170 @@
+import * as Keyboard from '../../core/aria/keyboard.js';
+import { getChildElementByClass, iterateArrayLike } 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');
+  iterateArrayLike(listItemElement.querySelectorAll('[role="treeitem"]'), (treeitem) => {
+    treeitem.setAttribute('mdw-skip-tab', value ? 'false' : 'true');
+  });
+}
+
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+export function onChildContentActivate(event) {
+  /** @type {HTMLElement} */
+  const activatedElement = (event.target);
+  /** @type {HTMLElement} */
+  const element = (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;
+  }
+  /** @type {HTMLElement} */
+  const element = (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);
+  iterateArrayLike(listItemElement.getElementsByClassName('mdw-list__content'), ListContent.attach);
+  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);
+  iterateArrayLike(listItemElement.getElementsByClassName('mdw-list__content'), ListContent.detach);
+}

package/components/list/secondary.js

@@ -0,0 +1,46 @@
+import { dispatchDomEvent, getPassiveEventListenerOption } 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();
+  /** @type {HTMLElement} */
+  const listSecondaryElement = (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, getPassiveEventListenerOption());
+  listSecondaryElement.addEventListener('touchstart', onInteraction, getPassiveEventListenerOption());
+  listSecondaryElement.addEventListener('keydown', onInteraction, getPassiveEventListenerOption());
+}
+/**
+ * @param {Element} listSecondaryElement
+ * @return {void}
+ */
+export function detach(listSecondaryElement) {
+  listSecondaryElement.removeEventListener('click', onClick);
+  listSecondaryElement.removeEventListener('mousedown', onInteraction, getPassiveEventListenerOption());
+  listSecondaryElement.removeEventListener('touchstart', onInteraction, getPassiveEventListenerOption());
+  listSecondaryElement.removeEventListener('keydown', onInteraction, getPassiveEventListenerOption());
+}