ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2025-12-25 23:50:02 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
orangemug
2020-06-10 18:16:43 +01:00
parent 6c751fe1c4
commit bfada7cace
8 changed files with 33 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/InputArray.jsx
View File

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

2
src/components/InputAutocomplete.jsx
View File

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

5
src/components/InputDynamicArray.jsx
View File

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

7
src/components/InputEnum.jsx
View File

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

2
src/components/InputFont.jsx
View File

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

3
src/components/SingleFilterEditor.jsx
View File

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

26
src/components/SpecField.jsx
View File

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

2
src/components/_ZoomProperty.jsx
View File

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