Merge pull request #153 from unicef/fix/accessibility-badge-status

Fix aria-live and role for UAsyncBadge
unicef · Mar 12, 2024 · ff0ca6b · ff0ca6b
2 parents cc448cb + 3cf2836
commit ff0ca6b
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@unicef/material-ui",
-  "version": "0.12.3",
+  "version": "0.12.4",
   "description": "UNICEF theme and components of material-ui for react",
   "main": "index.js",
   "files": [

diff --git a/src/components/UAsyncBadge/UAsyncBadge.js b/src/components/UAsyncBadge/UAsyncBadge.js
@@ -30,7 +30,14 @@ const useStyles = makeStyles(theme => ({
 /**
  * UAsyncBadge is a component to display async operation status perform in the application
  */
-export default function UAsyncBadge({ variant, text, visible, onReset }) {
+export default function UAsyncBadge({
+  variant,
+  text,
+  visible,
+  ariaRole,
+  ariaLive,
+  onReset,
+}) {
   const classes = useStyles()
   const chipRef = useRef()
 
@@ -50,8 +57,8 @@ export default function UAsyncBadge({ variant, text, visible, onReset }) {
       {visible && (
         <Chip
           ref={chipRef}
-          role="status"
-          aria-live="polite"
+          role={ariaRole}
+          aria-live={ariaLive}
           className={`${classes.chip} ${classes[variant]}`}
           avatar={
             variant === 'loading' ? (
@@ -80,4 +87,13 @@ UAsyncBadge.propTypes = {
   visible: PropTypes.bool,
   /** trigger reset of the badge */
   onReset: PropTypes.func,
+  /** Aria role of the badge */
+  ariaRole: PropTypes.oneOf(['log', 'status', 'alert']),
+  /** Aria live of the badge */
+  ariaLive: PropTypes.oneOf(['polite', 'assertive', 'off']),
+}
+
+UAsyncBadge.defaultTypes = {
+  ariaRole: 'alert',
+  ariaLive: 'assertive',
 }