Maël
@maelb
Front-end dev working on a design system in React
Not an a11y expert !
I'll do my best not be too jargony
(Front-end) web developer
JS framework with ✨components✨
Many developers with varying degrees of a11y expertise
a11y not a business priority
<div onClick={} />
<Label htmlFor="name">Name</Label> <InputText id="name" />
<Label>Name</Label> <InputText />
<div>Name</div> <InputText />
<VisuallyHidden> <Label htmlFor="search">Search</Label> </VisuallyHidden> <InputText id="search" icon="icn_search" />
<InputText id="search" icon="icn_search" />
😥
InputText.propTypes = { label: PropTypes.string.isRequired, hideLabel: PropTypes.bool };
<InputText label="search" hideLabel icon="icn_search" />
Title.defaultProps = { size: 'md', level: ? };
<Title size="lg" level="h1">Page title</Title>
Title.propTypes = { level: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']).isRequired };
CI pipeline
a11y testing 😀
const comp = shallow(<InputText label='example label' hideLabel />); it('should render a label element', () => { expect(comp.find('label')).to.have.lengthOf(1); }); it('should render the label text', () => { expect(comp.contains('example label')).toBe(true); });
By maelig