From bfada7cace8d5b89f59def73b4883a1d3c301cf3 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Wed, 10 Jun 2020 18:16:43 +0100
Subject: [PATCH] Added aria-label to things that are otherwise labelled in the
 UI.

---
 src/components/InputArray.jsx         |  4 ++--
 src/components/InputAutocomplete.jsx  |  2 +-
 src/components/InputDynamicArray.jsx  |  5 ++++-
 src/components/InputEnum.jsx          |  7 ++++---
 src/components/InputFont.jsx          |  2 +-
 src/components/SingleFilterEditor.jsx |  3 +++
 src/components/SpecField.jsx          | 26 ++++++++++++++++----------
 src/components/_ZoomProperty.jsx      |  2 ++
 8 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/src/components/InputArray.jsx b/src/components/InputArray.jsx
index dc24362..885688f 100644
--- a/src/components/InputArray.jsx
+++ b/src/components/InputArray.jsx
@@ -89,7 +89,7 @@ export default class FieldArray extends React.Component {
           value={value[i]}
           required={containsValues ? true : false}
           onChange={this.changeValue.bind(this, i)}
-          aria-label={this.props['aria-label']}
+          aria-label={this.props['aria-label'] || this.props.label}
         />
       } else {
         return <InputString
@@ -98,7 +98,7 @@ export default class FieldArray extends React.Component {
           value={value[i]}
           required={containsValues ? true : false}
           onChange={this.changeValue.bind(this, i)}
-          aria-label={this.props['aria-label']}
+          aria-label={this.props['aria-label'] || this.props.label}
         />
       }
     })
diff --git a/src/components/InputAutocomplete.jsx b/src/components/InputAutocomplete.jsx
index 8d2027b..c2848f0 100644
--- a/src/components/InputAutocomplete.jsx
+++ b/src/components/InputAutocomplete.jsx
@@ -56,7 +56,6 @@ export default class InputAutocomplete extends React.Component {
       }}
     >
       <Autocomplete
