(feat) order-basket: Improve a11y and styling of status tags

e2e/specs/lab-orders.spec.ts

@@ -50,8 +50,12 @@ test.describe.serial('Running laboratory order tests sequentially', () => {
       await page.getByLabel(/additional instructions/i).fill(' N/A');
     });
 
-    await test.step('Add I save the lab order form', async () => {
+    await test.step('And I save the lab order form', async () => {
       await page.getByRole('button', { name: /save order/i }).click();
+    });
+
+    await test.step('And I click the `Sign and close` button', async () => {
+      await expect(page.getByRole('status', { name: /new/i })).toBeVisible();
       await page.getByRole('button', { name: /sign and close/i }).click();
     });
 
@@ -70,7 +74,6 @@ test.describe.serial('Running laboratory order tests sequentially', () => {
 
   test('Modify a lab order', async ({ page }) => {
     const ordersPage = new OrdersPage(page);
-    const orderBasket = page.locator('[data-extension-slot-name="order-basket-slot"]');
 
     await test.step('When I visit the orders page', async () => {
       await ordersPage.goTo(patient.uuid);
@@ -101,8 +104,8 @@ test.describe.serial('Running laboratory order tests sequentially', () => {
     });
 
     await test.step('Then the order status should be changed to `Modify`', async () => {
-      await expect(orderBasket.getByText(/new/i)).not.toBeVisible();
-      await expect(orderBasket.getByText(/modify/i)).toBeVisible();
+      await expect(page.getByRole('status', { name: /new/i })).not.toBeVisible();
+      await expect(page.getByRole('status', { name: /modify/i })).toBeVisible();
     });
 
     await test.step('When I click on the `Sign and close` button', async () => {
@@ -116,7 +119,6 @@ test.describe.serial('Running laboratory order tests sequentially', () => {
 
   test('Discontinue a lab order', async ({ page }) => {
     const ordersPage = new OrdersPage(page);
-    const orderBasket = page.locator('[data-extension-slot-name="order-basket-slot"]');
 
     await test.step('When I visit the orders page', async () => {
       await ordersPage.goTo(patient.uuid);
@@ -138,7 +140,7 @@ test.describe.serial('Running laboratory order tests sequentially', () => {
     });
 
     await test.step('Then the order status should be changed to `Discontinue`', async () => {
-      await expect(orderBasket.getByText(/discontinue/i)).toBeVisible();
+      await expect(page.getByRole('status', { name: /discontinue/i })).toBeVisible();
     });
 
     await test.step('And I click on the `Sign and close` button', async () => {

packages/esm-patient-medications-app/src/drug-order-basket-panel/order-basket-item-tile.component.tsx

@@ -126,18 +126,58 @@ function OrderActionLabel({ orderBasketItem }: { orderBasketItem: DrugOrderBaske
   const { t } = useTranslation();
 
   if (orderBasketItem.isOrderIncomplete) {
-    return <span className={styles.orderActionIncompleteLabel}>{t('orderActionIncomplete', 'Incomplete')}</span>;
+    return (
+      <span
+        className={styles.orderActionIncompleteLabel}
+        role="status"
+        aria-atomic
+        aria-label={t('orderActionIncomplete', 'Incomplete')}
+      >
+        {t('orderActionIncomplete', 'Incomplete')}
+      </span>
+    );
   }
 
   switch (orderBasketItem.action) {
     case 'NEW':
-      return <span className={styles.orderActionNewLabel}>{t('orderActionNew', 'New')}</span>;
+      return (
+        <span className={styles.orderActionNewLabel} role="status" aria-atomic aria-label={t('orderActionNew', 'New')}>
+          {t('orderActionNew', 'New')}
+        </span>
+      );
     case 'RENEW':
-      return <span className={styles.orderActionRenewLabel}>{t('orderActionRenew', 'Renew')}</span>;
+      return (
+        <span
+          className={styles.orderActionRenewLabel}
+          role="status"
+          aria-atomic
+          aria-label={t('orderActionRenew', 'Renew')}
+        >
+          {t('orderActionRenew', 'Renew')}
+        </span>
+      );
     case 'REVISE':
-      return <span className={styles.orderActionRevisedLabel}>{t('orderActionRevise', 'Modify')}</span>;
+      return (
+        <span
+          className={styles.orderActionReviseLabel}
+          role="status"
+          aria-atomic
+          aria-label={t('orderActionRevise', 'Modify')}
+        >
+          {t('orderActionRevise', 'Modify')}
+        </span>
+      );
     case 'DISCONTINUE':
-      return <span className={styles.orderActionDiscontinueLabel}>{t('orderActionDiscontinue', 'Discontinue')}</span>;
+      return (
+        <span
+          className={styles.orderActionDiscontinueLabel}
+          role="status"
+          aria-atomic
+          aria-label={t('orderActionDiscontinue', 'Discontinue')}
+        >
+          {t('orderActionDiscontinue', 'Discontinue')}
+        </span>
+      );
     default:
       return <></>;
   }

packages/esm-patient-medications-app/src/drug-order-basket-panel/order-basket-item-tile.scss

@@ -1,3 +1,4 @@
+@use '@carbon/colors';
 @use '@carbon/layout';
 @use '@carbon/type';
 @use '@openmrs/esm-styleguide/src/vars' as *;
@@ -27,29 +28,27 @@
 
 .orderActionNewLabel {
   @extend .label;
-  color: $support-02;
+  background-color: colors.$green-10-hover;
+  padding: 0 layout.$spacing-02;
 }
 
-.orderActionRenewLabel {
-  @extend .label;
-  color: $support-02;
+.orderActionIncompleteLabel {
+  @extend .orderActionNewLabel;
+  background-color: colors.$red-60;
+  color: white;
 }
 
-.orderActionRevisedLabel {
-  @extend .label;
-  color: #943d00;
+.orderActionRenewLabel {
+  @extend .orderActionNewLabel;
 }
 
-.orderActionDiscontinueLabel {
-  @extend .label;
-  color: $danger;
+.orderActionReviseLabel {
+  @extend .orderActionNewLabel;
 }
 
-.orderActionIncompleteLabel {
-  @extend .label;
-  color: white;
-  background-color: $danger;
-  padding: 0 layout.$spacing-02;
+.orderActionDiscontinueLabel {
+  @extend .orderActionNewLabel;
+  background-color: colors.$gray-20;
 }
 
 .orderErrorText {

packages/esm-patient-orders-app/src/order-basket/general-order-type/order-basket-item-tile.component.tsx

@@ -78,18 +78,58 @@ function OrderActionLabel({ orderBasketItem }: { orderBasketItem: OrderBasketIte
   const { t } = useTranslation();
 
   if (orderBasketItem.isOrderIncomplete) {
-    return <span className={styles.orderActionIncompleteLabel}>{t('orderActionIncomplete', 'Incomplete')}</span>;
+    return (
+      <span
+        className={styles.orderActionIncompleteLabel}
+        role="status"
+        aria-atomic
+        aria-label={t('orderActionIncomplete', 'Incomplete')}
+      >
+        {t('orderActionIncomplete', 'Incomplete')}
+      </span>
+    );
   }
 
   switch (orderBasketItem.action) {
     case 'NEW':
-      return <span className={styles.orderActionNewLabel}>{t('orderActionNew', 'New')}</span>;
+      return (
+        <span className={styles.orderActionNewLabel} role="status" aria-atomic aria-label={t('orderActionNew', 'New')}>
+          {t('orderActionNew', 'New')}
+        </span>
+      );
     case 'RENEW':
-      return <span className={styles.orderActionRenewLabel}>{t('orderActionRenew', 'Renew')}</span>;
+      return (
+        <span
+          className={styles.orderActionRenewLabel}
+          role="status"
+          aria-atomic
+          aria-label={t('orderActionRenew', 'Renew')}
+        >
+          {t('orderActionRenew', 'Renew')}
+        </span>
+      );
     case 'REVISE':
-      return <span className={styles.orderActionRevisedLabel}>{t('orderActionRevise', 'Modify')}</span>;
+      return (
+        <span
+          className={styles.orderActionReviseLabel}
+          role="status"
+          aria-atomic
+          aria-label={t('orderActionRevise', 'Modify')}
+        >
+          {t('orderActionRevise', 'Modify')}
+        </span>
+      );
     case 'DISCONTINUE':
-      return <span className={styles.orderActionDiscontinueLabel}>{t('orderActionDiscontinue', 'Discontinue')}</span>;
+      return (
+        <span
+          className={styles.orderActionDiscontinueLabel}
+          role="status"
+          aria-atomic
+          aria-label={t('orderActionDiscontinue', 'Discontinue')}
+        >
+          {t('orderActionDiscontinue', 'Discontinue')}
+        </span>
+      );
     default:
       return <></>;
   }

packages/esm-patient-orders-app/src/order-basket/general-order-type/order-basket-item-tile.scss

@@ -1,3 +1,4 @@
+@use '@carbon/colors';
 @use '@carbon/layout';
 @use '@carbon/type';
 @use '@openmrs/esm-styleguide/src/vars' as *;
@@ -27,31 +28,27 @@
 
 .orderActionNewLabel {
   @extend .label;
-  color: black;
-  background-color: #c4f4cc;
+  background-color: colors.$green-10-hover;
   padding: 0 layout.$spacing-02;
 }
 
 .orderActionIncompleteLabel {
-  @extend .label;
+  @extend .orderActionNewLabel;
+  background-color: colors.$red-60;
   color: white;
-  background-color: $danger;
-  padding: 0 layout.$spacing-02;
 }
 
 .orderActionRenewLabel {
-  @extend .label;
-  color: $support-02;
+  @extend .orderActionNewLabel;
 }
 
-.orderActionRevisedLabel {
-  @extend .label;
-  color: #943d00;
+.orderActionReviseLabel {
+  @extend .orderActionNewLabel;
 }
 
 .orderActionDiscontinueLabel {
-  @extend .label;
-  color: $danger;
+  @extend .orderActionNewLabel;
+  background-color: colors.$gray-20;
 }
 
 .orderErrorText {

packages/esm-patient-orders-app/src/order-basket/general-order-type/orderable-concept-search/orderable-concept-search.workspace.tsx

@@ -1,3 +1,6 @@
+import React, { type ComponentProps, useCallback, useMemo, useRef, useState } from 'react';
+import { Button, Search } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
 import {
   ArrowLeftIcon,
   ResponsiveWrapper,
@@ -13,14 +16,11 @@ import {
   useOrderType,
   usePatientChartStore,
 } from '@openmrs/esm-patient-common-lib';
-import React, { type ComponentProps, useCallback, useMemo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import styles from './orderable-concept-search.scss';
-import { Button, Search } from '@carbon/react';
-import OrderableConceptSearchResults from './search-results.component';
-import { type ConfigObject } from '../../../config-schema';
 import { OrderForm } from '../general-order-form/general-order-form.component';
 import { prepOrderPostData } from '../resources';
+import { type ConfigObject } from '../../../config-schema';
+import OrderableConceptSearchResults from './search-results.component';
+import styles from './orderable-concept-search.scss';
 
 interface OrderableConceptSearchWorkspaceProps extends DefaultWorkspaceProps {
   order: OrderBasketItem;

packages/esm-patient-tests-app/src/test-orders/lab-order-basket-panel/lab-order-basket-item-tile.component.tsx

@@ -93,18 +93,58 @@ function OrderActionLabel({ orderBasketItem }: { orderBasketItem: TestOrderBaske
   const { t } = useTranslation();
 
   if (orderBasketItem.isOrderIncomplete) {
-    return <span className={styles.orderActionIncompleteLabel}>{t('orderActionIncomplete', 'Incomplete')}</span>;
+    return (
+      <span
+        className={styles.orderActionIncompleteLabel}
+        role="status"
+        aria-atomic
+        aria-label={t('orderActionIncomplete', 'Incomplete')}
+      >
+        {t('orderActionIncomplete', 'Incomplete')}
+      </span>
+    );
   }
 
   switch (orderBasketItem.action) {
     case 'NEW':
-      return <span className={styles.orderActionNewLabel}>{t('orderActionNew', 'New')}</span>;
+      return (
+        <span className={styles.orderActionNewLabel} role="status" aria-atomic aria-label={t('orderActionNew', 'New')}>
+          {t('orderActionNew', 'New')}
+        </span>
+      );
     case 'RENEW':
-      return <span className={styles.orderActionRenewLabel}>{t('orderActionRenew', 'Renew')}</span>;
+      return (
+        <span
+          className={styles.orderActionRenewLabel}
+          role="status"
+          aria-atomic
+          aria-label={t('orderActionRenew', 'Renew')}
+        >
+          {t('orderActionRenew', 'Renew')}
+        </span>
+      );
     case 'REVISE':
-      return <span className={styles.orderActionRevisedLabel}>{t('orderActionRevise', 'Modify')}</span>;
+      return (
+        <span
+          className={styles.orderActionReviseLabel}
+          role="status"
+          aria-atomic
+          aria-label={t('orderActionRevise', 'Modify')}
+        >
+          {t('orderActionRevise', 'Modify')}
+        </span>
+      );
     case 'DISCONTINUE':
-      return <span className={styles.orderActionDiscontinueLabel}>{t('orderActionDiscontinue', 'Discontinue')}</span>;
+      return (
+        <span
+          className={styles.orderActionDiscontinueLabel}
+          role="status"
+          aria-atomic
+          aria-label={t('orderActionDiscontinue', 'Discontinue')}
+        >
+          {t('orderActionDiscontinue', 'Discontinue')}
+        </span>
+      );
     default:
       return <></>;
   }