Accessibility improvements, added font styling options.

niels-bosman · niels-bosman · commit 6e9fe7c1567d · 2021-04-28T21:05:22.000+02:00
diff --git a/README.md b/README.md
@@ -46,7 +46,9 @@ export default {
 | title         | `String`  | ❌         | ✅        | The title that is displayed next to the toggle.                                                    |
 | activeColor   | `String`  | `#9FD6AE` | ❌        | The color that is displayed when the toggler is active.                                            |
 | darkTheme     | `Boolean` | `false`   | ❌        | Set's dark mode to active. (note that this will not change the background like in the preview GIF) |
-| disabled      | `Boolean` | `false`   | ❌        | Disables the toggler.                                                                              |
+| disabled      | `Number`  | `false`   | ❌        | Disables the toggler.                                                                              |
+| fontSize      | `String`  | `16`      | ❌        | Sets the font size of the text next to the toggle                                                  |
+| fontWeight    | `Boolean` | `bold`    | ❌        | Sets the font weight of the text next to the toggle.                                               |
 | toggled       | `Boolean` | `true`    | ❌        | Sets the default value for the toggler.                                                            |
 
 ### Vue version support
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-toggle-component",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "main": "dist/vue-toggle-component.common.js",
   "files": [
     "dist/*"
diff --git a/src/components/VueToggle.vue b/src/components/VueToggle.vue
@@ -1,24 +1,33 @@
 <template>
   <section
-      :class="{'dark': darkTheme, 'disabled': disabled}"
-      :title="title"
-      class="wrapper"
+    :class="{'dark': darkTheme, 'disabled': disabled}"
+    :title="title"
+    class="wrapper"
   >
     <input
       :id="`_${name}`"
       v-model="toggleState"
+      :aria-checked="toggleState"
+      :aria-readonly="!toggleState"
       :disabled="disabled"
       :name="name"
       class="toggle"
+      role="checkbox"
       type="checkbox"
     />
     <label
-        :for="name"
-        :style="[toggleState && {'background': activeColor}]"
-        class="toggler"
-        @click="toggle"
+      :for="name"
+      :style="[toggleState && {background: activeColor}]"
+      class="toggler"
+      @click="toggle"
     />
-    <span class="title" @click="toggle">{{title}}</span>
+    <span
+      class="title"
+      @click="toggle"
+      :style="[{fontSize, fontWeight}]"
+    >
+      {{title}}
+    </span>
   </section>
 </template>
 
@@ -28,11 +37,13 @@ export default {
 
   props: {
     activeColor: {type: String, default: '#9FD6AE'},
-    darkTheme: {type: Boolean, default: false},
-    disabled: {type: Boolean, default: false },
-    name: {type: String, required: true},
-    title: {type: String, required: true},
-    toggled: {type: Boolean, default: false},
+    darkTheme:   {type: Boolean, default: false},
+    disabled:    {type: Boolean, default: false },
+    fontSize:    {type: Number, default: 16},
+    fontWeight:  {type: String, default: 'bold'},
+    name:        {type: String, required: true},
+    title:       {type: String, required: true},
+    toggled:     {type: Boolean, default: false},
   },
 
   data() {
@@ -65,7 +76,6 @@ export default {
 
 .title {
   display: inline-block;
-  font-weight: 700;
   line-height: 2em;
   vertical-align: middle;
 
diff --git a/vue-toggle-component/README.md b/vue-toggle-component/README.md
@@ -24,18 +24,18 @@ npm install vue-toggle-component --save
 #### Example
 ```html
 <template>
-    <VueToggle title="Toggle me" name="VueToggle"/>
+  <VueToggle title="Toggle me" name="VueToggle"/>
 </template>
 
 <script>
-    import VueToggle from "vue-toggle-component";
+import VueToggle from "vue-toggle-component";
 
-    export default {
-        name: 'App',
-        components: {
-            VueToggle
-        }
-    }
+export default {
+  name: 'App',
+  components: {
+    VueToggle
+  }
+}
 </script>
 ```
 
@@ -46,7 +46,9 @@ npm install vue-toggle-component --save
 | title         | `String`  | ❌         | ✅        | The title that is displayed next to the toggle.                                                    |
 | activeColor   | `String`  | `#9FD6AE` | ❌        | The color that is displayed when the toggler is active.                                            |
 | darkTheme     | `Boolean` | `false`   | ❌        | Set's dark mode to active. (note that this will not change the background like in the preview GIF) |
-| disabled      | `Boolean` | `false`   | ❌        | Disables the toggler.                                                                              |
+| disabled      | `Number`  | `false`   | ❌        | Disables the toggler.                                                                              |
+| fontSize      | `String`  | `16`      | ❌        | Sets the font size of the text next to the toggle                                                  |
+| fontWeight    | `Boolean` | `bold`    | ❌        | Sets the font weight of the text next to the toggle.                                               |
 | toggled       | `Boolean` | `true`    | ❌        | Sets the default value for the toggler.                                                            |
 
 ### Vue version support
diff --git a/vue-toggle-component/package.json b/vue-toggle-component/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-toggle-component",
-  "version": "1.0.12",
+  "version": "1.0.13",
 
   "main": "dist/vue-toggle-component.ssr.js",
   "browser": "dist/vue-toggle-component.esm.js",
diff --git a/vue-toggle-component/src/vue-toggle-component.vue b/vue-toggle-component/src/vue-toggle-component.vue
@@ -1,24 +1,33 @@
 <template>
   <section
-      :class="{'dark': darkTheme, 'disabled': disabled}"
-      :title="title"
-      class="wrapper"
+    :class="{'dark': darkTheme, 'disabled': disabled}"
+    :title="title"
+    class="wrapper"
   >
     <input
-        :id="`_${name}`"
-        v-model="toggleState"
-        :disabled="disabled"
-        :name="name"
-        class="toggle"
-        type="checkbox"
+      :id="`_${name}`"
+      v-model="toggleState"
+      :aria-checked="toggleState"
+      :aria-readonly="!toggleState"
+      :disabled="disabled"
+      :name="name"
+      class="toggle"
+      role="checkbox"
+      type="checkbox"
     />
     <label
-        :for="name"
-        :style="[toggleState && {'background': activeColor}]"
-        class="toggler"
-        @click="toggle"
+      :for="name"
+      :style="[toggleState && {background: activeColor}]"
+      class="toggler"
+      @click="toggle"
     />
-    <span class="title" @click="toggle">{{title}}</span>
+    <span
+      class="title"
+      @click="toggle"
+      :style="[{fontSize, fontWeight}]"
+    >
+      {{title}}
+    </span>
   </section>
 </template>
 
@@ -28,11 +37,13 @@ export default {
 
   props: {
     activeColor: {type: String, default: '#9FD6AE'},
-    darkTheme: {type: Boolean, default: false},
-    disabled: {type: Boolean, default: false },
-    name: {type: String, required: true},
-    title: {type: String, required: true},
-    toggled: {type: Boolean, default: false},
+    darkTheme:   {type: Boolean, default: false},
+    disabled:    {type: Boolean, default: false },
+    fontSize:    {type: Number, default: 16},
+    fontWeight:  {type: String, default: 'bold'},
+    name:        {type: String, required: true},
+    title:       {type: String, required: true},
+    toggled:     {type: Boolean, default: false},
   },
 
   data() {
@@ -62,7 +73,6 @@ export default {
 }
 .title {
   display: inline-block;
-  font-weight: 700;
   line-height: 2em;
   vertical-align: middle;
 }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "vue-toggle-component",`
`3`		`- "version": "1.0.12",`
	`3`	`+ "version": "1.0.13",`
`4`	`4`	`"main": "dist/vue-toggle-component.common.js",`
`5`	`5`	`"files": [`
`6`	`6`	`"dist/*"`