React Accessibility (a11y)

eslint-plugin-jsx-a11y - npm

A little semantic HTML trick for React components — Queen Raae

Card can have an element prop

import React from "react";

export function Card({ element: Element = "div", children }) {
    return <Element>{children}</Element>;
}

<Card element="aside">
    Something related to the article but a little outside of the normal flow.
</Card>

[[advanced-react-patterns#Solution: Prop Collections & Getters]]

export const getClickOnEnterOrSpacebarProps = (props: UnknownObject) => ({
  role: 'button',
  className: 'cursor-pointer',
  tabIndex: 0,
  onKeyDown: triggerClickOnEnterKey,
  onKeyUp: triggerClickOnSpacebar,
  ...props,
});

---

Last update: 2023-04-24