@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
32 lines (31 loc) • 1.32 kB
JavaScript
import * as React from 'react';
import { createStyles, handleCsProp } from '@workday/canvas-kit-styling';
import { createComponent } from './utils/components';
/**
* A utility to visually hide content, while still making accessible to screen readers
* See https://a11y-101.com/development/skip-link
*/
export const accessibleHide = {
clip: 'rect(1px, 1px, 1px, 1px)',
clipPath: 'polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px)',
position: 'absolute',
overflow: 'hidden',
whiteSpace: 'nowrap',
height: '1px',
minHeight: '1px',
width: '1px',
minWidth: '1px',
margin: '-1px',
padding: 0,
border: 0,
};
export const accessibleHideStyles = createStyles({ name: "d5h42", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;min-height:1px;width:1px;min-width:1px;margin:-1px;padding:0;border:0;" });
/**
* A convenient component wrapper to visually hide content, while still making it accessible to screen readers
*/
export const AccessibleHide = createComponent('div')({
displayName: 'AccessibleHide',
Component: (elemProps, ref, Element) => {
return React.createElement(Element, { ref: ref, ...handleCsProp(elemProps, accessibleHideStyles) });
},
});