@dhis2-ui/alert 10.19.4 → 10.20.0

package/build/cjs/alert-bar/action.js

@@ -22,14 +22,15 @@ class Action extends _react.Component {
     });
   }
   render() {
-    return /*#__PURE__*/_react.default.createElement("span", {
+    return /*#__PURE__*/_react.default.createElement("button", {
+      type: "button",
       onClick: this.onClick,
       "data-test": this.props.dataTest,
-      className: _style.default.dynamic([["918162538", [_uiConstants.spacers.dp12]]])
+      className: _style.default.dynamic([["2865572695", [_uiConstants.spacers.dp12, _uiConstants.theme.focus]]])
     }, this.props.label, /*#__PURE__*/_react.default.createElement(_style.default, {
-      id: "918162538",
-      dynamic: [_uiConstants.spacers.dp12]
-    }, [`span.__jsx-style-dynamic-selector{margin-inline-end:${_uiConstants.spacers.dp12};-webkit-text-decoration:underline;text-decoration:underline;white-space:nowrap;}`, "span.__jsx-style-dynamic-selector:hover{cursor:pointer;}"]));
+      id: "2865572695",
+      dynamic: [_uiConstants.spacers.dp12, _uiConstants.theme.focus]
+    }, [`button.__jsx-style-dynamic-selector{margin-inline-end:${_uiConstants.spacers.dp12};padding:0;border:none;background:transparent;color:inherit;font:inherit;-webkit-text-decoration:underline;text-decoration:underline;white-space:nowrap;}`, "button.__jsx-style-dynamic-selector:hover{cursor:pointer;}", `button.__jsx-style-dynamic-selector:focus{outline:3px solid ${_uiConstants.theme.focus};}`, "button.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}"]));
   }
 }
 exports.Action = Action;

package/build/cjs/alert-bar/alert-bar.e2e.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithOnHidden = exports.WithMessage = exports.PermanentWithActions = exports.Permanent = exports.HiddenProp = exports.DisabledIcon = exports.Default = exports.CustomIcon = exports.CustomDuration = void 0;
+exports.default = exports.WithOnHidden = exports.WithMessage = exports.PermanentWithActions = exports.Permanent = exports.HiddenProp = exports.DisabledIcon = exports.Default = exports.CustomIcon = exports.CustomDuration = exports.Critical = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _index = require("./index.js");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -13,6 +13,10 @@ var _default = exports.default = {
 };
 const Default = () => /*#__PURE__*/_react.default.createElement(_index.AlertBar, null, "Default");
 exports.Default = Default;
+const Critical = () => /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
+  critical: true
+}, "Critical");
+exports.Critical = Critical;
 const CustomDuration = () => /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
   duration: 2000
 }, "Custom duration");

package/build/cjs/alert-bar/alert-bar.js

