Fix issues found with axe

packages/dmn-js-decision-table/assets/css/dmn-js-decision-table-controls.css

@@ -1,5 +1,5 @@
 .dmn-decision-table-container {
-  --allowed-values-placeholder-color: var(--color-grey-225-10-75);
+  --allowed-values-placeholder-color: var(--color-grey-225-10-35);
   --cell-description-editor-border-color: var(--color-grey-225-10-15);
   --create-inputs-border-color: var(--color-grey-225-10-75);
   --create-inputs-color: var(--color-grey-225-10-75);
@@ -13,8 +13,8 @@
   --context-menu-group-entry-hover-background-color: var(--color-grey-225-10-95);
   --drag-and-drop-handle-color: var(--color-grey-225-10-55);
   --drag-and-drop-handle-hover-color: var(--color-grey-225-10-15);
-  --form-control-label-color: var(--color-grey-225-10-55);
-  --hint-color: var(--color-grey-225-10-55);
+  --form-control-label-color: var(--color-grey-225-10-15);
+  --hint-color: var(--color-grey-225-10-15);
 }
 
 /* simple string edit */

packages/dmn-js-decision-table/src/features/annotations/editor/components/AnnotationCell.js

@@ -60,6 +60,7 @@ export default class EditableAnnotationCell extends Component {
         data-row-id={ row.id }>
 
         <AnnotationEditor
+          label={ this.translate('Annotation') }
           ctrlForNewline={ true }
           className="annotation-editor"
           onChange={ this.setAnnotationValue }
@@ -72,7 +73,8 @@ export default class EditableAnnotationCell extends Component {
 
 EditableAnnotationCell.$inject = [
   'changeSupport',
-  'modeling'
+  'modeling',
+  'translate'
 ];
 
 

packages/dmn-js-decision-table/src/features/decision-rules/components/DecisionRulesCellEditorComponent.js

@@ -130,9 +130,7 @@ class TableCellEditor extends Component {
   isDefaultExpressionLanguage(businessObject) {
     const { expressionLanguage } = businessObject;
 
-    const defaultExpressionLanguage = this.getDefaultExpressionLanguage(
-      businessObject
-    ).value;
+    const defaultExpressionLanguage = this.getDefaultExpressionLanguage().value;
 
     return !expressionLanguage || expressionLanguage === defaultExpressionLanguage;
   }
@@ -144,18 +142,18 @@ class TableCellEditor extends Component {
   getExpressionLanguageLabel(businessObject) {
     const { expressionLanguage } = businessObject;
 
-    const defaultExpressionLanguage = this.getDefaultExpressionLanguage(businessObject);
+    const defaultExpressionLanguage = this.getDefaultExpressionLanguage();
 
     return this._expressionLanguages.getLabel(expressionLanguage) ||
       defaultExpressionLanguage.label;
   }
 
-  isScript(businessObject) {
-    const defaultExpressionLanguage = this.getDefaultExpressionLanguage(businessObject);
+  isScript() {
+    const { businessObject } = this.props;
 
-    const isInputCell = is(businessObject, 'dmn:UnaryTests');
+    const defaultExpressionLanguage = this.getDefaultExpressionLanguage();
 
-    if (!isInputCell) {
+    if (!this._isInputCell()) {
       return false;
     }
 
@@ -167,8 +165,12 @@ class TableCellEditor extends Component {
       businessObject.expressionLanguage !== defaultExpressionLanguage;
   }
 
-  getDefaultExpressionLanguage(businessObject) {
-    const elementType = is(businessObject, 'dmn:UnaryTests') ? 'inputCell' : 'outputCell';
+  _isInputCell() {
+    return is(this.props.businessObject, 'dmn:UnaryTests');
+  }
+
+  getDefaultExpressionLanguage() {
+    const elementType = this._isInputCell() ? 'inputCell' : 'outputCell';
 
     return this._expressionLanguages.getDefault(elementType);
   }
@@ -185,7 +187,7 @@ class TableCellEditor extends Component {
     const { businessObject } = this.props;
 
     return businessObject.expressionLanguage ||
-      this.getDefaultExpressionLanguage(businessObject).value;
+      this.getDefaultExpressionLanguage().value;
   }
 
   _getVariables() {
@@ -195,6 +197,11 @@ class TableCellEditor extends Component {
       this._variableResolver.getVariables(businessObject);
   }
 
+  _getLabel() {
+    return this._isInputCell() ?
+      this._translate('Input') : this._translate('Output');
+  }
+
   render() {
     const {
       businessObject,
@@ -209,7 +216,7 @@ class TableCellEditor extends Component {
 
     const expressionLanguageLabel = this.getExpressionLanguageLabel(businessObject);
 
-    const isScript = this.isScript(businessObject);
+    const isScript = this.isScript();
 
     const Editor = this.getEditor();
     const variables = this._getVariables();
@@ -221,6 +228,7 @@ class TableCellEditor extends Component {
             && <div className="description-indicator"></div>
         }
         <Editor
+          label={ this._getLabel() }
           className={ isScript ? 'script-editor' : '' }
           ctrlForNewline={ true }
           onInput={ onChange }

packages/dmn-js-decision-table/src/features/decision-table-head/editor/components/InputEditor.js

@@ -8,7 +8,7 @@ export default class InputEditor extends Component {
   constructor(props, context) {
     super(props, context);
 
-    this.translate = context.injector ? context.injector.get('translate') : noopTranslate;
+    this.translate = context.injector.get('translate');
     this.expressionLanguages = context.injector.get('expressionLanguages', false);
     this.variableResolver = context.injector.get('variableResolver', false);
 
@@ -77,6 +77,7 @@ export default class InputEditor extends Component {
 
         <div className="dms-form-control">
           <ContentEditable
+            label={ this.translate('Input label') }
             className="dms-input-label"
             value={ label || '' }
             placeholder={ this.translate('Input') }
@@ -92,6 +93,7 @@ export default class InputEditor extends Component {
           </label>
 
           <ExpressionEditor
+            label={ this.translate('Input expression') }
             placeholder={ this.translate('Enter expression') }
             className={
               [
@@ -107,7 +109,3 @@ export default class InputEditor extends Component {
     );
   }
 }
-
-function noopTranslate(str) {
-  return str;
-}

packages/dmn-js-decision-table/src/features/decision-table-head/editor/components/OutputEditor.js

@@ -45,6 +45,7 @@ export default class OutputEditor extends Component {
 
         <div className="dms-form-control">
           <ContentEditable
+            label={ this.translate('Output label') }
             className="dms-output-label"
             value={ label || '' }
             placeholder={ this.translate('Output') }
@@ -60,6 +61,7 @@ export default class OutputEditor extends Component {
           </label>
 
           <Input
+            label={ this.translate('Output name') }
             className="ref-output-name"
             value={ name || '' }
             onInput={ this.setName } />

packages/dmn-js-decision-table/src/features/decision-table-properties/components/DecisionTablePropertiesEditorComponent.js

@@ -61,6 +61,7 @@ export default class DecisionTablePropertiesComponent extends Component {
     return (
       <div className="decision-table-properties">
         <DecisionTableName
+          label={ this.translate('Decision name') }
           className="decision-table-name"
           value={ name }
           ctrlForNewline={ true }
@@ -80,7 +81,8 @@ DecisionTablePropertiesComponent.$inject = [
   'sheet',
   'modeling',
   'changeSupport',
-  'components'
+  'components',
+  'translate'
 ];
 
 

packages/dmn-js-decision-table/src/features/expression-language/ExpressionLanguage.js

@@ -82,17 +82,20 @@ export default class ExpressionLanguage {
         const className = 'context-menu-group-entry ' +
           'context-menu-entry-set-expression-language';
 
+        const label = this._translate('Expression language');
+
         return () => (
           <div
             className="context-menu-flex">
             <div className="context-menu-group">
               <div
                 className={ className }>
                 <div>
-                  { this._translate('Expression language') }
+                  { label }
                 </div>
 
                 <InputSelect
+                  label={ label }
                   className="expression-language"
                   onChange={ value => this.onChange(element, value) }
                   options={ options }
@@ -120,15 +123,18 @@ export default class ExpressionLanguage {
 
           const options = expressionLanguages.getAll();
 
+          const label = this._translate('Expression language');
+
           return <div className="context-menu-container ref-language">
             <div className="dms-form-control">
               <label className="dms-label">
                 {
-                  this._translate('Expression language')
+                  label
                 }
               </label>
 
               <InputSelect
+                label={ label }
                 className="ref-language"
                 value={ expressionLanguage || '' }
                 onChange={ value => this.onChange(inputExpression, value) }

packages/dmn-js-decision-table/src/features/hit-policy/editor/components/EditableHitPolicy.js

@@ -58,6 +58,7 @@ export default class EditableHitPolicy extends Component {
         </label>
         <InputSelect
           className="hit-policy-edit-policy-select"
+          label={ this._translate('Hit policy') }
           onChange={ this.onChange }
           options={ HIT_POLICIES.map(entry =>
             ({ ...entry, label: this._translate(entry.label) })) }

packages/dmn-js-decision-table/src/features/simple-boolean-edit/components/BooleanEdit.js

@@ -66,6 +66,7 @@ export default class BooleanEdit extends Component {
         <h4 class="dms-heading">{this._translate('Set value')}</h4>
 
         <InputSelect
+          label={ this._translate('Boolean value') }
           noInput={ true }
           className="dms-block"
           onChange={ this.onChange }

packages/dmn-js-decision-table/src/features/simple-date-edit/components/InputDateEdit.js

@@ -167,6 +167,7 @@ export default class InputDateEdit extends Component {
 
         <div className="dms-fill-row">
           <InputSelect
+            label={ this._translate('Test type') }
             noInput={ true }
             onChange={ this.onTypeChange }
             options={ options }
@@ -183,6 +184,8 @@ export default class InputDateEdit extends Component {
 
         <div>
           <ValidatedInput
+            label={
+              type === BETWEEN ? this._translate('Start date') : this._translate('Date') }
             className="start-date-input dms-block"
             onInput={ this.onStartDateInput }
             placeholder={ this._translate('e.g. { sample }', {
@@ -212,6 +215,7 @@ export default class InputDateEdit extends Component {
           type === BETWEEN
             && <div>
               <ValidatedInput
+                label={ this._translate('End date') }
                 className="end-date-input dms-block"
                 onInput={ this.onEndDateInput }
                 placeholder={ this._translate('e.g. { sample }', {

packages/dmn-js-decision-table/src/features/simple-date-edit/components/OutputDateEdit.js

@@ -72,6 +72,7 @@ export default class OutputDateEdit extends Component {
 
         <div>
           <ValidatedInput
+            label={ this._translate('Date value') }
             onInput={ this.onInput }
             placeholder={ this._translate('e.g. { example } ', {
               example: getSampleDate()

packages/dmn-js-decision-table/src/features/simple-date-time-edit/components/InputDateTimeEdit.js

@@ -167,6 +167,7 @@ export default class InputDateEdit extends Component {
 
         <div className="dms-fill-row">
           <InputSelect
+            label={ this._translate('Test type') }
             noInput={ true }
             onChange={ this.onTypeChange }
             options={ options }
@@ -176,13 +177,15 @@ export default class InputDateEdit extends Component {
         <h4 class="dms-heading">
           {
             type === BETWEEN
-              ? this._translate('Edit start date')
-              : this._translate('Set date')
+              ? this._translate('Edit start date and time')
+              : this._translate('Set date and time')
           }
         </h4>
 
         <div>
           <ValidatedInput
+            label={ type === BETWEEN ?
+              this._translate('Start date and time') : this._translate('Date and time') }
             className="start-date-input dms-block"
             onInput={ this.onStartDateInput }
             placeholder={ this._translate('e.g. { sample }', {
@@ -204,14 +207,15 @@ export default class InputDateEdit extends Component {
         {
           type === BETWEEN
             && <h4 class="dms-heading">
-              { this._translate('Edit end date') }
+              { this._translate('Edit end date and time') }
             </h4>
         }
 
         {
           type === BETWEEN
             && <div>
               <ValidatedInput
+                label={ this._translate('End date and time') }
                 className="end-date-input dms-block"
                 onInput={ this.onEndDateInput }
                 placeholder={ this._translate('e.g. { sample }', {

packages/dmn-js-decision-table/src/features/simple-date-time-edit/components/OutputDateTimeEdit.js

@@ -72,6 +72,7 @@ export default class OutputDateEdit extends Component {
 
         <div>
           <ValidatedInput
+            label={ this._translate('Date and time value') }
             onInput={ this.onInput }
             placeholder={ this._translate('e.g. { sample }', {
               sample: getSampleDate()

packages/dmn-js-decision-table/src/features/simple-duration-edit/components/DurationInput.js

@@ -50,6 +50,7 @@ export class DurationInput extends Component {
   render() {
     return (
       <ValidatedInput
+        label={ this.props.label }
         type="text"
         onInput={ this.onInput }
         placeholder={ this._getPlaceholder() }

packages/dmn-js-decision-table/src/features/simple-duration-edit/components/InputDurationEdit.js

@@ -217,6 +217,7 @@ export default class InputDurationEdit extends Component {
 
         <div className="dms-fill-row dms-input-duration-edit-row">
           <InputSelect
+            label={ this._translate('Comparison operator') }
             noInput={ true }
             onChange={ this.onComparisonOperatorChange }
             options={ comparisonOperatorOptions }
@@ -225,6 +226,7 @@ export default class InputDurationEdit extends Component {
           &nbsp;
 
           <DurationInput
+            label={ this._translate('Duration value') }
             type={ this._type }
             className="comparison-duration-input"
             onInput={ this.onComparisonValueChange }
@@ -250,6 +252,7 @@ export default class InputDurationEdit extends Component {
 
         <div className="dms-fill-row dms-input-duration-edit-row">
           <InputSelect
+            label={ this._translate('Range start operator') }
             noInput={ true }
             onChange={ this.onRangeStartTypeChange }
             options={ rangeTypeOptions }
@@ -258,6 +261,7 @@ export default class InputDurationEdit extends Component {
           &nbsp;
 
           <DurationInput
+            label={ this._translate('Range start value') }
             type={ this._type }
             className="range-start-duration-input"
             onInput={ this.onRangeStartValueChange }
@@ -270,6 +274,7 @@ export default class InputDurationEdit extends Component {
 
         <div className="dms-fill-row dms-input-duration-edit-row">
           <InputSelect
+            label={ this._translate('Range end operator') }
             noInput={ true }
             onChange={ this.onRangeEndTypeChange }
             options={ rangeTypeOptions }
@@ -278,6 +283,7 @@ export default class InputDurationEdit extends Component {
           &nbsp;
 
           <DurationInput
+            label={ this._translate('Range end value') }
             type={ this._type }
             className="range-end-duration-input"
             onInput={ this.onRangeEndValueChange }
@@ -313,6 +319,7 @@ export default class InputDurationEdit extends Component {
 
         <div className="dms-fill-row">
           <InputSelect
+            label={ this._translate('Test type') }
             noInput={ true }
             onChange={ this.onTypeChange }
             options={ typeOptions }