Accessibility in React Progress button component

30 Jan 20232 minutes to read

ARIA attributes

The web accessibility makes web content and web applications more accessible for people with disabilities. Mostly, it helps in dynamic content change and development of advanced user interface controls with AJAX, HTML, JavaScript, and related technologies. The ProgressButton provides a built-in compliance with WAI-ARIA specifications. The WAI-ARIA support is achieved using the aria-label, aria-valuemin, aria-valuemax, and aria-valuenow attributes in the ProgressButton. It helps by providing information about the widget for assistive technology in the screen readers.

Properties	Functionality
aria-label	Indicates the text content of the ProgressButton.
aria-valuemin	Indicates the minimum value for the ProgressButton.
aria-valuemax	Indicates the maximum value for the ProgressButton.
aria-valuenow	Indicates the current value for the ProgressButton.

Keyboard interaction

Keyboard shortcuts	Actions
Enter/Space	Starts the progress.

app.jsx

import { ProgressButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
function App() {
    return (<ProgressButtonComponent content='Spin Left' enableProgress={true}/>);
}
export default App;
ReactDom.render(<App />, document.getElementById('progress-button'));

app.tsx

import { ProgressButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {
  return (
    <ProgressButtonComponent content='Spin Left' enableProgress= {true}/>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('progress-button'));