Security News
Combatting Alert Fatigue by Prioritizing Malicious Intent
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
@accessible/button
Advanced tools
An accessible button component for React that provides interop between real `` elements and fake ones, e.g. ``
npm i @accessible/button
An accessible button component for React that provides interop between real <button>
elements and fake ones, e.g. <div role='button'>
.
To do so, this component attaches the onClick
handler from its child component to the keyboard
events for space
and enter
. It also adds role='button'
and tabIndex={0}
properties, though
this behavior can be overridden by providing those props to the child component e.g. <Button><div tabIndex={-1}></Button>
.
In designing accessible libraries, we just don't know if our users are going to do the right thing
i.e. using a <button>
for buttons, rather than a <div>
, <span>
, or <a>
. This component
provides interoperability between <button>
elements and those faux button elements.
Check out the example on CodeSandbox
import Button from '@accessible/button'
const ComponentA = () => (
// Adds `space` and `enter` keydown handlers to the div,
// also adds role='button' and tabIndex='0', both
// of which can be overridden by providing those
// props on your <div>
<Button>
<div onClick={console.log} />
</Button>
// <div role='button' tabindex='0'/>
)
const ComponentB = () => (
// Won't break real buttons
<Button>
<button onClick={console.log} />
</Button>
)
const MyButton = styled.button``
const ComponentC = () => (
// Won't break real buttons, period.
<Button>
<MyButton onClick={console.log} />
</Button>
)
Prop | Type | Default | Required? | Description |
---|---|---|---|---|
children | React.ReactElement | undefined | Yes | The component you want to turn into a button that handles focus and space , enter keydown events. |
MIT
FAQs
An accessible button component for React that provides interop between real elements and fake ones, e.g.
The npm package @accessible/button receives a total of 2,026 weekly downloads. As such, @accessible/button popularity was classified as popular.
We found that @accessible/button demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.