dayjo / react-character-map Goto Github PK

When using this component in my project I noticed console warnings:

Warning: Each child in an array or iterator should have a unique "key" prop

I was able to correct this in the dist version of the code by adding unique keys to iterated elements, I'll open a PR here with those fixes.

When using this component I noticed a couple of accessibility issues we can fix. In addition it would be useful to get a more expert accessibility review.

Issues noted

Unable to tab past the categories

When focusing on the component, I am unable to tab past selecting the categories: I have to use my mouse.

Screen reader announcements can be improved

Focus highlights are not completely visible.

Use of a href links should be for navigation, these elements should be buttons

This is in reference to 10up's Insert Special Characters WordPress plugin. This issue regarding improvement to the plugin's translation support mentions there are a few pieces of text in this package that are not currently translatable.

I think the solution for this would be to provide defaults in this component (the current text) that can be overridden via props. Then we can pass the props in from downstream, and this repo wouldn't have to implement its own translation.

I'm aiming to submit a PR in the next 1-2 days, unless you would prefer to handle it, @Dayjo.

Hi, greetings, I like this library is usefully for a feature that I'm working, but maybe I want upgrade a bit the component, with hooks and more custom properties for the classnames or disable the search bar and only leave the categories list, are you interested in those changes if I send a pr soon ? :)

Overview.
The character map order is mostly ASCII-related but doesn't really make a lot of human sense, and there are a lot of characters. Making it searchable would enhance usability.

Describe the solution you'd like
Search input that filters on a basic string search that matches from the beginning of string (want to be able to search for a without it matching almost everything, for instance)

The new character and category introduced in #25 weren't shipped in 0.4.0. The latest commit of dist/chars.json is two years ago.

For @adamsilverstein:

As I was working on styling this component in our plugin, I noticed in the generated HTML that the ul containing the filter has the charMap--category-menu class and an aria-label of Categories, whereas the actual ul for the list of categories gets the same class but does not get the aria-label. So two things:

• The aria-label needs to be assigned to the correct element
• The filter ul should get a different class to be correct and for targeting - perhaps charMap--filter

The newly added "Music" characters in v0.4.3 is present in /src but not in /dist.

The dist/ directory doesn't contain the latest changes. I suppose the build step was missed?