Emerald-UI release version 1.3.1

NOTE: After releasing v1.3.0 we noticed that the new SingleSelect and SearchableSelect components were breaking while performing server side rendering in Gatsby. It was due to a PropTypes validation (we were using instanceOf(Element) for the ref prop and while building the docs, and performing the server side rendering, it crashed because Element is undefined.

This version brings more improvements on accessibility, mainly in keyboard navigation. The major change in this version is the implementation of three new components that replace the Select component. These are SingleSelect , SearchableSelect and MultipleSelect . Read on for more information on each of the features.

Chip :: Improved keyboard navigation

Keyboard navigation now covers the Chip component itself as well as the Remove button it contains. By pressing tab you’ll arrive at the Chip and then you’ll arrive at the Remove button.

Take into account that you should add an ariaLabel prop, even if you’re passing simple or complex children to the Chip, so users get the correct reading. If you pass “Item 1” as ariaLabel, the screen reader will read “Item 1” when the focus is on the Chip and “Remove Item 1” when the focus is on the Remove button.

Select :: Multiple. Improved keyboard navigation on selected items

The selected items can be accessed via keyboard and now the screen reader will read a nice label, provided that you pass an ariaLabel prop.

NOTE: This component is being deprecated. Use MultipleSelect instead.

FileUploadItem :: Improved keyboard navigation

You can now focus the FileUploadItem component itself via keyboard and the screen reader will read the appropriate info:

• File name
• Progress (if progress is passed)
• Speed (if speed is passed)
• Message (if message is passed)

It will also focus the download and cancel buttons and read the action plus the name. If the name is “file.doc”, it will read: “Download file.doc” or “Delete file.doc” depending on the button focused.

Select :: Deprecation notice

The Select component is huge and very complicated. This makes it hard to maintain and debug. Plus it has the disadvantage of making you use more code than you might need. For instance, let’s say you only need the regular Select . When you import the component, you’re importing the code and the styles for the regular component as well as the searchable and multiple variants, even if you’re not using those.

In order to make the Select component less complex and easier to maintain and also to give you the possibility to import only the code you need, we’re splitting the Select component into three new ones:

• SingleSelect: This replaces the regular usage of the Select component. It lets you select a single option from a list of options.
• SearchableSelect: This replaces the searchable variant of the Select component. It lets you select a single option from a list of options and it has a filtering capability to help you narrow down your search of the options.
• MultipleSelect: This replaces the multiple variant of the Select component. It lets you select one or more options from a list of options and it also has a filtering capability to help you narrow down your search of the options.

The Select component is being deprecated and will be removed in the next major release (2.0.0).

SingleSelect :: Added animation to footer items

Just like the TextField component, animation has been added to the footer items (helpText and errorMessage) in order to make the SingleSelect component look consistent with the rest of the form components.

SearchableSelect :: Added animation to footer items

Just like the TextField component, animation has been added to the footer items (helpText and errorMessage) in order to make the SearchableSelect component look consistent with the rest of the form components.

MultipleSelect :: Added animation to footer items

Just like the TextField component, animation has been added to the footer items (helpText and errorMessage) in order to make the MultipleSelect component look consistent with the rest of the form components.

Bug fixes

• Avatar :: The ariaHidden prop is now passed to the inner span so the screen reader doesn’t read anything.
• TextField :: The screen reader now reads the errorMessage .
• SearchForm :: The screen reader now doesn’t read “ellipsis”.
• Select :: The screen reader now doesn’t read “ellipsis” with the searchable option. NOTE: This component is deprecated. Use SearchableSelect instead.

Docs :: Pages created dynamically

The pages for each components are now being created automatically. There’s no need to create them manually with the same content as the others.

Red Indicator :: Inject ariaLabel to children

You now can define the ariaLabel prop to the children of the RedIndicator component so the screen reader can read things like “You have mail”, “There are new messages” or any other indication when it’s active.

Storybook additions

• ExpansionPanel :: Add nice ariaLabel props to the toggles.
• TableHeader :: Added knob for the checkboxDisabled prop.
• SearchForm :: Fix width to make the story look good in mobile views.