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. UseSearchableSelect
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.