@@ -122,7 +122,10 @@ const AlertBar = ({
     success: success,
     warning: warning,
     info: info
-  }), /*#__PURE__*/_react.default.createElement(_message.Message, null, children), /*#__PURE__*/_react.default.createElement(_actions.Actions, {
+  }), /*#__PURE__*/_react.default.createElement(_message.Message, {
+    critical: critical,
+    dataTest: `${dataTest}-message`
+  }, children), /*#__PURE__*/_react.default.createElement(_actions.Actions, {
     actions: actions,
     hide: runHideAnimation,
     dataTest: dataTest

package/build/cjs/alert-bar/dismiss.js

@@ -9,18 +9,21 @@ var _uiConstants = require("@dhis2/ui-constants");
 var _uiIcons = require("@dhis2/ui-icons");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
+var _index = _interopRequireDefault(require("../locales/index.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Dismiss = ({
   onClick,
   dataTest
-}) => /*#__PURE__*/_react.default.createElement("div", {
+}) => /*#__PURE__*/_react.default.createElement("button", {
+  type: "button",
   onClick: onClick,
   "data-test": dataTest,
-  className: _style.default.dynamic([["1892313381", [_uiConstants.spacers.dp16]]])
+  "aria-label": _index.default.t('Dismiss'),
+  className: _style.default.dynamic([["503636260", [_uiConstants.spacers.dp16, _uiConstants.theme.focus]]])
 }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconCross24, null), /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "1892313381",
-  dynamic: [_uiConstants.spacers.dp16]
-}, [`div.__jsx-style-dynamic-selector{margin-inline-start:${_uiConstants.spacers.dp16};min-height:32px;min-width:32px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border-radius:5px;}`, "div.__jsx-style-dynamic-selector:hover{cursor:pointer;background:rgba(0,0,0,0.15);}", "div.__jsx-style-dynamic-selector:active{background:rgba(0,0,0,0.25);}", "div.__jsx-style-dynamic-selector svg{width:18px;height:18px;}"]));
+  id: "503636260",
+  dynamic: [_uiConstants.spacers.dp16, _uiConstants.theme.focus]
+}, [`button.__jsx-style-dynamic-selector{margin-inline-start:${_uiConstants.spacers.dp16};min-height:32px;min-width:32px;padding:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border:none;border-radius:5px;background:transparent;color:inherit;}`, "button.__jsx-style-dynamic-selector:hover{cursor:pointer;background:rgba(0,0,0,0.15);}", "button.__jsx-style-dynamic-selector:active{background:rgba(0,0,0,0.25);}", `button.__jsx-style-dynamic-selector:focus{outline:3px solid ${_uiConstants.theme.focus};}`, "button.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", "button.__jsx-style-dynamic-selector svg{width:18px;height:18px;}"]));
 exports.Dismiss = Dismiss;
 Dismiss.propTypes = {
   dataTest: _propTypes.default.string.isRequired,

package/build/cjs/alert-bar/features/accessibility/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
+(0, _cypressCucumberPreprocessor.Then)('the AlertBar message has the status role', () => {
+  cy.get('[data-test="dhis2-uicore-alertbar-message"]').find('[role="status"]').should('exist');
+});
+(0, _cypressCucumberPreprocessor.Then)('the AlertBar message has the alert role', () => {
+  cy.get('[data-test="dhis2-uicore-alertbar-message"]').find('[role="alert"]').should('exist');
+});
+(0, _cypressCucumberPreprocessor.Then)('the icon is hidden from assistive technologies', () => {
+  cy.get('[data-test="dhis2-uicore-alertbar-icon"]').should('have.attr', 'aria-hidden', 'true');
+});
+(0, _cypressCucumberPreprocessor.Then)('the dismiss control is a button labelled "Dismiss"', () => {
+  cy.get('[data-test="dhis2-uicore-alertbar-dismiss"]').should('match', 'button').and('have.attr', 'aria-label', 'Dismiss');
+});

package/build/cjs/alert-bar/features/accessibility.feature

@@ -0,0 +1,17 @@
+Feature: AlertBar accessibility
+
+    Scenario: A default AlertBar message is a polite live region
+        Given a default AlertBar is rendered
+        Then the AlertBar message has the status role
+
+    Scenario: A critical AlertBar message is an assertive live region
+        Given a critical AlertBar is rendered
+        Then the AlertBar message has the alert role
+
+    Scenario: The icon is hidden from assistive technologies
+        Given a default AlertBar is rendered
+        Then the icon is hidden from assistive technologies
+
+    Scenario: The dismiss control is a labelled button
+        Given a default AlertBar is rendered
+        Then the dismiss control is a button labelled "Dismiss"

package/build/cjs/alert-bar/features/common/index.js

@@ -5,6 +5,10 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
   cy.visitStory('AlertBar', 'Default');
   cy.get('[data-test="dhis2-uicore-alertbar"]').should('be.visible');
 });
