accessible-system

A React-Native accessibility helper for styled-components

Usage no npm install needed!

<script type="module">
  import accessibleSystem from 'https://cdn.skypack.dev/accessible-system';
</script>

README

francisleigh/accessible-system

A React-Native accessibility helper for styled-components

Usage

import A11y from "accessible-system";

const Box = styled.View.attrs(A11y)`
  height: 100px;
  width: 100px;
`

const BoxMultiAttrs = styled.View.attrs((props) => ({
  ...A11y(props),
  ...OtherAttrLib(props),
  style: { borderBottom: 2 }
}))`
  height: 100px;
  width: 100px;
`
import Box from "@components/Box";

<Box
  a11y={boolean}
  a11yLabel={string}
  a11yHint={string}
  a11yRole={string}
  a11yStates={string[]}
  a11yHideChildren={boolean}
  a11yLiveRegion={boolean}
  a11yAssertive={boolean}
  a11yNoInvert={boolean}
  a11yValue={object}
  a11yIsModal={boolean}
  a11yOnEscape={Function}
  a11yOnTap={Function}
  a11yOnMagicTap={Function}
  a11yActions={A11yAction[]}
  a11yOnAction={Function}
  disabled={boolean}
  busy={boolean}
/>

Roadmap

  • Implement a similiar API for web-based accessibility