feat(button): improve accessibility #IX-3930

apps/react-starter/package.json

@@ -12,11 +12,11 @@
     "e2e": "playwright test"
   },
   "dependencies": {
-    "@siemens/ix": "^4.0.0",
+    "@siemens/ix": "^4.3.0",
     "@siemens/ix-aggrid": "^4.0.0",
     "@siemens/ix-echarts": "3.0.0",
     "@siemens/ix-icons": "3.2.0",
-    "@siemens/ix-react": "^4.0.0",
+    "@siemens/ix-react": "^4.3.0",
     "ag-grid-community": "33.3.2",
     "ag-grid-react": "33.3.2",
     "clsx": "^2.1.1",

apps/react-starter/src/locales/en/translation.json

@@ -35,6 +35,11 @@
     "on": "Turn on",
     "off": "Turn off",
     "delete": "Delete",
+    "more-actions": "More actions",
+    "duplicate": "Duplicate",
+    "cut": "Cut",
+    "copy": "Copy",
+    "paste": "Paste",
     "success-messages": {
       "copy": "Device copied to clipboard",
       "delete": "Device deleted",
@@ -67,6 +72,7 @@
   "incidents": {
     "title": "Incidents",
     "create-task": "Create task",
+    "open-external": "Open incident in new window",
     "incident-cards": {
       "device": "Device",
       "date": "Date"
@@ -101,6 +107,7 @@
   },
   "toggle-theme": "Toggle theme",
   "search": "Search",
+  "upload": "Upload",
   "demo-message": "This feature is currently unavailable in the demo version.",
   "cancel": "Cancel",
   "okay": "OK"

apps/react-starter/src/pages/devices/components/ag-grid-table/quick-actions-cell-renderer.tsx

@@ -129,13 +129,14 @@ const QuickActionsCellRenderer = (props: QuickActionsCellRendererProps) => {
         icon={iconContextMenu}
         variant="subtle-tertiary"
         id={`device_${props.node.rowIndex}`}
+        aria-label={t("dropdown-quick-actions.more-actions")}
       ></IxIconButton>
       <IxDropdown trigger={`device_${props.node.rowIndex}`}>
         <IxDropdownQuickActions>
-          <IxIconButton icon={iconDuplicate} variant="subtle-tertiary" onClick={handleDuplicate}></IxIconButton>
-          <IxIconButton icon={iconCut} variant="subtle-tertiary" onClick={handleCut}></IxIconButton>
-          <IxIconButton icon={iconCopy} variant="subtle-tertiary" onClick={handleCopy}></IxIconButton>
-          <IxIconButton icon={iconPaste} variant="subtle-tertiary" onClick={handlePaste}></IxIconButton>
+          <IxIconButton icon={iconDuplicate} variant="subtle-tertiary" onClick={handleDuplicate} aria-label={t("dropdown-quick-actions.duplicate")}></IxIconButton>
+          <IxIconButton icon={iconCut} variant="subtle-tertiary" onClick={handleCut} aria-label={t("dropdown-quick-actions.cut")}></IxIconButton>
+          <IxIconButton icon={iconCopy} variant="subtle-tertiary" onClick={handleCopy} aria-label={t("dropdown-quick-actions.copy")}></IxIconButton>
+          <IxIconButton icon={iconPaste} variant="subtle-tertiary" onClick={handlePaste} aria-label={t("dropdown-quick-actions.paste")}></IxIconButton>
         </IxDropdownQuickActions>
         <IxDivider></IxDivider>
         <IxDropdownItem

apps/react-starter/src/pages/devices/components/modal/add-device-modal.tsx

@@ -18,13 +18,13 @@ import {
   Modal,
   ModalRef,
 } from "@siemens/ix-react";
-import { useRef, useEffect } from "react";
-import styles from "./styles.module.css";
+import { useEffect, useRef } from "react";
 import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 import { useDataStore } from "../../../../store/device-store.ts";
 import { Device } from "../../../../types";
-import { useTranslation } from "react-i18next";
 import { showSuccessToast } from "../../../../util/util.ts";
+import styles from "./styles.module.css";
 
 export default function AddDeviceModal() {
   const { t } = useTranslation();
@@ -140,15 +140,10 @@ export default function AddDeviceModal() {
       </IxModalContent>
 
       <IxModalFooter className={styles.ModalFooter}>
-        <IxButton aria-label={t("device-add-modal.dismiss")} variant="secondary" onClick={() => dismiss()}>
+        <IxButton variant="secondary" onClick={() => dismiss()}>
           {t("device-add-modal.dismiss")}
         </IxButton>
-        <IxButton
-          aria-label={t("device-add-modal.close")}
-          variant="primary"
-          type="button"
-          onClick={() => formRef.current?.requestSubmit()}
-        >
+        <IxButton variant="primary" type="button" onClick={() => formRef.current?.requestSubmit()}>
           {t("device-add-modal.close")}
         </IxButton>
       </IxModalFooter>

apps/react-starter/src/pages/devices/index.tsx

@@ -159,7 +159,7 @@ const DevicesPage = () => {
     <>
       <DeviceDetails />
       <IxContentHeader headerTitle={t("devices")} slot="header">
-        <IxButton variant="tertiary" icon={iconAddCircle} onClick={show} aria-label="add device">
+        <IxButton variant="tertiary" icon={iconAddCircle} onClick={show}>
           {t("add-device")}
         </IxButton>
       </IxContentHeader>

apps/react-starter/src/pages/overview/components/incidents/overview/incident-list/index.tsx

@@ -51,7 +51,7 @@ function DesktopItem({ incident }: { incident: Incident }) {
           <IxTypography textColor="soft">{incident.time}</IxTypography>
         </IxCol>
         <IxCol className={styles.IncidentActions}>
-          <IxIconButton variant="subtle-tertiary" icon={iconOpenExternal} />
+          <IxIconButton variant="subtle-tertiary" icon={iconOpenExternal} aria-label={t("incidents.open-external")} />
           <IxButton color="primary" variant="secondary" onClick={showDemoMessage}>
             {t("incidents.create-task")}
           </IxButton>
@@ -62,6 +62,7 @@ function DesktopItem({ incident }: { incident: Incident }) {
 }
 
 function MobileItem({ incident }: { incident: Incident }) {
+  const { t } = useTranslation();
   const showDemoMessage = useShowDemoMessage();
   return (
     <IxLayoutGrid noMargin>
@@ -86,6 +87,7 @@ function MobileItem({ incident }: { incident: Incident }) {
             variant="secondary"
             icon={iconUpload}
             onClick={showDemoMessage}
+            aria-label={t("upload")}
           ></IxIconButton>
         </IxCol>
       </IxRow>