@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration/dist/cjs/drag-drop-context/hooks/use-hidden-text-element.js

An optional Pragmatic drag and drop package that enables rapid migration from react-beautiful-dnd to Pragmatic drag and drop

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = useHiddenTextElement;
exports.getHiddenTextElementId = getHiddenTextElementId;
var _react = require("react");
function getHiddenTextElementId(contextId) {
  return "rbd-lift-instruction-".concat(contextId);
}
function useHiddenTextElement(_ref) {
  var contextId = _ref.contextId,
    text = _ref.text;
  (0, _react.useEffect)(function () {
    var id = getHiddenTextElementId(contextId);
    var el = document.createElement('div');

    // identifier
    el.id = id;

    // add the description text
    el.textContent = text;

    // Using `display: none` prevent screen readers from reading this element in the document flow
    // This element is used as a `aria-labelledby` reference for *other elements* and will be read out for those
    Object.assign(el.style, {
      display: 'none'
    });

    // Add to body
    document.body.appendChild(el);
    return function unmount() {
      // Remove from body
      el.remove();
    };
  }, [contextId, text]);
}