-        aria-label={this.props['aria-label']}
         menuStyle={{
           position: "fixed",
           overflow: "auto",
@@ -68,6 +67,7 @@ export default class InputAutocomplete extends React.Component {
           style: null
         }}
         inputProps={{
+          'aria-label': this.props['aria-label'],
           className: "maputnik-string",
           spellCheck: false
         }}
diff --git a/src/components/InputDynamicArray.jsx b/src/components/InputDynamicArray.jsx
index 05d9a26..73851ff 100644
--- a/src/components/InputDynamicArray.jsx
+++ b/src/components/InputDynamicArray.jsx
@@ -65,27 +65,30 @@ export default class FieldDynamicArray extends React.Component {
         input = <InputUrl
           value={v}
           onChange={this.changeValue.bind(this, i)}
+          aria-label={this.props['aria-label'] || this.props.label}
         />
       }
       else if (this.props.type === 'number') {
         input = <InputNumber
           value={v}
           onChange={this.changeValue.bind(this, i)}
+          aria-label={this.props['aria-label'] || this.props.label}
         />
       }
       else if (this.props.type === 'enum') {
         const options = Object.keys(this.props.fieldSpec.values).map(v => [v, capitalize(v)]);
-
         input = <InputEnum
           options={options}
           value={v}
           onChange={this.changeValue.bind(this, i)}
+          aria-label={this.props['aria-label'] || this.props.label}
         />
       }
       else {
         input = <InputString
           value={v}
           onChange={this.changeValue.bind(this, i)}
+          aria-label={this.props['aria-label'] || this.props.label}
         />
       }
 
diff --git a/src/components/InputEnum.jsx b/src/components/InputEnum.jsx
index f066949..a3dd702 100644
--- a/src/components/InputEnum.jsx
+++ b/src/components/InputEnum.jsx
@@ -26,7 +26,8 @@ export default class InputEnum extends React.Component {
   }
 
   render() {
-    const {options, value, onChange, name} = this.props;
+    const {options, value, onChange, name, label} = this.props;
+    console.log("this.props", this.props)
 
     if(options.length <= 3 && optionsLabelLength(options) <= 20) {
       return <InputMultiInput
@@ -34,14 +35,14 @@ export default class InputEnum extends React.Component {
         options={options}
         value={value || this.props.default}
         onChange={onChange}
-        aria-label={this.props['aria-label']}
+        aria-label={this.props['aria-label'] || label}
       />
     } else {
       return <InputSelect
         options={options}
         value={value || this.props.default}
         onChange={onChange}
-        aria-label={this.props['aria-label']}
+        aria-label={this.props['aria-label'] || label}
       />
     }
   }
diff --git a/src/components/InputFont.jsx b/src/components/InputFont.jsx
index 9fc897b..5354084 100644
--- a/src/components/InputFont.jsx
+++ b/src/components/InputFont.jsx
@@ -44,7 +44,7 @@ export default class FieldFont extends React.Component {
         key={i}
       >
         <InputAutocomplete
-          aria-label={this.props['aria-label']}
+          aria-label={this.props['aria-label'] || this.props.name}
           value={value}
           options={this.props.fonts.map(f => [f, f])}
           onChange={this.changeFont.bind(this, i)}
diff --git a/src/components/SingleFilterEditor.jsx b/src/components/SingleFilterEditor.jsx
index 2b09431..57661dc 100644
--- a/src/components/SingleFilterEditor.jsx
+++ b/src/components/SingleFilterEditor.jsx
@@ -65,6 +65,7 @@ export default class SingleFilterEditor extends React.Component {
     return <div className="maputnik-filter-editor-single">
       <div className="maputnik-filter-editor-property">
         <InputAutocomplete
+          aria-label="key"
           value={propertyName}
           options={Object.keys(this.props.properties).map(propName => [propName, propName])}
           onChange={newPropertyName => this.onFilterPartChanged(filterOp, newPropertyName, filterArgs)}
@@ -72,6 +73,7 @@ export default class SingleFilterEditor extends React.Component {
       </div>
       <div className="maputnik-filter-editor-operator">
         <InputSelect
+          aria-label="function"
           value={filterOp}
           onChange={newFilterOp => this.onFilterPartChanged(newFilterOp, propertyName, filterArgs)}
           options={otherFilterOps}
@@ -80,6 +82,7 @@ export default class SingleFilterEditor extends React.Component {
       {filterArgs.length > 0 &&
       <div className="maputnik-filter-editor-args">
         <InputString
+          aria-label="value"
           value={filterArgs.join(',')}
           onChange={ v=> this.onFilterPartChanged(filterOp, propertyName, v.split(','))}
         />
diff --git a/src/components/SpecField.jsx b/src/components/SpecField.jsx
index 3b4dfcc..9d73f1c 100644
--- a/src/components/SpecField.jsx
+++ b/src/components/SpecField.jsx
@@ -6,14 +6,15 @@ import Fieldset from './Fieldset'
 
 
 const typeMap = {
-  color: Block,
-  enum: Fieldset,
-  number: Block,
-  boolean: Block,
-  array: Fieldset,
-  resolvedImage: Block,
-  number: Block,
-  string: Block
+  color: () => Block,
+  enum: ({fieldSpec}) => (Object.keys(fieldSpec.values).length <= 3 ? Fieldset : Block),
+  number: () => Block,
+  boolean: () => Block,
+  array: () => Fieldset,
+  resolvedImage: () => Block,
+  number: () => Block,
+  string: () => Block,
+  formatted: () => Block,
 };
 
 export default class SpecField extends React.Component {
@@ -26,9 +27,14 @@ export default class SpecField extends React.Component {
     const {props} = this;
 
     const fieldType = props.fieldSpec.type;
-    let TypeBlock = typeMap[fieldType];
 
-    if (!TypeBlock) {
+    const typeBlockFn = typeMap[fieldType];
+
+    let TypeBlock;
+    if (typeBlockFn) {
+      TypeBlock = typeBlockFn(props);
+    }
+    else {
       console.warn("No such type for '%s'", fieldType);
       TypeBlock = Block;
     }
diff --git a/src/components/_ZoomProperty.jsx b/src/components/_ZoomProperty.jsx
index 79ba4d9..eb55700 100644
--- a/src/components/_ZoomProperty.jsx
+++ b/src/components/_ZoomProperty.jsx
@@ -150,6 +150,7 @@ export default class ZoomProperty extends React.Component {
       >
         <td>
           <InputNumber
+            aria-label="Zoom"
             value={zoomLevel}
             onChange={changedStop => this.changeZoomStop(idx, changedStop, value)}
             min={0}
@@ -158,6 +159,7 @@ export default class ZoomProperty extends React.Component {
         </td>
         <td>
           <InputSpec
+            aria-label="Output value"
             fieldName={this.props.fieldName}
             fieldSpec={this.props.fieldSpec}
             value={value}