ENABLE-30 Accessible Context Menu (Work-In-Progress)

content/body/contextmenu.php

@@ -0,0 +1,44 @@
+<p>
+  Context menus are custom, right-click menus that provide users with quick access to additional options
+  or actions related to a specific element or area on the page. Context menus are usually opened using a combination
+  of keyboard keys—VO-Shift-M using VoiceOver on Mac—or a triple-tap action on mobile devices.
+</p>
+
+<h2>Links</h2>
+
+<p>
+  Below is a link that has a custom context meu. The reasons for a link to have a custom context menu are many. It
+  could be purely for style, it could be wanting to hide default browser options, it could be providing custom
+  functionality, and many other reasons.
+</p>
+
+<a id="link-context-menu" class="link-context-menu" href="https://google.com" aria-describedby="link-describedby">Google</a>
+
+<p id="link-describedby" hidden="hidden">Link with custom context menu</p>
+
+<div class="enable-example--no-border">
+  <ul id="context-menu-list" class="context-menu__example" role="menu" tabindex="0">
+    <li class="context-menu__list__item" role="menuitem" tabindex="0">Back</li>
+    <li class="context-menu__list__item__disabled" role="menuitem" tabindex="0">Forward</li>
+    <li class="context-menu__list__item" role="menuitem" tabindex="0">Reload</li>
+    <li class="context-menu__list__item" role="menuitem" tabindex="0">More Tools</li>
+    <li class="context-menu__list__item__divider" aria-hidden="true"></li>
+    <li class="context-menu__list__item__withIcon" role="menuitem" tabindex="0">
+      <img src="images/contextmenu/check_24dp_color.png" alt="checkmark" class="context-menu__list__item__withIcon__icon"/>
+      Show Bookmarks
+    </li>
+    <li class="context-menu__list__item" role="menuitem" tabindex="0">Show Full URLs</li>
+  </ul>
+</div>
+
+<h2>A Specific Area</h2>
+
+<p>
+  It's possible to show a custom context menu for when a user right-clicks inside a specific area. It's best not to
+  allow accessibility users to be able to interact with this area though; instead override the context menu for
+  elements that have more context such as links and buttons. Moreover, forcing an area to be accessible will require
+  assigning a role of "button", "link", or some other attribute that doesn't correctly represent the area, and will
+  only confuse accessibility users because the area will be announced as a "button", "link", etc., respectively.
+</p>
+
+<div id="specific-area" class="specific-area" role="region"></div>

content/bottom/contextmenu.php

@@ -0,0 +1,6 @@
+<script id="context-menu-js" type="module">
+  import ContextMenu from "./js/modules/contextmenu.js";
+  import showCode from "./js/enable-libs/showCode.js";
+  let contextMenu = new ContextMenu();
+  showCode.addJsObj('context menu', contextMenu);
+</script>

content/head/contextmenu.php

@@ -0,0 +1 @@
+<link id="contextmenu-css" rel="stylesheet" type="text/css" href="css/contextmenu.css">

css/contextmenu.css

