Fix/dag table a11y issues

admin/src/components/atoms/ActionButton.tsx

@@ -2,7 +2,7 @@ import { Button, IconButton } from '@mui/material';
 import React, { ReactElement } from 'react';
 
 interface ActionButtonProps {
-  children: string;
+  children: React.ReactNode;
   label: boolean;
   icon: ReactElement;
   disabled: boolean;

admin/src/components/atoms/VisuallyHidden.tsx

@@ -0,0 +1,16 @@
+import styled from '@emotion/styled';
+
+/** A component which hides its children. The children will still be available for screen readers.
+ * @see {@link https://www.a11yproject.com/posts/how-to-hide-content/} for further information.
+ */
+const VisuallyHidden = styled.span`
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+`;
+
+export default VisuallyHidden;

admin/src/components/molecules/DAGActions.tsx

@@ -5,6 +5,12 @@ import ActionButton from '../atoms/ActionButton';
 import { useNavigate } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPlay, faStop, faReply } from '@fortawesome/free-solid-svg-icons';
+import VisuallyHidden from '../atoms/VisuallyHidden';
+
+type LabelProps = {
+  show: boolean;
+  children: React.ReactNode;
+};
 
 type Props = {
   status?: Status;
@@ -14,6 +20,11 @@ type Props = {
   refresh?: () => void;
 };
 
+function Label({ show, children }: LabelProps): JSX.Element {
+  if (show) return <>{children}</>;
+  return <VisuallyHidden>{children}</VisuallyHidden>;
+}
+
 function DAGActions({
   status,
   name,
@@ -33,12 +44,16 @@ function DAGActions({
       }
     ) => {
       const form = new FormData();
-      if (params.action == "start") {
-        let parameters = window.prompt('Enter parameters (for default parameters, leave blank and click OK).', '');
-        if (parameters === null) {//hint cancel
-          return
+      if (params.action == 'start') {
+        const parameters = window.prompt(
+          'Enter parameters (for default parameters, leave blank and click OK).',
+          ''
+        );
+        if (parameters === null) {
+          //hint cancel
+          return;
         }
-        form.set("params", parameters)
+        form.set('params', parameters);
       } else {
         if (!confirm(warn)) {
           return;
@@ -81,9 +96,12 @@ function DAGActions({
       <ActionButton
         label={label}
         icon={
-          <span className="icon">
-            <FontAwesomeIcon icon={faPlay} />
-          </span>
+          <>
+            <Label show={label}>Start</Label>
+            <span className="icon">
+              <FontAwesomeIcon icon={faPlay} />
+            </span>
+          </>
         }
         disabled={!buttonState['start']}
         onClick={() =>
@@ -93,14 +111,17 @@ function DAGActions({
           })
         }
       >
-        {label ? 'Start' : ''}
+        {label && 'Start'}
       </ActionButton>
       <ActionButton
         label={label}
         icon={
-          <span className="icon">
-            <FontAwesomeIcon icon={faStop} />
-          </span>
+          <>
+            <Label show={label}>Stop</Label>
+            <span className="icon">
+              <FontAwesomeIcon icon={faStop} />
+            </span>
+          </>
         }
         disabled={!buttonState['stop']}
         onClick={() =>
@@ -110,14 +131,17 @@ function DAGActions({
           })
         }
       >
-        {label ? 'Stop' : ''}
+        {label && 'Stop'}
       </ActionButton>
       <ActionButton
         label={label}
         icon={
-          <span className="icon">
-            <FontAwesomeIcon icon={faReply} />
-          </span>
+          <>
+            <Label show={label}>Retry</Label>
+            <span className="icon">
+              <FontAwesomeIcon icon={faReply} />
+            </span>
+          </>
         }
         disabled={!buttonState['retry']}
         onClick={() =>
@@ -131,7 +155,7 @@ function DAGActions({
           )
         }
       >
-        {label ? 'Retry' : ''}
+        {label && 'Retry'}
       </ActionButton>
     </Stack>
   );

admin/src/components/molecules/DAGTable.tsx

@@ -47,6 +47,7 @@ import LiveSwitch from './LiveSwitch';
 import moment from 'moment';
 import 'moment-duration-format';
 import Ticker from '../atoms/Ticker';
+import VisuallyHidden from '../atoms/VisuallyHidden';
 
 type Props = {
   DAGs: DAGItem[];
@@ -80,9 +81,15 @@ const defaultColumns = [
           }}
         >
           {table.getIsAllRowsExpanded() ? (
-            <KeyboardArrowUp />
+            <>
+              <VisuallyHidden>Compress rows</VisuallyHidden>
+              <KeyboardArrowUp />
+            </>
           ) : (
-            <KeyboardArrowDown />
+            <>
+              <VisuallyHidden>Expand rows</VisuallyHidden>
+              <KeyboardArrowDown />
+            </>
           )}
         </IconButton>
       );
@@ -347,6 +354,9 @@ const defaultColumns = [
         <LiveSwitch
           DAG={data.DAGStatus}
           refresh={props.table.options.meta?.refreshFn}
+          inputProps={{
+            'aria-label': `Toggle ${data.Name}`,
+          }}
         />
       );
     },

admin/src/components/molecules/LiveSwitch.tsx

@@ -3,13 +3,13 @@ import React from 'react';
 import { DAGStatus } from '../../models';
 
 type Props = {
+  inputProps?: React.HTMLProps<HTMLInputElement>;
   DAG: DAGStatus;
   refresh?: () => void;
 };
 
-function LiveSwitch({ DAG, refresh }: Props) {
+function LiveSwitch({ DAG, refresh, inputProps }: Props) {
   const [checked, setChecked] = React.useState(!DAG.Suspended);
-
   const onSubmit = React.useCallback(
     async (params: { name: string; action: string; value: string }) => {
       const form = new FormData();
@@ -42,6 +42,8 @@ function LiveSwitch({ DAG, refresh }: Props) {
       value: enabled ? 'false' : 'true',
     });
   }, [DAG, checked]);
-  return <Switch checked={checked} onChange={onChange} />;
+  return (
+    <Switch checked={checked} onChange={onChange} inputProps={inputProps} />
+  );
 }
 export default LiveSwitch;