+(0, _cypressCucumberPreprocessor.Given)('a critical AlertBar is rendered', () => {
+  cy.visitStory('AlertBar', 'Critical');
+  cy.get('[data-test="dhis2-uicore-alertbar"]').should('be.visible');
+});
 (0, _cypressCucumberPreprocessor.Given)('the AlertBar is rendered', () => {
   cy.get('[data-test="dhis2-uicore-alertbar"]').should('exist');
   cy.get('[data-test="dhis2-uicore-alertbar"]').should('be.visible');

package/build/cjs/alert-bar/icon.js

@@ -60,6 +60,7 @@ const Icon = ({
   }
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": dataTest,
+    "aria-hidden": "true",
     className: _style.default.dynamic([["4176481777", [_uiConstants.spacers.dp12]]])
   }, /*#__PURE__*/_react.default.isValidElement(icon) ? icon : /*#__PURE__*/_react.default.createElement(StatusIcon, {
     valid: success,

package/build/cjs/alert-bar/message.js

@@ -6,16 +6,43 @@ Object.defineProperty(exports, "__esModule", {
 exports.Message = void 0;
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Screen readers don't announce a role="status" region that has text on
+// mount, so the text is added after a delay. role="alert" is announced on
+// insertion and needs no delay. The visible copy is rendered separately so
+// the delay doesn't shift the layout.
+const ANNOUNCE_DELAY = 100;
 const Message = ({
-  children
-}) => /*#__PURE__*/_react.default.createElement("div", {
-  className: "jsx-2181391309"
-}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "2181391309"
-}, ["div.jsx-2181391309{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}"]));
+  children,
+  critical,
+  dataTest
+}) => {
+  const [announceable, setAnnounceable] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    if (critical) {
+      return;
+    }
+    const timeout = setTimeout(() => setAnnounceable(true), ANNOUNCE_DELAY);
+    return () => clearTimeout(timeout);
+  }, [critical]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-test": dataTest,
+    className: "jsx-2192918634"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    "aria-hidden": "true",
+    className: "jsx-2192918634"
+  }, children), /*#__PURE__*/_react.default.createElement("span", {
+    role: critical ? 'alert' : 'status',
+    className: "jsx-2192918634" + " " + "live-region"
+  }, critical || announceable ? children : null), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "2192918634"
+  }, ["div.jsx-2192918634{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".live-region.jsx-2192918634{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;-webkit-clip:rect(0,0,0,0);clip:rect(0,0,0,0);white-space:nowrap;border:0;}"]));
+};
 exports.Message = Message;
 Message.propTypes = {
-  children: _propTypes.default.string.isRequired
+  children: _propTypes.default.string.isRequired,
+  dataTest: _propTypes.default.string.isRequired,
+  critical: _propTypes.default.bool
 };

package/build/cjs/locales/en/translations.json

@@ -0,0 +1,3 @@
+{
+    "Dismiss": "Dismiss"
+}

