src/utils/mixins.js
function visuallyHidden(focusable) {
  const focusableStyles = {
    clip: "auto",
    clipPath: "none",
    height: "auto",
    margin: 0,
    overflow: "visible",
    position: "static",
    whiteSpace: "inherit",
    width: "auto",
  };

  return Object.assign({}, {
    border: 0,
    clipPath: "inset(50%)",
    display: "inline-block",
    height: "1px",
    margin: "-1px",
    overflow: "hidden",
    padding: 0,
    whiteSpace: "nowrap",
    width: "1px",
  }, focusable === "focusable" ? {
    ":active": focusableStyles,
    ":focus": focusableStyles,
  } : {});
}
function visuallyHidden(focusable) {
  const focusableStyles = {
    clip: "auto",
    clipPath: "none",
    height: "auto",
    margin: 0,
    overflow: "visible",
    position: "static",
    whiteSpace: "inherit",
    width: "auto",
  };

  return Object.assign({}, {
    border: 0,
    clipPath: "inset(50%)",
    display: "inline-block",
    height: "1px",
    margin: "-1px",
    overflow: "hidden",
    padding: 0,
    whiteSpace: "nowrap",
    width: "1px",
  }, focusable === "focusable" ? {
    ":active": focusableStyles,
    ":focus": focusableStyles,
  } : {});
}
function visuallyHidden ( focusable ) { const focusableStyles = { clip : "auto" , clipPath : "none" , height : "auto" , margin : 0 , overflow : "visible" , position : "static" , whiteSpace : "inherit" , width : "auto" , } ; return Object . assign ( { } , { border : 0 , clipPath : "inset(50%)" , display : "inline-block" , height : "1px" , margin : "-1px" , overflow : "hidden" , padding : 0 , whiteSpace : "nowrap" , width : "1px" , } , focusable === "focusable" ? { ":active" : focusableStyles , ":focus" : focusableStyles , } : { } ) ; }
Hide only visually, but have available for screen readers
@return {Object} CSS styles
Hide only visually but have available for screen readers