interactive.js 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  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.97
  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. * @param component
  20. * @param hostIsTabbable
  21. */
  22. function updateHostInteraction(component, hostIsTabbable = false) {
  23. if (component.disabled) {
  24. component.el.setAttribute("tabindex", "-1");
  25. component.el.setAttribute("aria-disabled", "true");
  26. if (component.el.contains(document.activeElement)) {
  27. document.activeElement.blur();
  28. }
  29. component.el.click = noopClick;
  30. return;
  31. }
  32. component.el.click = HTMLElement.prototype.click;
  33. if (typeof hostIsTabbable === "function") {
  34. component.el.setAttribute("tabindex", hostIsTabbable.call(component) ? "0" : "-1");
  35. }
  36. else if (hostIsTabbable === true) {
  37. component.el.setAttribute("tabindex", "0");
  38. }
  39. else if (hostIsTabbable === false) {
  40. component.el.removeAttribute("tabindex");
  41. }
  42. else ;
  43. component.el.removeAttribute("aria-disabled");
  44. }
  45. export { updateHostInteraction as u };