package/build/cjs/locales/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+var _translations = _interopRequireDefault(require("./en/translations.json"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+//------------------------------------------------------------------------------
+// <auto-generated>
+// This code was generated by d2-i18n-generate.
+//
+// Changes to this file may cause incorrect behavior and will be lost if
+// the code is regenerated.
+// </auto-generated>
+//------------------------------------------------------------------------------
+
+const namespace = 'default';
+
+// Use 'deep' = true and 'overwrite' = false to add to, but not overwrite,
+// custom translations from the datastore (added by the app adapter)
+
+_d2I18n.default.addResourceBundle('en', namespace, _translations.default, true, false);
+_d2I18n.default.addResourceBundle('en', namespace, _translations.default, true, false);
+var _default = exports.default = _d2I18n.default;

package/build/es/alert-bar/action.js

@@ -2,7 +2,7 @@ import _JSXStyle from "styled-jsx/style";
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { spacers } from '@dhis2/ui-constants';
+import { spacers, theme } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 class Action extends Component {
@@ -14,14 +14,15 @@ class Action extends Component {
     });
   }
   render() {
-    return /*#__PURE__*/React.createElement("span", {
+    return /*#__PURE__*/React.createElement("button", {
+      type: "button",
       onClick: this.onClick,
       "data-test": this.props.dataTest,
-      className: _JSXStyle.dynamic([["918162538", [spacers.dp12]]])
+      className: _JSXStyle.dynamic([["2865572695", [spacers.dp12, theme.focus]]])
     }, this.props.label, /*#__PURE__*/React.createElement(_JSXStyle, {
-      id: "918162538",
-      dynamic: [spacers.dp12]
-    }, [`span.__jsx-style-dynamic-selector{margin-inline-end:${spacers.dp12};-webkit-text-decoration:underline;text-decoration:underline;white-space:nowrap;}`, "span.__jsx-style-dynamic-selector:hover{cursor:pointer;}"]));
+      id: "2865572695",
+      dynamic: [spacers.dp12, theme.focus]
+    }, [`button.__jsx-style-dynamic-selector{margin-inline-end:${spacers.dp12};padding:0;border:none;background:transparent;color:inherit;font:inherit;-webkit-text-decoration:underline;text-decoration:underline;white-space:nowrap;}`, "button.__jsx-style-dynamic-selector:hover{cursor:pointer;}", `button.__jsx-style-dynamic-selector:focus{outline:3px solid ${theme.focus};}`, "button.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}"]));
   }
 }
 Action.propTypes = {

package/build/es/alert-bar/alert-bar.e2e.stories.js

@@ -5,6 +5,9 @@ export default {
   title: 'AlertBar'
 };
 export const Default = () => /*#__PURE__*/React.createElement(AlertBar, null, "Default");
+export const Critical = () => /*#__PURE__*/React.createElement(AlertBar, {
+  critical: true
+}, "Critical");
 export const CustomDuration = () => /*#__PURE__*/React.createElement(AlertBar, {
   duration: 2000
 }, "Custom duration");

package/build/es/alert-bar/alert-bar.js

@@ -114,7 +114,10 @@ const AlertBar = ({
     success: success,
     warning: warning,
     info: info
-  }), /*#__PURE__*/React.createElement(Message, null, children), /*#__PURE__*/React.createElement(Actions, {
+  }), /*#__PURE__*/React.createElement(Message, {
+    critical: critical,
+    dataTest: `${dataTest}-message`
+  }, children), /*#__PURE__*/React.createElement(Actions, {
     actions: actions,
     hide: runHideAnimation,
     dataTest: dataTest

package/build/es/alert-bar/dismiss.js

@@ -1,19 +1,22 @@
 import _JSXStyle from "styled-jsx/style";
-import { spacers } from '@dhis2/ui-constants';
+import { spacers, theme } from '@dhis2/ui-constants';
 import { IconCross24 } from '@dhis2/ui-icons';
 import PropTypes from 'prop-types';
 import React from 'react';
+import i18n from '../locales/index.js';
 const Dismiss = ({
   onClick,
   dataTest
-}) => /*#__PURE__*/React.createElement("div", {
+}) => /*#__PURE__*/React.createElement("button", {
+  type: "button",
   onClick: onClick,
   "data-test": dataTest,
-  className: _JSXStyle.dynamic([["1892313381", [spacers.dp16]]])
+  "aria-label": i18n.t('Dismiss'),
+  className: _JSXStyle.dynamic([["503636260", [spacers.dp16, theme.focus]]])
 }, /*#__PURE__*/React.createElement(IconCross24, null), /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "1892313381",
-  dynamic: [spacers.dp16]
-}, [`div.__jsx-style-dynamic-selector{margin-inline-start:${spacers.dp16};min-height:32px;min-width:32px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border-radius:5px;}`, "div.__jsx-style-dynamic-selector:hover{cursor:pointer;background:rgba(0,0,0,0.15);}", "div.__jsx-style-dynamic-selector:active{background:rgba(0,0,0,0.25);}", "div.__jsx-style-dynamic-selector svg{width:18px;height:18px;}"]));
+  id: "503636260",
+  dynamic: [spacers.dp16, theme.focus]
+}, [`button.__jsx-style-dynamic-selector{margin-inline-start:${spacers.dp16};min-height:32px;min-width:32px;padding:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border:none;border-radius:5px;background:transparent;color:inherit;}`, "button.__jsx-style-dynamic-selector:hover{cursor:pointer;background:rgba(0,0,0,0.15);}", "button.__jsx-style-dynamic-selector:active{background:rgba(0,0,0,0.25);}", `button.__jsx-style-dynamic-selector:focus{outline:3px solid ${theme.focus};}`, "button.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", "button.__jsx-style-dynamic-selector svg{width:18px;height:18px;}"]));
 Dismiss.propTypes = {
   dataTest: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired

package/build/es/alert-bar/features/accessibility/index.js

@@ -0,0 +1,13 @@
+import { Then } from '@badeball/cypress-cucumber-preprocessor';
+Then('the AlertBar message has the status role', () => {
+  cy.get('[data-test="dhis2-uicore-alertbar-message"]').find('[role="status"]').should('exist');
+});
+Then('the AlertBar message has the alert role', () => {
+  cy.get('[data-test="dhis2-uicore-alertbar-message"]').find('[role="alert"]').should('exist');
+});
+Then('the icon is hidden from assistive technologies', () => {
+  cy.get('[data-test="dhis2-uicore-alertbar-icon"]').should('have.attr', 'aria-hidden', 'true');
+});
+Then('the dismiss control is a button labelled "Dismiss"', () => {
+  cy.get('[data-test="dhis2-uicore-alertbar-dismiss"]').should('match', 'button').and('have.attr', 'aria-label', 'Dismiss');
+});

package/build/es/alert-bar/features/accessibility.feature

@@ -0,0 +1,17 @@
+Feature: AlertBar accessibility
+
+    Scenario: A default AlertBar message is a polite live region
+        Given a default AlertBar is rendered
+        Then the AlertBar message has the status role
+
+    Scenario: A critical AlertBar message is an assertive live region
+        Given a critical AlertBar is rendered
+        Then the AlertBar message has the alert role
+
+    Scenario: The icon is hidden from assistive technologies
+        Given a default AlertBar is rendered
+        Then the icon is hidden from assistive technologies
+
+    Scenario: The dismiss control is a labelled button
+        Given a default AlertBar is rendered
+        Then the dismiss control is a button labelled "Dismiss"

package/build/es/alert-bar/features/common/index.js

@@ -3,6 +3,10 @@ Given('a default AlertBar is rendered', () => {
   cy.visitStory('AlertBar', 'Default');
   cy.get('[data-test="dhis2-uicore-alertbar"]').should('be.visible');
 });
+Given('a critical AlertBar is rendered', () => {
+  cy.visitStory('AlertBar', 'Critical');
+  cy.get('[data-test="dhis2-uicore-alertbar"]').should('be.visible');
+});
 Given('the AlertBar is rendered', () => {
   cy.get('[data-test="dhis2-uicore-alertbar"]').should('exist');
   cy.get('[data-test="dhis2-uicore-alertbar"]').should('be.visible');

package/build/es/alert-bar/icon.js

@@ -53,6 +53,7 @@ const Icon = ({
   }
   return /*#__PURE__*/React.createElement("div", {
     "data-test": dataTest,
+    "aria-hidden": "true",
     className: _JSXStyle.dynamic([["4176481777", [spacers.dp12]]])
   }, /*#__PURE__*/React.isValidElement(icon) ? icon : /*#__PURE__*/React.createElement(StatusIcon, {
     valid: success,

package/build/es/alert-bar/message.js

@@ -1,14 +1,41 @@
 import _JSXStyle from "styled-jsx/style";
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+
+// Screen readers don't announce a role="status" region that has text on
+// mount, so the text is added after a delay. role="alert" is announced on
+// insertion and needs no delay. The visible copy is rendered separately so
+// the delay doesn't shift the layout.
+const ANNOUNCE_DELAY = 100;
 const Message = ({
-  children
-}) => /*#__PURE__*/React.createElement("div", {
-  className: "jsx-2181391309"
-}, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "2181391309"
-}, ["div.jsx-2181391309{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}"]));
+  children,
+  critical,
+  dataTest
+}) => {
+  const [announceable, setAnnounceable] = useState(false);
+  useEffect(() => {
+    if (critical) {
+      return;
+    }
+    const timeout = setTimeout(() => setAnnounceable(true), ANNOUNCE_DELAY);
+    return () => clearTimeout(timeout);
+  }, [critical]);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test": dataTest,
+    className: "jsx-2192918634"
+  }, /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true",
+    className: "jsx-2192918634"
+  }, children), /*#__PURE__*/React.createElement("span", {
+    role: critical ? 'alert' : 'status',
+    className: "jsx-2192918634" + " " + "live-region"
+  }, critical || announceable ? children : null), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2192918634"
+  }, ["div.jsx-2192918634{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".live-region.jsx-2192918634{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;-webkit-clip:rect(0,0,0,0);clip:rect(0,0,0,0);white-space:nowrap;border:0;}"]));
+};
 Message.propTypes = {
-  children: PropTypes.string.isRequired
+  children: PropTypes.string.isRequired,
+  dataTest: PropTypes.string.isRequired,
+  critical: PropTypes.bool
 };
 export { Message };

