@servicenow/ui-renderer-snabbdom/module/modules/aria.js

Snabbdom renderer for UI Framework on Next Experience

/**
 * Copyright (c) 2020 ServiceNow, Inc.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to
 * deal in the Software without restriction, including without limitation the
 * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
 * sell copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *  
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *  
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
import { guid } from '@servicenow/ui-internal';
import accessibilityTargets from '../utils/accessibilityTargets';
import ariaRefAssignments from '../utils/ariaRefAssignments';
/**
 * Checks for aria attributes that are set to an aria ref,
 * and replaces the value with a generated id that will be
 * later assigned to a clone of the element the aria ref
 * is referencing.
 */

const checkForAriaAttributes = (oldVnode, vnode, {
  destroy
} = {}) => {
  if (!process.env.UNSAFE_ENABLE_SNABBDOM_ACCESSIBILITY) return;
  const {
    data: {
      attrs
    }
  } = vnode;
  const oldAriaAttrs = oldVnode && oldVnode.data && oldVnode.data.aria_attrs || {};

  for (const key in oldAriaAttrs) {
    if (oldVnode.data.aria_refs && oldVnode.data.aria_refs[key]) oldVnode.data.aria_refs[key].unsubscribe({
      element: vnode.elm,
      attribute: key
    });
  }

  for (const key in attrs) {
    if (key.startsWith('aria-') && attrs[key].isAriaRef) {
      if (!vnode.data.aria_refs) vnode.data.aria_refs = {};
      if (!vnode.data.aria_attrs) vnode.data.aria_attrs = {};
      const id = `a${guid()}`; // guid() sometimes starts with a number which isn't allowed for ids

      const targetRef = attrs[key];
      vnode.data.aria_refs[key] = targetRef;
      vnode.data.aria_attrs[key] = true;
      attrs[key] = id;
      accessibilityTargets[accessibilityTargets.length - 1].push({
        element: vnode.elm,
        targetRef,
        id,
        ariaAttribute: key
      });
    }
  }

  const ariaRef = vnode.data['now-aria-ref'];

  if (ariaRef && typeof ariaRef === 'object') {
    // Queue the ref to be set after the patch is complete, otherwise
    // the element won't have its entire DOM structure and can't be accurately
    // cloned to other shadowRoots
    ariaRefAssignments[ariaRefAssignments.length - 1].push({
      ariaRef,
      element: destroy ? null : vnode.elm
    });
  }
};

export default {
  create: (oldVnode, vnode) => checkForAriaAttributes(null, vnode),
  update: (oldVnode, vnode) => checkForAriaAttributes(oldVnode, vnode),
  destroy: vnode => checkForAriaAttributes(null, vnode, {
    destroy: true
  })
};
//# sourceMappingURL=aria.js.map