React Suite 5 Release Improved Support for Accessibility 🎉 | by Simon Guo | Reac...
source link: https://medium.com/rsuite/react-suite-5-release-improved-support-for-accessibility-f6d28ead79da
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
React Suite 5 Release Improved Support for Accessibility 🎉
It has been nearly two years since the first version of v4. During this time, more than 30 versions of v4 have been iterated and many new features have been added. More and more developers are starting to use React Suite and participating in function development and improvement. And the developers who have been making valuable suggestions to us, we thank you again. I hope React Suite can accompany your product to continue to grow, and also hope to serve more developers.
The accessibility and scalability of components are improved in React Suite 5. The following will introduce in detail the new features and how to upgrade from 4.x
to 5.0
.
Major changes ✨
Improve accessibility
It is our hope that more users can use barrier-free use of products developed by React Suite. We will improve each component provided by React Suite in multiple scenarios such as keyboard operation and screen reading devices.
Accessibility
React Suite follows the WAI-ARIA standard. All components have been refactored to have appropriate attributes and keyboard interaction functions out of the box.
Add a set of high contrast themes
In React Suite v4, we refer to the 《Web Content Accessibility Guidelines (WCAG) 》 standard for color contrast requirements, and have made great improvements to the components to meet most users. We still hope to improve on this basis and take care of a small number of people with visual impairments. React Suite officially provides a total of 3 sets of themes (light, dark, high-contrast).
Use SVG Icon instead of Icon font
Icon font has some rendering problems, which makes the icon blurry, the need to load the font file, and the content area flickers. For better accessibility, we decided to prefer SVG Icon. And can be well compatible with third-party icon resources.
import GearIcon from "@rsuite/icons/Gear";render(<GearIcon />);// output
<svg>
<path d="M11.967 ..."></path>
<path d="M8 10a2 2 0 10.001-3.999A2 2 0 008 10zm0 1a3 3 0 110-6 3 3 0 010 6z"></path>
</svg>;
Support CSS variables
Current mainstream browsers already support CSS variables. We plan to provide a set of component CSS variable configurations to make theme customization and theme switching more convenient.
Refactoring React Class Components with Hooks
We refactored most of our components using function component and adopted the new features brought by React Hooks to enhance the development experience.
Import on Demand
When importing components in v4, you need to distinguish between cjs and esm. In v5 this is automatic.
// v4: cjs
import Button from "rsuite/lib/Button";
// v4: esm
import Button from "rsuite/es/Button";// v5
import Button from "rsuite/Button";
Improvements to Form
- Improve the style of Form in plain text mode
- Rename Form related components
Rename FormGroup to Form.Group
Rename FormControl to Form.Control
Rename ControlLabel to Form.ControlLabel
Rename ErrorMessage to Form.ErrorMessage
Rename HelpBlock to Form.HelpText
- Form validation supports object structure
const model = SchemaModel({
username: StringType().isRequired("Username required"),
tags: ArrayType().of(StringType("The tag should be a string").isRequired()),
role: ObjectType.shape({
name: StringType().isRequired("Name required"),
permissions: ArrayType().isRequired("Permissions required"),
}),
});const checkResult = model.check({
username: "foobar",
tags: ["Sports", "Games", 10],
role: { name: "administrator" },
});console.log(checkResult);
output:
{
username: { hasError: false },
tags: {
hasError: true,
array: [
{ hasError: false },
{ hasError: false },
{ hasError: true, errorMessage: 'The tag should be a string' }
]
},
role: {
hasError: true,
object: {
name: { hasError: false },
permissions: { hasError: true, errorMessage: 'Permissions required' }
}
}
};
For detailed usage, please read: Form Validation and Schema
Added support for srcSet, sizes,imgProps on Avatar
srcSet
: The srcSet attribute for the img element. Use this attribute for responsive image display.sizes
: The sizes attribute for the img element.imgProps
: Attributes applied to the img element if the component is used to display an image.
Added support onChangeCommitted
on Slider and RangeSlider
The difference between onChangeCommitted
and onChange
is that onChange
is triggered every time the value changes, while onChangeCommitted
is a callback that is triggered after the mouseup
event is triggered and the value changes.
Improvements to DatePicker and DateRangePicker
- DatePicker and DateRangePicker support keyboard input.
- DateRangePicker can only select date before, and time can be selected in v5
<DateRangePicker format="yyyy-MM-dd HH:mm:ss" />
Add support for color
on Badge
<Badge color="red">Red</Badge>
<Badge color="orange">Orange</Badge>
<Badge color="yellow">Yellow</Badge>
Improvements to Table
- Refactor Table
Use react hooks to refactor the Table and improve the performance when the table scrolls. The onDataUpdated
and bodyRef
props are deprecated.
For some components to be rendered inside the table, the body container of the table can be obtained through bodyRef
before. Now we can get the container directly through the ref
of Table
.
// v4
const bodyRef = useRef();
return (
<>
<Table
bodyRef={(body) => {
bodyRef.current = body;
}}
/>
<CheckPicker container={() => bodyRef.current} />
</>
);// v5
const ref = useRef();
return (
<>
<Table ref={ref} />
<CheckPicker container={() => ref.current.body} />
</>
);
- Add support for
rowSpan
const data = [
{
city: "New Gust",
name: "Janis",
rowspan: 2,
},
{
city: "New Gust",
name: "Ernest Schuppe Anderson",
},
{
city: "Maria Junctions",
name: "Alessandra",
rowspan: 3,
},
{
city: "Maria Junctions",
name: "Margret",
},
{
city: "Maria Junctions",
name: "Emiliano",
},
];
return (
<Table data={data}>
<Column
width={100}
verticalAlign="middle"
rowSpan={(rowData) => {
return rowData.rowspan;
}}
>
<HeaderCell>Name</HeaderCell>
<Cell dataKey="city" />
</Column>
<Column width={100}>
<HeaderCell />
<Cell dataKey="name" />
</Column>
</Table>
);
Add support for TagInput
The enhancement of Input supports input tags and management tags.
import TagInput from "rsuite/TagInput";return (
<TagInput
defaultValue={["HTML", "CSS"]}
trigger={["Enter", "Space", "Comma"]}
/>
);
Improvements to Carousel
Support onSelect
, onSlideEnd
, onSlideStart
on <Carousel>
onSelect
: Callback fired when the active item changesonSlideEnd
: Callback fired when a slide transition endsonSlideStart
: Callback fired when a slide transition starts
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK