interactive.js 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. /*!
  2. * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  3. * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  4. * v1.0.0-beta.82
  5. */
  6. function noopClick() {
  7. /** noop **/
  8. }
  9. /**
  10. * This helper updates the host element to prevent keyboard interaction on its subtree and sets the appropriate aria attribute for accessibility.
  11. *
  12. * This should be used in the `componentDidRender` lifecycle hook.
  13. *
  14. * **Notes**
  15. *
  16. * * this util is not needed for simple components whose root element or elements are an interactive component (custom element or native control). For those cases, set the `disabled` props on the root components instead.
  17. * * technically, users can override `tabindex` and restore keyboard navigation, but this will be considered user error
  18. */
  19. export function updateHostInteraction(component, hostIsTabbable = false) {
  20. if (component.disabled) {
  21. component.el.setAttribute("tabindex", "-1");
  22. component.el.setAttribute("aria-disabled", "true");
  23. if (component.el.contains(document.activeElement)) {
  24. document.activeElement.blur();
  25. }
  26. component.el.click = noopClick;
  27. return;
  28. }
  29. component.el.click = HTMLElement.prototype.click;
  30. if (typeof hostIsTabbable === "function") {
  31. component.el.setAttribute("tabindex", hostIsTabbable.call(component) ? "0" : "-1");
  32. }
  33. else if (hostIsTabbable === true) {
  34. component.el.setAttribute("tabindex", "0");
  35. }
  36. else if (hostIsTabbable === false) {
  37. component.el.removeAttribute("tabindex");
  38. }
  39. else {
  40. // noop for "managed" as owning component will manage its tab index
  41. }
  42. component.el.removeAttribute("aria-disabled");
  43. }