
Security News
Vite+ Joins the Push to Consolidate JavaScript Tooling
Evan You announces Vite+, a commercial, Rust-powered toolchain built on the Vite ecosystem to unify JavaScript development and fund open source.
@invisionag/iris-react-a11y
Advanced tools
```js import {withFocus, withKeyboardHandlers} from '@invisionag/iris-react-a11y'; ```
import {withFocus, withKeyboardHandlers} from '@invisionag/iris-react-a11y';
A collection of higher-order-components aiming to improve usability and accessability of our components.
the withFocus
hoc takes care of setting a prop hasFocus
on the component passed to it. This prop will be true
if the element is currently focused, and false
if its not. You can use it to set the appropriate styling.
There are multiple benefits to using this hoc instead of :focus
selectors:
.my-component:focus .my-child {}
withFocus
hoc removes focus styling when an element was clicked with the mouseExample:
import {withFocus} from '@invisionag/iris-react-a11y';
const Component = ({ hasFocus, ...props }) => <div style={{ color: hasFocus ? 'red' : 'blue'}} {...props}>Lorem</div>
const FocusableComponent = withFocus(Component);
class App extends React.Component{
render() {
return <FocusableComponent />
}
}
The withKeyboardHandlers
hoc listens to keydown / keyup events on the component and triggers mousedown / mouseup & click events on the passed component respectively.
This makes it easier to implement keyboard navigation of interactable ui elements.
Example:
import {withKeyboardHandlers} from '@invisionag/iris-react-a11y';
const Component = props => <div {...props}>Lorem</div>
const KeyboardInteractableComponent = withKeyboardHandlers(Component);
class App extends React.Component{
render() {
// enter and space keyup while focused will trigger onClick handler
return <KeyboardInteractableComponent onClick={console.log}/>
}
}
FAQs
```js import {withFocus, withKeyboardHandlers} from '@invisionag/iris-react-a11y'; ```
We found that @invisionag/iris-react-a11y demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 22 open source maintainers 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
Evan You announces Vite+, a commercial, Rust-powered toolchain built on the Vite ecosystem to unify JavaScript development and fund open source.
Security News
Ruby Central’s incident report on the RubyGems.org access dispute sparks backlash from former maintainers and renewed debate over project governance.
Research
/Security News
Socket researchers uncover how threat actors weaponize Discord across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.