SLEIGHT-85: fix aria-label text

synkarius · Nov 13, 2022 · edb6ac5 · edb6ac5
1 parent 2b33675
commit edb6ac5
Show file tree

Hide file tree

Showing 63 changed files with 500 additions and 376 deletions.
diff --git a/src/error/error-codes.ts b/src/error/error-codes.ts
@@ -3,12 +3,14 @@ export enum ErrorCode {
 
   EXPORT = 'problem occurred during export',
 
-  MAP_KEY_MISSING = 'map key not found',
-
   MISSING_DELEGATE = 'missing delegate',
 
+  MISSING_FIELD = 'field not found',
+
   MISSING_GUARD = 'missing guard',
 
+  MISSING_MAP_KEY = 'map key not found',
+
   MODEL_UPDATE_EVALUATION_FAILURE = 'model update evaluation failed',
 
   NOT_IMPLEMENTED = 'method not implemented',

diff --git a/src/error/map-key-missing-error.ts b/src/error/map-key-missing-error.ts
@@ -3,6 +3,6 @@ import { SleightError } from './sleight-error';
 
 export class MapKeyMissingError extends SleightError {
   constructor(key: string) {
-    super(ErrorCode.MAP_KEY_MISSING, 'map key is missing: ' + key);
+    super(ErrorCode.MISSING_MAP_KEY, 'map key is missing: ' + key);
   }
 }
diff --git a/src/error/missing-field-error.ts b/src/error/missing-field-error.ts
@@ -0,0 +1,9 @@
+import { Field } from '../validation/validation-field';
+import { ErrorCode } from './error-codes';
+import { SleightError } from './sleight-error';
+
+export class MissingFieldError extends SleightError {
+  constructor(field: Field) {
+    super(ErrorCode.MISSING_FIELD, 'Field missing: ' + Field[field]);
+  }
+}
diff --git a/src/ui/model/action/ActionComponent.spec.tsx b/src/ui/model/action/ActionComponent.spec.tsx
@@ -34,6 +34,7 @@ import { LIST } from '../../../core/common/accessibility-roles';
 import { container } from '../../../di/config/brandi-config';
 import { Tokens } from '../../../di/config/brandi-tokens';
 import { BrowserRouter } from 'react-router-dom';
+import { fieldName } from '../../../validation/field-name';
 
 const SPEC_WITH_SELECTOR_ID = 'spec-id-1';
 const SPEC_WITH_SELECTOR_NAME = 'spec-name-1';
@@ -166,7 +167,7 @@ describe('action component tests', () => {
     doRender();
 
     const nameField = screen.getByRole<HTMLInputElement>('textbox', {
-      name: Field[Field.AC_NAME],
+      name: fieldName(Field.AC_NAME),
     });
 
     expect(nameField).toHaveAttribute(
@@ -188,13 +189,13 @@ describe('action component tests', () => {
     doRender();
 
     const select = screen.getByRole<HTMLSelectElement>('list', {
-      name: Field[Field.AC_SK_KEY_TO_SEND_VALUE],
+      name: fieldName(Field.AC_SK_KEY_TO_SEND_VALUE),
     });
     await user.click(select);
     await user.tab();
     // is invalid at this point
     const actionTypeSelect = screen.getByRole('list', {
-      name: Field[Field.AC_TYPE],
+      name: fieldName(Field.AC_TYPE),
     });
     await user.selectOptions(actionTypeSelect, ActionType.Enum.PAUSE);
     // should be valid again
@@ -207,7 +208,7 @@ describe('action component tests', () => {
     doRender();
 
     const roleKeyField = screen.getByRole<HTMLInputElement>('textbox', {
-      name: Field[Field.AC_ROLE_KEY],
+      name: fieldName(Field.AC_ROLE_KEY),
     });
     await user.click(roleKeyField);
     await user.type(roleKeyField, ROLE_KEY);
@@ -258,7 +259,7 @@ describe('action component tests', () => {
     const variableRadio = screen.getByLabelText('Use (Range) Variable');
     await user.click(variableRadio);
     const variableSelect = screen.getByRole(LIST, {
-      name: Field[Field.AC_SECONDS_VAR],
+      name: fieldName(Field.AC_SECONDS_VAR),
     });
     await user.selectOptions(variableSelect, VARIABLE_NAME_1);
     const saveButton = screen.getByRole('button', {

diff --git a/src/ui/model/action/ActionComponent.tsx b/src/ui/model/action/ActionComponent.tsx
@@ -44,6 +44,7 @@ import { Tokens } from '../../../di/config/brandi-tokens';
 import { doNothing } from '../../../core/common/common-functions';
 import { MapUtil } from '../../../core/common/map-util';
 import { DomainMapper } from '../../../core/mappers/mapper';
+import { fieldName } from '../../../validation/field-name';
 
 const AC_NAME = Field.AC_NAME;
 const AC_ROLE_KEY = Field.AC_ROLE_KEY;
@@ -171,7 +172,7 @@ const ActionChildComponent: React.FC<{
         errorMessage={errorResults(AC_NAME)}
       >
         <FormControl
-          aria-label={Field[AC_NAME]}
+          aria-label={fieldName(AC_NAME)}
           type="text"
           onChange={nameChangedHandler}
           onBlur={() => validationContext.touch(AC_NAME)}
@@ -186,7 +187,7 @@ const ActionChildComponent: React.FC<{
         errorMessage={errorResults(AC_ROLE_KEY)}
       >
         <FormControl
-          aria-label={Field[AC_ROLE_KEY]}
+          aria-label={fieldName(AC_ROLE_KEY)}
           type="text"
           onChange={roleKeyChangedHandler}
           onBlur={() => validationContext.touch(AC_ROLE_KEY)}
@@ -196,7 +197,7 @@ const ActionChildComponent: React.FC<{
       </FormGroupRowComponent>
       <FormGroupRowComponent labelText="Type" descriptionText="type of action">
         <FormSelect
-          aria-label={Field[Field.AC_TYPE]}
+          aria-label={fieldName(Field.AC_TYPE)}
           role="list"
           onChange={typeChangedHandler}
           value={props.action.type}
@@ -240,7 +241,7 @@ const ActionChildComponent: React.FC<{
           variant="danger"
           size="lg"
           className="me-3"
-          aria-label={Field[Field.AC_DELETE]}
+          aria-label={fieldName(Field.AC_DELETE)}
         >
           Delete
         </Button>

diff --git a/src/ui/model/action/ActionDropdownComponent.tsx b/src/ui/model/action/ActionDropdownComponent.tsx
@@ -4,6 +4,7 @@ import { useAppSelector } from '../../../app/hooks';
 import { Field } from '../../../validation/validation-field';
 import { LIST_ITEM } from '../../../core/common/accessibility-roles';
 import { UNSELECTED_ID } from '../../../core/common/consts';
+import { fieldName } from '../../../validation/field-name';
 
 type ActionDropdownComponentProps = {
   readonly field: Field;
@@ -21,7 +22,7 @@ export const ActionDropdownComponent: React.FC<ActionDropdownComponentProps> = (
   return (
     <FormSelect
       value={props.actionId ?? UNSELECTED_ID}
-      aria-label={Field[props.field]}
+      aria-label={fieldName(props.field)}
       onChange={props.onChange}
       onBlur={props.onBlur}
       isInvalid={props.isInvalid}

diff --git a/src/ui/model/action/ActionValueComponent.tsx b/src/ui/model/action/ActionValueComponent.tsx
@@ -34,6 +34,7 @@ import {
   createFieldedActionValueChange,
   createIdedActionValueChange,
 } from './action-editing-context-support';
+import { fieldName } from '../../../validation/field-name';
 
 type AVCProps = {
   // value
@@ -132,7 +133,7 @@ export const ActionValueComponent: React.FC<AVCProps> = (props) => {
   /**
    * misc other form stuff
    */
-  const enteredValueFieldName = Field[props.fields.value];
+  const enteredValueFieldName = fieldName(props.fields.value);
   const isChecked = (actionValueType: string): boolean =>
     props.actionValue.actionValueType === actionValueType;
   const radioButtonData = [
@@ -150,7 +151,7 @@ export const ActionValueComponent: React.FC<AVCProps> = (props) => {
       )}
       required={props.required}
     >
-      <div role="radiogroup" aria-label={Field[props.fields.radio]}>
+      <div role="radiogroup" aria-label={fieldName(props.fields.radio)}>
         {radioButtonData.map((d) => (
           <FormCheck
             inline
@@ -201,7 +202,7 @@ export const ActionValueComponent: React.FC<AVCProps> = (props) => {
         !!props.fields.enumValues.length && (
           <FormSelect
             value={props.actionValue.value}
-            aria-label={Field[props.fields.value]}
+            aria-label={fieldName(props.fields.value)}
             onChange={(e) => enteredValueChangedHandler(e.target.value)}
             onBlur={(_e) => touchEnteredValue()}
             isInvalid={!!errorResults(props.fields.value)}

diff --git a/src/ui/model/action/bring-app/BringAppComponent.spec.tsx b/src/ui/model/action/bring-app/BringAppComponent.spec.tsx
@@ -19,6 +19,7 @@ import { TEXT_BOX } from '../../../../core/common/accessibility-roles';
 import { container } from '../../../../di/config/brandi-config';
 import { Tokens } from '../../../../di/config/brandi-tokens';
 import { BrowserRouter } from 'react-router-dom';
+import { fieldName } from '../../../../validation/field-name';
 
 const CHOICE_VARIABLE_NAME = 'asdf-choice-var';
 const VARIABLE_RADIO = 1;
@@ -54,7 +55,7 @@ beforeEach(async () => {
     { wrapper: BrowserRouter }
   );
   const actionTypeSelect = screen.getByRole('list', {
-    name: Field[Field.AC_TYPE],
+    name: fieldName(Field.AC_TYPE),
   });
   await user.selectOptions(actionTypeSelect, ActionType.Enum.BRING_APP);
 });
@@ -65,7 +66,7 @@ const selectActionValueType = async (
   index: Radio
 ): Promise<void> => {
   const radioGroup = screen.getByRole('radiogroup', {
-    name: Field[field],
+    name: fieldName(field),
   });
   const options = await within(radioGroup).findAllByRole('radio');
   await user.click(options[index]);
@@ -74,7 +75,7 @@ const selectActionValueType = async (
 describe('bring app action component tests', () => {
   it('should invalidate empty app path value', async () => {
     const input = screen.getByRole(TEXT_BOX, {
-      name: Field[Field.AC_BRING_PATH_VALUE],
+      name: fieldName(Field.AC_BRING_PATH_VALUE),
     });
     await user.click(input);
     await user.tab();
@@ -87,7 +88,7 @@ describe('bring app action component tests', () => {
 
   it('should validate non-empty app path value', async () => {
     const input = screen.getByRole(TEXT_BOX, {
-      name: Field[Field.AC_BRING_PATH_VALUE],
+      name: fieldName(Field.AC_BRING_PATH_VALUE),
     });
     await user.click(input);
     await user.type(input, 'asdf');
@@ -103,7 +104,7 @@ describe('bring app action component tests', () => {
       VARIABLE_RADIO
     );
     const select = screen.getByRole('list', {
-      name: Field[Field.AC_BRING_PATH_VAR],
+      name: fieldName(Field.AC_BRING_PATH_VAR),
     });
     await user.click(select);
     await user.tab();
@@ -121,7 +122,7 @@ describe('bring app action component tests', () => {
       VARIABLE_RADIO
     );
     const select = screen.getByRole('list', {
-      name: Field[Field.AC_BRING_PATH_VAR],
+      name: fieldName(Field.AC_BRING_PATH_VAR),
     });
     await user.selectOptions(select, [CHOICE_VARIABLE_NAME]);
     await user.tab();
@@ -136,7 +137,7 @@ describe('bring app action component tests', () => {
       VARIABLE_RADIO
     );
     const select = screen.getByRole('list', {
-      name: Field[Field.AC_BRING_TITLE_VAR],
+      name: fieldName(Field.AC_BRING_TITLE_VAR),
     });
     await user.click(select);
     await user.tab();
@@ -154,7 +155,7 @@ describe('bring app action component tests', () => {
       VARIABLE_RADIO
     );
     const select = screen.getByRole('list', {
-      name: Field[Field.AC_BRING_TITLE_VAR],
+      name: fieldName(Field.AC_BRING_TITLE_VAR),
     });
     await user.selectOptions(select, [CHOICE_VARIABLE_NAME]);
     await user.tab();
@@ -169,7 +170,7 @@ describe('bring app action component tests', () => {
       VARIABLE_RADIO
     );
     const select = screen.getByRole('list', {
-      name: Field[Field.AC_BRING_START_DIR_VAR],
+      name: fieldName(Field.AC_BRING_START_DIR_VAR),
     });
     await user.click(select);
     await user.tab();
@@ -187,7 +188,7 @@ describe('bring app action component tests', () => {
       VARIABLE_RADIO
     );
     const select = screen.getByRole('list', {
-      name: Field[Field.AC_BRING_START_DIR_VAR],
+      name: fieldName(Field.AC_BRING_START_DIR_VAR),
     });
     await user.selectOptions(select, [CHOICE_VARIABLE_NAME]);
     await user.tab();

diff --git a/src/ui/model/action/call-function/CallFunctionComponent.spec.tsx b/src/ui/model/action/call-function/CallFunctionComponent.spec.tsx
@@ -18,6 +18,7 @@ import {
   saveVariable,
   setVariables,
 } from '../../../../core/reducers/variable-reducers';
+import { fieldName } from '../../../../validation/field-name';
 
 const TEXT_VAR_1_NAME = 'text-var-2141bbc2-1dcd';
 const FN_1_NAME = 'fn1';
@@ -40,7 +41,7 @@ beforeEach(async () => {
     { wrapper: BrowserRouter }
   );
   const actionTypeSelect = screen.getByRole('list', {
-    name: Field[Field.AC_TYPE],
+    name: fieldName(Field.AC_TYPE),
   });
   await user.selectOptions(actionTypeSelect, ActionType.Enum.CALL_FUNCTION);
 });
@@ -53,7 +54,7 @@ afterEach(async () => {
 describe('call function action component tests', () => {
   it('should invalidate non-selected fn', async () => {
     const fnSelect = screen.getByRole('list', {
-      name: Field[Field.AC_CALL_FUNC_FN],
+      name: fieldName(Field.AC_CALL_FUNC_FN),
     });
     await user.click(fnSelect);
     await user.tab();
@@ -68,7 +69,7 @@ describe('call function action component tests', () => {
 
   it('should validate selected fn', async () => {
     const fnSelect = screen.getByRole('list', {
-      name: Field[Field.AC_CALL_FUNC_FN],
+      name: fieldName(Field.AC_CALL_FUNC_FN),
     });
     await user.selectOptions(fnSelect, FN_1_NAME);
 
@@ -83,20 +84,20 @@ describe('call function action component tests', () => {
   it('should invalidate non-selected parameter variable', async () => {
     // select a fn
     const fnSelect = screen.getByRole('list', {
-      name: Field[Field.AC_CALL_FUNC_FN],
+      name: fieldName(Field.AC_CALL_FUNC_FN),
     });
     await user.selectOptions(fnSelect, FN_1_NAME);
 
     // change the parameter to "Use Variable"
     const paramVarSelectRadio = screen.getAllByRole('radiogroup', {
-      name: Field[Field.AC_CALL_FUNC_PARAMETER_RADIO],
+      name: fieldName(Field.AC_CALL_FUNC_PARAMETER_RADIO),
     })[0];
     const options = await within(paramVarSelectRadio).getAllByRole('radio');
     await user.click(options[VARIABLE_RADIO]);
 
     // click on the variable select and then tab away
     const paramVarSelect = screen.getAllByRole('list', {
-      name: Field[Field.AC_CALL_FUNC_PARAMETER_VAR],
+      name: fieldName(Field.AC_CALL_FUNC_PARAMETER_VAR),
     })[0];
     await user.click(paramVarSelect);
     await user.tab();
@@ -112,20 +113,20 @@ describe('call function action component tests', () => {
   it('should validate selected parameter variable', async () => {
     // select a fn
     const fnSelect = screen.getByRole('list', {
-      name: Field[Field.AC_CALL_FUNC_FN],
+      name: fieldName(Field.AC_CALL_FUNC_FN),
     });
     await user.selectOptions(fnSelect, FN_1_NAME);
 
     // change the parameter to "Use Variable"
     const paramVarSelectRadio = screen.getAllByRole('radiogroup', {
-      name: Field[Field.AC_CALL_FUNC_PARAMETER_RADIO],
+      name: fieldName(Field.AC_CALL_FUNC_PARAMETER_RADIO),
     })[0];
     const options = await within(paramVarSelectRadio).getAllByRole('radio');
     await user.click(options[VARIABLE_RADIO]);
 
     // select a variable
     const paramVarSelect = screen.getAllByRole('list', {
-      name: Field[Field.AC_CALL_FUNC_PARAMETER_VAR],
+      name: fieldName(Field.AC_CALL_FUNC_PARAMETER_VAR),
     })[0];
     await user.selectOptions(paramVarSelect, TEXT_VAR_1_NAME);