Added aria-label to things that are otherwise labelled in the UI.

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}
         />
       }
     })

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
         }}

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}
         />
       }
 

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}
       />
     }
   }

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)}

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(','))}
         />

src/components/SpecField.jsx

@@ -6,14 +6,15 @@ import Fieldset from './Fieldset'
 
 
 const typeMap = {
-  color: Block,
+  color: () => Block,
-  enum: Fieldset,
+  enum: ({fieldSpec}) => (Object.keys(fieldSpec.values).length <= 3 ? Fieldset : Block),
-  number: Block,
+  number: () => Block,
-  boolean: Block,
+  boolean: () => Block,
-  array: Fieldset,
+  array: () => Fieldset,
-  resolvedImage: Block,
+  resolvedImage: () => Block,
-  number: Block,
+  number: () => Block,
-  string: 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;
     }

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}