Merge pull request #24 from educorvi/accessibility

Accessibility
educorvi · Feb 1, 2021 · 36a65fe · 36a65fe
2 parents f6aaa15 + 099b350
commit 36a65fe
Show file tree

Hide file tree

Showing 18 changed files with 56 additions and 29 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -25,12 +25,12 @@ export default {
       });
     },
     isWizardSelected() {
-      return this.form === forms["5 Sicherheitsregeln (Wizard)"];
+      return this.form === forms["Showcase"];
     }
   },
   data() {
     return {
-      form: forms["Showcase"]
+      form: forms["5 Sicherheitsregeln"]
     }
   },
   created() {

diff --git a/src/components/FormFields/Array.vue b/src/components/FormFields/Array.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="item.items && item.items.type" class="embDiv w-100">
+  <div v-if="item.items && item.items.type" class="embDiv w-100" :id="schemaName">
     <draggable v-model="fieldData" handle=".handle">
       <transition-group name="arrayedit">
         <div v-for="(field, index) in fieldData" :key="field.gentime.toLocaleString()">
@@ -32,9 +32,7 @@ export default {
   name: "Array",
   components: {ArrayItem, draggable},
   mixins: [formFieldMixin],
-  props:{
-
-  },
+  props: {},
   computed: {
     //Used to generate a fake UI-Scheme for the Arrayitems
     fakeUI() {
@@ -88,7 +86,9 @@ export default {
     fieldData(newValue) {
       this.send(newValue);
       if (newValue !== undefined && newValue.length > 0 && !newValue[0].gentime) {
-        this.fieldData = this.fieldData.map(item => {return {value:item, gentime: Math.random().toString(36).substr(2, 9)}})
+        this.fieldData = this.fieldData.map(item => {
+          return {value: item, gentime: Math.random().toString(36).substr(2, 9)}
+        })
       }
     }
   },

diff --git a/src/components/FormFields/Boolean.vue b/src/components/FormFields/Boolean.vue
@@ -1,5 +1,7 @@
 <template>
-  <b-checkbox ref="child" v-model="fieldData" :required="required" :name="title" :switch="switches"><span v-if="ui.label || ui.label === undefined">{{ title }}</span></b-checkbox>
+  <b-checkbox :id="schemaName" ref="child" v-model="fieldData" :required="required" :name="title" :switch="switches">
+    <span v-if="ui.label || ui.label === undefined">{{ title }}</span>
+  </b-checkbox>
 </template>
 
 <script>

diff --git a/src/components/FormFields/DateTime.vue b/src/components/FormFields/DateTime.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <b-input-group :name="title">
+    <b-input-group :name="title" :id="schemaName">
       <b-input ref="child" v-model="date" type="date"/>
       <b-input-group-append>
         <b-input v-model="time" style="border-bottom-left-radius: 0; border-top-left-radius: 0" type="time"/>

diff --git a/src/components/FormFields/File.vue b/src/components/FormFields/File.vue
@@ -1,5 +1,7 @@
 <template>
-<b-form-file v-model="files" :required="required" :placeholder="getUIOption('placeholder')" :drop-placeholder="getUIOption('drop-placeholder')" :multiple="getUIOption('allowMultibleFiles')" :accept="getUIOption('acceptedFileType')"/>
+  <b-form-file :id="schemaName" v-model="files" :required="required" :placeholder="getUIOption('placeholder')"
+               :drop-placeholder="getUIOption('drop-placeholder')" :multiple="getUIOption('allowMultibleFiles')"
+               :accept="getUIOption('acceptedFileType')"/>
 </template>
 
 <script>
@@ -52,4 +54,4 @@ export default {
 
 <style scoped>
 
-</style>
+</style>
diff --git a/src/components/FormFields/FormField.vue b/src/components/FormFields/FormField.vue
@@ -8,9 +8,10 @@
         <!--        Content is prepended to the input field-->
         <slot name="prepend"></slot>
       </b-input-group-prepend>
-      <component :is="type" :class="schemaName" :isInteger="item.type === 'integer'" :json="json" :name="title"
+      <component :is="type" :isInteger="item.type === 'integer'" :json="json" :name="title"
                  :required="required"
-                 :ui="ui" @changedData="loopUp" ref="child" :filledData="filledData"/>
+                 :ui="ui" @changedData="loopUp" ref="child" :filledData="filledData"
+                 :autocomplete="(ui.options ||{}).autocomplete || 'on'"/>
       <b-input-group-append :is-text="!noText" v-if="hasSlot()">
         <!--        Content is appended to the input field-->
         <slot></slot>

diff --git a/src/components/FormFields/MultibleChoice.vue b/src/components/FormFields/MultibleChoice.vue
@@ -1,5 +1,6 @@
 <template>
   <b-form-checkbox-group
+      :id="schemaName"
       ref="child"
       v-model="fieldData"
       :name="title"

diff --git a/src/components/FormFields/Number.vue b/src/components/FormFields/Number.vue
@@ -1,6 +1,8 @@
 <template>
-  <b-form-input ref="child" v-if="!ui.options || !ui.options.rating" v-model="fieldData" :name="title" :placeholder="ui.options ? ui.options.placeholder : ''"
+  <b-form-input ref="child" v-if="!ui.options || !ui.options.rating" v-model="fieldData" :name="title"
+                :placeholder="ui.options ? ui.options.placeholder : ''"
                 :required="required" :step="item.multipleOf || 1"
+                :id="schemaName"
                 type="number" :min="item.minimum" :max="item.maximum"></b-form-input>
   <b-form-rating ref="child" v-else v-model="fieldData" :name="title" :required="required" :stars="item.maximum || 5"
                  variant="warning"></b-form-rating>

diff --git a/src/components/FormFields/Object.vue b/src/components/FormFields/Object.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="embDiv">
-    <FormWrap :json="json" :ui="fakeUI" @changedData="collect" :filledData="filledData"/>
+    <FormWrap :json="json" :ui="fakeUI" @changedData="collect" :filledData="filledData" :id="schemaName"/>
   </div>
 </template>
 

diff --git a/src/components/FormFields/Radiobuttons.vue b/src/components/FormFields/Radiobuttons.vue
@@ -1,5 +1,6 @@
 <template>
   <b-form-radio-group
+      :id="schemaName"
       v-model="fieldData"
       :name="title"
       :options="options"

diff --git a/src/components/FormFields/Select.vue b/src/components/FormFields/Select.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-form-select ref="child" v-model="fieldData" :name="title" :options="options"/>
+  <b-form-select :id="schemaName" ref="child" v-model="fieldData" :name="title" :options="options"/>
 </template>
 
 <script>

diff --git a/src/components/FormFields/String.vue b/src/components/FormFields/String.vue
@@ -1,9 +1,10 @@
 <template>
   <b-form-textarea ref="child" v-if="ui.options && ui.options.multi" v-model="fieldData" :name="title"
                    :placeholder="ui.options ? ui.options.placeholder : ''"
-                   :rows="typeof ui.options.multi === 'number' ? ui.options.multi : 3"/>
+                   :rows="typeof ui.options.multi === 'number' ? ui.options.multi : 3"
+                   :id="schemaName"/>
   <b-input ref="child" v-else-if="(ui.format || item.format) !== 'date-time'" v-model="fieldData" :name="title"
-           :placeholder="ui.options ? ui.options.placeholder : ''" :type="ui.format || item.format"/>
+           :placeholder="ui.options ? ui.options.placeholder : ''" :type="ui.format || item.format" :id="schemaName"/>
   <date-time ref="child" v-else :json="json" :ui="ui" @changedData="loopUp"/>
 </template>
 

diff --git a/src/components/FormFields/Tags.vue b/src/components/FormFields/Tags.vue
@@ -1,5 +1,7 @@
 <template>
-  <b-form-tags v-model="fieldData" ref="child" :required="required" :placeholder="ui.options ? ui.options.placeholder : ''" :tag-pills="ui.options.tags.pills" :tag-variant="ui.options.tags.variant" remove-on-delete></b-form-tags>
+  <b-form-tags :id="schemaName" v-model="fieldData" ref="child" :required="required"
+               :placeholder="ui.options ? ui.options.placeholder : ''" :tag-pills="ui.options.tags.pills"
+               :tag-variant="ui.options.tags.variant" remove-on-delete></b-form-tags>
 </template>
 
 <script>
@@ -19,4 +21,4 @@ export default {
 
 <style scoped>
 
-</style>
+</style>
diff --git a/src/exampleSchemas/5_Sicherheitsregeln/ui.json b/src/exampleSchemas/5_Sicherheitsregeln/ui.json
@@ -4,26 +4,36 @@
   "elements": [
     {
       "type": "Control",
-      "scope": "#/properties/ort"
+      "scope": "#/properties/ort",
+      "options": {
+        "autocomplete": "postal-code"
+      }
     },
     {
       "type": "Control",
       "scope": "#/properties/dateTime"
     },
     {
       "type": "Control",
-      "scope": "#/properties/anlageverantwortlicher"
+      "scope": "#/properties/anlageverantwortlicher",
+      "options": {
+        "autocomplete": "name"
+      }
     },
     {
       "type": "Control",
       "scope": "#/properties/arbeitsverantwortlicher",
       "options": {
-        "multi": true
+        "multi": true,
+        "autocomplete": "name"
       }
     },
     {
       "type": "Control",
-      "scope": "#/properties/arbeitsausfuehrender"
+      "scope": "#/properties/arbeitsausfuehrender",
+      "options": {
+        "autocomplete": "name"
+      }
     },
     {
       "type": "Divider"

diff --git a/src/exampleSchemas/showcase/schema.json b/src/exampleSchemas/showcase/schema.json
@@ -6,9 +6,9 @@
       "type": "string",
       "minLength": 1
     },
-    "gender": {
+    "title": {
       "type": "string",
-      "enum": ["Male", "Female", "Divers"]
+      "enum": ["Mrs.", "Mr.", "Miss", "Ms.", "Dr."]
     },
     "description": {
       "type": "string"

diff --git a/src/exampleSchemas/showcase/ui.json b/src/exampleSchemas/showcase/ui.json
@@ -11,13 +11,14 @@
     },
     {
       "type": "Control",
-      "scope": "#/properties/gender"
+      "scope": "#/properties/title"
     },
     {
       "type": "Control",
       "scope": "#/properties/name",
       "options": {
-        "placeholder": "Full Name"
+        "placeholder": "Full Name",
+        "autocomplete": "name"
       }
     },
     {

diff --git a/src/schemas/ui/control.schema.json b/src/schemas/ui/control.schema.json
@@ -140,6 +140,10 @@
               "type": "boolean"
             }
           }
+        },
+        "autocomplete": {
+          "type": "string",
+          "description": "Specifies what should be autocompleted by the browser. Possible values are listed here: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values"
         }
       }
     },

diff --git a/src/schemas/ui/ui.schema.json b/src/schemas/ui/ui.schema.json
@@ -3,7 +3,7 @@
   "$id": "https://educorvi.github.io/vue_json_form/schemas/ui.schema.json",
   "title": "UI Schema",
   "description": "Schema for the UI Schema",
-  "oneOf": [
+  "anyOf": [
     {"$ref": "https://educorvi.github.io/vue_json_form/schemas/layout.schema.json"},
     {"$ref": "https://educorvi.github.io/vue_json_form/schemas/wizard.schema.json"}
   ]