Accessible components for Svelte

_ You will need svelte and npm to use this package. Get started by downloading svelte

To install using yarn

yarn add accessible-svelte

or npm

npm i accessible-svelte

provides context to screen readers while being visually hidden, this is especially important when using icons without accompanying text

<script>
  import { VisuallyHidden } from "accessible-svelte"
</script>
<button>
  <VisuallyHidden text="close" />
  <svg
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden
    width="15.161"
    height="15.159"
    viewBox="0 0 15.161 15.159">
    <path
      d="M129.465,198.165l-4.247-4.249,4.247-4.247a1.954,1.954,0,0,0,0-2.761,2,2,0,0,0-2.76,0l-4.249,4.247-4.247-4.247a1.952,1.952,0,1,0-2.761,2.761l4.247,4.247-4.247,4.249a1.948,1.948,0,0,0,0,2.76,2,2,0,0,0,2.761,0l4.247-4.247,4.248,4.247a1.952,1.952,0,1,0,2.761-2.76Z"
      transform="translate(-114.876 -186.337)" />
  </svg>
</button>

Add the aria-hidden to your svg or alt="" to an img and add your pass your text to the component

<script>
  import { IconOnlyButton } from "accessible-svelte"
</script>
<IconOnlyButton text="close" reset onclick={e => console.log(e)}>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden
    width="15.161"
    height="15.159"
    viewBox="0 0 15.161 15.159">
    <path
      d="M129.465,198.165l-4.247-4.249,4.247-4.247a1.954,1.954,0,0,0,0-2.761,2,2,0,0,0-2.76,0l-4.249,4.247-4.247-4.247a1.952,1.952,0,1,0-2.761,2.761l4.247,4.247-4.247,4.249a1.948,1.948,0,0,0,0,2.76,2,2,0,0,0,2.761,0l4.247-4.247,4.248,4.247a1.952,1.952,0,1,0,2.761-2.76Z"
      transform="translate(-114.876 -186.337)" />
  </svg>
</IconOnlyButton>

in progress

• modal

• text = default = ''

• onclick
• name
• id
• style
• type = default = 'button'
• text this is the visually hidden text that describes what your button does
• reset = if true, this will add a button reset class to the button
• className _ by default button reset and transparent button class are added_

We use SemVer for versioning.

• ** Rod Lewis ** - Initial Work - StudentOfJS

MIT

over 1 billion animals are estimated to have died in the recent and ongoing bushfires in Australia. Many more are displaced and face an uncertain future, even extinction in some cases. If accessible-svelte made your day a little easier and you want to thank me, please consider helping out

• RSPCA Australia

---

⌨️ with ❤️ by StudentOfJS 😊