package/build/es/locales/en/translations.json

@@ -0,0 +1,3 @@
+{
+    "Dismiss": "Dismiss"
+}

package/build/es/locales/index.js

@@ -0,0 +1,18 @@
+//------------------------------------------------------------------------------
+// <auto-generated>
+// This code was generated by d2-i18n-generate.
+//
+// Changes to this file may cause incorrect behavior and will be lost if
+// the code is regenerated.
+// </auto-generated>
+//------------------------------------------------------------------------------
+import i18n from '@dhis2/d2-i18n';
+import enTranslations from './en/translations.json';
+const namespace = 'default';
+
+// Use 'deep' = true and 'overwrite' = false to add to, but not overwrite,
+// custom translations from the datastore (added by the app adapter)
+
+i18n.addResourceBundle('en', namespace, enTranslations, true, false);
+i18n.addResourceBundle('en', namespace, enTranslations, true, false);
+export default i18n;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/alert",
-    "version": "10.19.4",
+    "version": "10.20.0",
     "description": "UI Alert",
     "repository": {
         "type": "git",
@@ -27,15 +27,16 @@
         "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
     },
     "peerDependencies": {
+        "@dhis2/d2-i18n": "^1",
         "react": "^16.13 || ^18",
         "react-dom": "^16.13 || ^18",
         "styled-jsx": "^4"
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/portal": "10.19.4",
-        "@dhis2/ui-constants": "10.19.4",
-        "@dhis2/ui-icons": "10.19.4",
+        "@dhis2-ui/portal": "10.20.0",
+        "@dhis2/ui-constants": "10.20.0",
+        "@dhis2/ui-icons": "10.20.0",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
@@ -45,6 +46,7 @@
         "src"
     ],
     "devDependencies": {
+        "@dhis2/d2-i18n": "^1.1.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "styled-jsx": "^4.0.1"

package/src/alert-bar/action.js

@@ -1,4 +1,4 @@
-import { spacers } from '@dhis2/ui-constants'
+import { spacers, theme } from '@dhis2/ui-constants'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
@@ -10,19 +10,34 @@ class Action extends Component {
 
     render() {
         return (
-            <span onClick={this.onClick} data-test={this.props.dataTest}>
+            <button
+                type="button"
+                onClick={this.onClick}
+                data-test={this.props.dataTest}
+            >
                 {this.props.label}
                 <style jsx>{`
-                    span {
+                    button {
                         margin-inline-end: ${spacers.dp12};
+                        padding: 0;
+                        border: none;
+                        background: transparent;
+                        color: inherit;
+                        font: inherit;
                         text-decoration: underline;
                         white-space: nowrap;
                     }
-                    span:hover {
+                    button:hover {
                         cursor: pointer;
                     }
+                    button:focus {
+                        outline: 3px solid ${theme.focus};
+                    }
+                    button:focus:not(:focus-visible) {
+                        outline: none;
+                    }
                 `}</style>
-            </span>
+            </button>
         )
     }
 }

package/src/alert-bar/alert-bar.e2e.stories.js

@@ -6,6 +6,7 @@ window.onHidden = window.Cypress && window.Cypress.cy.stub()
 export default { title: 'AlertBar' }
 
 export const Default = () => <AlertBar>Default</AlertBar>
+export const Critical = () => <AlertBar critical>Critical</AlertBar>
 export const CustomDuration = () => (
     <AlertBar duration={2000}>Custom duration</AlertBar>
 )

package/src/alert-bar/alert-bar.js

@@ -129,7 +129,9 @@ const AlertBar = ({
                 warning={warning}
                 info={info}
             />
-            <Message>{children}</Message>
+            <Message critical={critical} dataTest={`${dataTest}-message`}>
+                {children}
+            </Message>
             <Actions
                 actions={actions}
                 hide={runHideAnimation}

package/src/alert-bar/dismiss.js

@@ -1,34 +1,50 @@
-import { spacers } from '@dhis2/ui-constants'
+import { spacers, theme } from '@dhis2/ui-constants'
 import { IconCross24 } from '@dhis2/ui-icons'
 import PropTypes from 'prop-types'
 import React from 'react'
+import i18n from '../locales/index.js'
 
 const Dismiss = ({ onClick, dataTest }) => (
-    <div onClick={onClick} data-test={dataTest}>
+    <button
+        type="button"
+        onClick={onClick}
+        data-test={dataTest}
+        aria-label={i18n.t('Dismiss')}
+    >
         <IconCross24 />
         <style jsx>{`
-            div {
+            button {
                 margin-inline-start: ${spacers.dp16};
                 min-height: 32px;
                 min-width: 32px;
+                padding: 0;
                 display: flex;
                 align-items: center;
                 justify-content: center;
+                border: none;
                 border-radius: 5px;
+                background: transparent;
+                color: inherit;
             }
-            div:hover {
+            button:hover {
                 cursor: pointer;
                 background: rgba(0, 0, 0, 0.15);
             }
-            div:active {
+            button:active {
                 background: rgba(0, 0, 0, 0.25);
             }
-            div :global(svg) {
+            button:focus {
+                outline: 3px solid ${theme.focus};
+            }
+            button:focus:not(:focus-visible) {
+                outline: none;
+            }
+            button :global(svg) {
                 width: 18px;
                 height: 18px;
             }
         `}</style>
-    </div>
+    </button>
 )
 
 Dismiss.propTypes = {

package/src/alert-bar/features/accessibility/index.js

@@ -0,0 +1,27 @@
+import { Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Then('the AlertBar message has the status role', () => {
+    cy.get('[data-test="dhis2-uicore-alertbar-message"]')
+        .find('[role="status"]')
+        .should('exist')
+})
+
+Then('the AlertBar message has the alert role', () => {
+    cy.get('[data-test="dhis2-uicore-alertbar-message"]')
+        .find('[role="alert"]')
+        .should('exist')
+})
+
+Then('the icon is hidden from assistive technologies', () => {
+    cy.get('[data-test="dhis2-uicore-alertbar-icon"]').should(
+        'have.attr',
+        'aria-hidden',
+        'true'
+    )
+})
+
+Then('the dismiss control is a button labelled "Dismiss"', () => {
+    cy.get('[data-test="dhis2-uicore-alertbar-dismiss"]')
+        .should('match', 'button')
+        .and('have.attr', 'aria-label', 'Dismiss')
+})

package/src/alert-bar/features/accessibility.feature

@@ -0,0 +1,17 @@
+Feature: AlertBar accessibility
+
+    Scenario: A default AlertBar message is a polite live region
+        Given a default AlertBar is rendered
+        Then the AlertBar message has the status role
+
+    Scenario: A critical AlertBar message is an assertive live region
+        Given a critical AlertBar is rendered
+        Then the AlertBar message has the alert role
+
+    Scenario: The icon is hidden from assistive technologies
+        Given a default AlertBar is rendered
+        Then the icon is hidden from assistive technologies
+
+    Scenario: The dismiss control is a labelled button
+        Given a default AlertBar is rendered
+        Then the dismiss control is a button labelled "Dismiss"

package/src/alert-bar/features/common/index.js

@@ -5,6 +5,11 @@ Given('a default AlertBar is rendered', () => {
     cy.get('[data-test="dhis2-uicore-alertbar"]').should('be.visible')
 })
 
+Given('a critical AlertBar is rendered', () => {
+    cy.visitStory('AlertBar', 'Critical')
+    cy.get('[data-test="dhis2-uicore-alertbar"]').should('be.visible')
+})
+
 Given('the AlertBar is rendered', () => {
     cy.get('[data-test="dhis2-uicore-alertbar"]').should('exist')
     cy.get('[data-test="dhis2-uicore-alertbar"]').should('be.visible')

package/src/alert-bar/icon.js

@@ -40,7 +40,7 @@ const Icon = ({ icon, success, warning, critical, info, dataTest }) => {
     }
 
     return (
-        <div data-test={dataTest}>
+        <div data-test={dataTest} aria-hidden="true">
             {React.isValidElement(icon) ? (
                 icon
             ) : (

package/src/alert-bar/message.js

@@ -1,19 +1,56 @@
 import PropTypes from 'prop-types'
-import React from 'react'
-
-const Message = ({ children }) => (
-    <div>
-        {children}
-        <style jsx>{`
-            div {
-                flex-grow: 1;
-            }
-        `}</style>
-    </div>
-)
+import React, { useEffect, useState } from 'react'
+
+// Screen readers don't announce a role="status" region that has text on
+// mount, so the text is added after a delay. role="alert" is announced on
+// insertion and needs no delay. The visible copy is rendered separately so
+// the delay doesn't shift the layout.
+const ANNOUNCE_DELAY = 100
+
+const Message = ({ children, critical, dataTest }) => {
+    const [announceable, setAnnounceable] = useState(false)
+
+    useEffect(() => {
+        if (critical) {
+            return
+        }
+
+        const timeout = setTimeout(() => setAnnounceable(true), ANNOUNCE_DELAY)
+
+        return () => clearTimeout(timeout)
+    }, [critical])
+
+    return (
+        <div data-test={dataTest}>
+            <span aria-hidden="true">{children}</span>
+            <span role={critical ? 'alert' : 'status'} className="live-region">
+                {critical || announceable ? children : null}
+            </span>
+            <style jsx>{`
+                div {
+                    flex-grow: 1;
+                }
+
+                .live-region {
+                    position: absolute;
+                    width: 1px;
+                    height: 1px;
+                    margin: -1px;
+                    padding: 0;
+                    overflow: hidden;
+                    clip: rect(0, 0, 0, 0);
+                    white-space: nowrap;
+                    border: 0;
+                }
+            `}</style>
+        </div>
+    )
+}
 
 Message.propTypes = {
     children: PropTypes.string.isRequired,
+    dataTest: PropTypes.string.isRequired,
+    critical: PropTypes.bool,
 }
 
 export { Message }

package/src/locales/en/translations.json

@@ -0,0 +1,3 @@
+{
+    "Dismiss": "Dismiss"
+}

package/src/locales/index.js

@@ -0,0 +1,21 @@
+//------------------------------------------------------------------------------
+// <auto-generated>
+// This code was generated by d2-i18n-generate.
+//
+// Changes to this file may cause incorrect behavior and will be lost if
+// the code is regenerated.
+// </auto-generated>
+//------------------------------------------------------------------------------
+import i18n from '@dhis2/d2-i18n'
+
+import enTranslations from './en/translations.json'
+
+const namespace = 'default'
+
+// Use 'deep' = true and 'overwrite' = false to add to, but not overwrite,
+// custom translations from the datastore (added by the app adapter)
+
+i18n.addResourceBundle('en', namespace, enTranslations, true, false)
+i18n.addResourceBundle('en', namespace, enTranslations, true, false)
+
+export default i18n

package/types/index.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react'
 
 export interface ActionsAction {
     label: string
-    onClick: React.MouseEventHandler<HTMLSpanElement>
+    onClick: React.MouseEventHandler<HTMLButtonElement>
 }
 
 type ActionActionTuple = [ActionsAction?, ActionsAction?]