@@ -0,0 +1,102 @@
+.link-context-menu {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+.specific-area {
+  display: block;
+  width: 120px;
+  height: 80px;
+  background-color: #3b99fc;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+}
+.context-menu {
+  display: block;
+  position: fixed;
+  z-index: 1000;
+  list-style-type: none;
+  padding: 0;
+  margin-top: 0;
+  margin-left: 0;
+  width: 200px;
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  outline: none;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  color: #444;
+}
+.context-menu__example {
+  display: none;
+}
+.context-menu .listItem {
+  padding: 4px 12px 4px 26px;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #6f42c1;
+}
+.context-menu .listItem:hover {
+  background: #6f42c1;
+  color: #fff;
+}
+.context-menu__item {
+  padding: 4px 12px 4px 26px;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #6f42c1;
+}
+.context-menu__item:hover {
+  background: #6f42c1;
+  color: #fff;
+}
+.context-menu__item__divider {
+  height: 1px;
+  background: #6f42c1;
+  margin: 4px 8px;
+}
+.context-menu__item__disabled {
+  padding: 4px 12px 4px 26px;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #6f42c1;
+  color: #ccc;
+  cursor: default;
+}
+.context-menu__item__disabled:hover {
+  background: #6f42c1;
+  color: #fff;
+}
+.context-menu__item__disabled:hover {
+  background: unset;
+  color: #ccc;
+}
+.context-menu__item__withIcon {
+  padding: 4px 12px 4px 26px;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #6f42c1;
+  padding-left: 4px;
+  justify-content: flex-start;
+  gap: 4px;
+}
+.context-menu__item__withIcon:hover {
+  background: #6f42c1;
+  color: #fff;
+}
+.context-menu__item__withIcon__icon {
+  width: 16px;
+  height: 16px;
+}

js/modules/contextmenu.js

@@ -0,0 +1,182 @@
+'use-strict'
+
+export default function ContextMenu() {
+  let previousFocus;
+  let longPressTimeout;
+
+  this.init = new function () {
+    const link = document.getElementById('link-context-menu');
+    if (link) {
+      addContextMenuListener(link);
+      addLongTapListener(link);
+    }
+
+    const area = document.getElementById('specific-area');
+    if (area) {
+      addContextMenuListener(area);
+      addLongTapListener(area);
+    }
+  }
+
+  function addContextMenuListener(element) {
+    element.addEventListener('contextmenu', (event) => {
+      previousFocus = event.target;
+      event.preventDefault();
+      showContextMenu(event.x, event.y);
+    })
+  }
+
+  function addLongTapListener(element) {
+    const iOSLongPressTime = 500;
+    element.addEventListener('touchstart', (event) => {
+      previousFocus = event.target;
+      if (longPressTimeout) {
+        clearTimeout(longPressTimeout);
+      }
+      event.preventDefault();
+      const touch = event.touches[0];
+      longPressTimeout = setTimeout(() => {
+        showContextMenu(touch.pageX, touch.pageY);
+      }, iOSLongPressTime);
+    })
+  }
+
+  function showContextMenu(eventX, eventY) {
+    let isMenuShowing = document.getElementById('context-menu-list') !== null;
+    if (isMenuShowing) {
+      hideContextMenu();
+    }
+    const menu = createContextMenu();
+    menu.style.left = `${eventX}px`;
+    menu.style.top = `${eventY}px`;
+    document.getElementById('main').append(menu);
+    addContextMenuListeners(menu);
+    focusOn(menu);
+    document.addEventListener('click', hideContextMenu);
+  }
+
+  function addContextMenuListeners(menu) {
+    const items = menu.querySelectorAll('li');
+    for (let item of items) {
+      item.addEventListener('click', onContextMenuItemClicked);
+      item.addEventListener('mouseover', onMouseOverItem);
+      item.addEventListener('mouseout', onMouseOutItem);
+    }
+    menu.addEventListener('keydown', onMenuKeyDown);
+  }
+
+  function focusOn(menu) {
+    // longPressTimeout is assigned when a 'touchstart' event fires.
+    if (longPressTimeout) {
+      // On iOS, wait for long-tap animation to end before focusing.
+      setTimeout(() => {
+        menu.focus();
+      }, 200);
+      longPressTimeout = null;
+    } else {
+      menu.focus();
+    }
+  }
+
+  function hideContextMenu() {
+    const menu = document.getElementById('context-menu-list');
+    if (!menu) {
+      return;
+    }
+    removeContextMenuListeners(menu);
+    menu.remove();
+    document.removeEventListener('click', hideContextMenu);
+    if (previousFocus) {
+      previousFocus.focus()
+    }
+  }
+
+  function removeContextMenuListeners(menu) {
+    const items = menu.querySelectorAll('li');
+    for (let item of items) {
+      item.removeEventListener('click', onContextMenuItemClicked);
+      item.removeEventListener('mouseover', onMouseOverItem);
+      item.removeEventListener('mouseout', onMouseOutItem);
+    }
+    menu.removeEventListener('keydown', onMenuKeyDown);
+  }
+
+  function onMenuKeyDown(event) {
+    if (event.key === 'Escape') {
+      hideContextMenu();
+    }
+  }
+
+  function createContextMenu() {
+    const ul = createElement('ul', { id: 'context-menu-list', class: 'context-menu', role: 'menu', tabindex: '0' });
+    getMenuItems().forEach(item => {
+      const li = createListItem(item);
+      ul.append(li);
+    });
+    return ul;
+  }
+
+  function getMenuItems() {
+    return [
+      {text: 'Back', className: 'context-menu__item', role: 'menuitem', tabindex: '0'},
+      {text: 'Forward', className: 'context-menu__item__disabled', role: 'menuitem', tabindex: '0'},
+      {text: 'Reload', className: 'context-menu__item', role: 'menuitem', tabindex: '0'},
+      {text: 'More Tools', className: 'context-menu__item', role: 'menuitem', tabindex: '0'},
+      {className: 'context-menu__item__divider', ariaHidden: 'true'},
+      {
+        text: 'Show Bookmarks',
+        className: 'context-menu__item__withIcon',
+        role: 'menuitem',
+        tabindex: '0',
+        iconSrc: 'images/contextmenu/check_24dp_color.png',
+        iconAlt: 'selected',
+        iconClass: 'context-menu__item__withIcon__icon'
+      },
+      {text: 'Show Full URLs', className: 'context-menu__item', role: 'menuitem', tabindex: '0'}
+    ];
+  }
+
+  function createListItem(data) {
+    const { text, className, role, tabindex, ariaHidden, iconSrc, iconAlt, iconClass } = data;
+    const children = [];
+    if (iconSrc) {
+      const icon = createElement('img', { src: iconSrc, alt: iconAlt, class: iconClass });
+      children.push(icon);
+    }
+    if (text) {
+      const textNode = document.createTextNode(text);
+      children.push(textNode);
+    }
+    return createElement('li', { class: className, role, tabindex, 'aria-hidden': ariaHidden }, children);
+  }
+
+  function createElement(tag, attributes = {}, children = []) {
+    const element = document.createElement(tag);
+    for (const [key, value] of Object.entries(attributes)) {
+      element.setAttribute(key, value);
+    }
+    children.forEach(child => element.append(child));
+    return element;
+  }
+
+  function onContextMenuItemClicked(event) {
+    const { target } = event;
+    console.log(target.textContent);
+  }
+
+  function onMouseOverItem(event) {
+    const {currentTarget} = event;
+    const img = currentTarget.querySelector('img');
+    if (img) {
+      img.setAttribute('src', 'images/contextmenu/check_24dp_white.png');
+    }
+  }
+
+  function onMouseOutItem(event) {
+    const {currentTarget} = event;
+    const img = currentTarget.querySelector('img');
+    if (img) {
+      img.setAttribute('src', 'images/contextmenu/check_24dp_color.png');
+    }
+  }
+}

js/modules/es4/contextmenu.js

@@ -0,0 +1 @@
+'use-strict'