isNonInteractiveRole = (
  tagName: string,
  attributes: Array<Node>,
): boolean => {
  // Do not test higher level JSX components, as we do not know what
  // low-level DOM element this maps to.
  if (!dom.has(tagName)) {
    return false;
  }

  const role = getLiteralPropValue(getProp(attributes, 'role'));

  let isNonInteractive = false;
  const normalizedValues = String(role).toLowerCase().split(' ');
  const validRoles = flatMap(
    normalizedValues,
    (name: string) => (rolesMap.has(name) ? [name] : []),
  );
  if (validRoles.length > 0) {
    // The first role value is a series takes precedence.
    isNonInteractive = includes(nonInteractiveRoles, validRoles[0]);
  }

  return isNonInteractive;
}
Returns boolean indicating whether the given element has a role
that is associated with a non-interactive component. Non-interactive roles
include `listitem`, `article`, or `dialog`. These are roles that indicate
for the most part containers.

Elements with these roles should not respond or handle user interactions.
For example, an `onClick` handler should not be assigned to an element with
the role `listitem`. An element inside the `listitem`, like a button or a
link, should handle the click.

This utility returns true for elements that are assigned a non-interactive
role. It will return false for elements that do not have a role. So whereas
a `div` might be considered non-interactive, for the purpose of this utility,
it is considered neither interactive nor non-interactive -- a determination
cannot be made in this case and false is returned.