seanmcp / a11y-react-emoji

⚛️ An accessible Emoji component for React applications

👋 Hey, my name is SeanMcP. I'm interested in using technology to help others, especially in the field of education. If you're interested in building education technology, I'd love to connect.

a11y-react-emoji's Issues

Make `EmojiProps` interface an extension of `HTMLSpanElement`

I believe the EmojiProps interface should extend the HTMLSpanElement type. That way, additional <span> attributes can be directly passed as props to the Emoji component without raising type errors in TypeScript.

Recommendation:

interface EmojiProps extends React.HTMLAttributes<HTMLSpanElement> {
  label?: string;
  symbol: string;
}

Safely permits usage such as:

<Emoji label="dog" symbol="🐕" className="className" />

Find accurate `react`, `react-dom` peer dependencies

Find the earliest version of React that still works with a11y-react-emoji and update the peer dependency accordingly.

Use `undefined` instead of `null` for `aria-label` and `aria-hidden` attributes

When no label prop is specified, the type of aria-label should be undefined instead of null. Same goes for aria-hidden when a label is passed. This aligns with the official React type definitions for both attributes.

Type of aria-label:

(JSX attribute) React.AriaAttributes['aria-label']?: string | undefined

Type of aria-hidden:

(JSX attribute) React.AriaAttributes['aria-hidden']?: boolean | "true" | "false" | undefined

Add a test case for passed props

a11y-react-emoji/src/Emoji.test.ts

Line 6 in dffb4c8

className: 'className'

Check to make sure that className makes it to the final component.

Increased overall bundle.js by 4.4MB

Ouch. Why is that? It seems like this lib should just be generating the correct html, like <span aria-label="positive" role="img">😁</span>?

Support React 17+

a11y-react-emoji/package.json

Lines 23 to 24 in 24266b0

	"react": ">=16",
	"react-dom": ">=16"

See example: kirillpchernov/a11y-react-emoji@711aa1a

[Discussion] Accept children prop for emoji

The current API for Emoji requires you pass the emoji string to a symbol prop. This is fine and doesn't need changing.

But what about also accepting the emoji passed as children? The new API would work like this:

<Emoji label="a buzzing bee">🐝</Emoji>

I think children is what the user would expect. The tradeoff is that we would need to handle the scenario where both symbol and children are passed. Who would win in that instance? Or should an error be thrown?

Add a changelog

Follow the pattern here: https://keepachangelog.com/en/1.0.0/

Add a changelog

I like the format from "Keep a Changelog", but I'm open to other suggestions.

Questions to consider:

• Should this go back and document each previous version?

Add contributing guidelines

• Find a format somewhere
• Adapt it for this repo

Update dev dependencies

Resolve the following:

Update react peer dependency

Use caret to peg peer dependency for react in the same manner as react-dom. See this answer on StackOverflow.

Update peer dependencies

Will the pending release of React 17, the React peer dependencies should be updated. I think >=16 should world, but it's worth testing out.