Merge pull request #16 from tylerkrupicka/accessibility

Accessibility Fixes

Author: tylerkrupicka

README.md

@@ -17,7 +17,7 @@ This package has a few major improvements over predecessors: builds, styles, and
 
 The styles in this package are all scoped, with key colors still being customizable. There are no extra margins or overflow rules and text properties are all inherited from the page. This makes the view much easier to integrate anywhere you need it.
 
-The default color theme is based on solarized, and font weights are modified to increase readability.
+The default color theme is based on solarized, and font weights are modified to increase readability. The component uses semantic HTML elements and tries to be fully keyboard accessible.
 
 ## Usage
 

harness/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <div :class="{ dark: dark }">
+    <div :class="{ tree: true, dark: dark }">
       <json-view
         :data="data"
         rootKey="view"
@@ -96,7 +96,11 @@ export default Vue.extend({
   cursor: pointer;
 }
 
-.dark {
+.tree {
+  padding: 5px;
+}
+
+.tree.dark {
   background-color: #121212;
   border-radius: 4px;
 }

src/JSONView.vue

@@ -143,7 +143,7 @@ export default Vue.extend({
   --vjc-null-color: #6c71c4;
   --vjc-arrow-size: 6px;
   --vjc-arrow-color: #444;
-  --vjc-hover-color: rgba(0, 0, 0, 0.15);
+  --vjc-hover-color: rgba(0, 0, 0, 0.2);
 
   margin-left: 0;
   width: 100%;
@@ -152,7 +152,7 @@ export default Vue.extend({
 .root-item.dark {
   --vjc-key-color: #80d8ff;
   --vjc-valueKey-color: #fdf6e3;
-  --vjc-hover-color: rgba(255, 255, 255, 0.15);
+  --vjc-hover-color: rgba(255, 255, 255, 0.2);
   --vjc-arrow-color: #fdf6e3;
 }
 </style>

src/JSONViewItem.vue

@@ -2,11 +2,15 @@
   <div class="json-view-item">
     <!-- Handle Objects and Arrays-->
     <div v-if="data.type === 'object' || data.type === 'array'">
-      <div @click.stop="toggleOpen" class="data-key">
+      <button
+        @click.stop="toggleOpen"
+        class="data-key"
+        :aria-expanded="open ? 'true' : 'false'"
+      >
         <div :class="classes"></div>
         {{ data.key }}:
         <span class="properties">{{ lengthString }}</span>
-      </div>
+      </button>
       <json-view-item
         v-on:selected="bubbleSelected"
         v-for="child in data.children"
@@ -21,6 +25,10 @@
     <div
       :class="valueClasses"
       v-on:click="clickEvent(data)"
+      @keyup.enter="clickEvent(data)"
+      @keyup.space="clickEvent(data)"
+      :role="canSelect ? 'button' : undefined"
+      :tabindex="canSelect ? '0' : undefined"
       v-if="data.type === 'value'"
     >
       <span class="value-key">{{ data.key }}:</span>
@@ -157,10 +165,23 @@ export default Vue.extend({
     &:hover {
       background-color: rgba(0, 0, 0, 0.08);
     }
+
+    &:focus {
+      outline: 2px solid var(--vjc-hover-color);
+    }
   }
 }
 
 .data-key {
+  // Button overrides
+  font-size: 100%;
+  font-family: inherit;
+  border: 0;
+  padding: 0;
+  background-color: transparent;
+  width: 100%;
+
+  // Normal styles
   color: var(--vjc-key-color);
   display: flex;
   align-items: center;
@@ -174,6 +195,14 @@ export default Vue.extend({
     background-color: var(--vjc-hover-color);
   }
 
+  &:focus {
+    outline: 2px solid var(--vjc-hover-color);
+  }
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
   .properties {
     font-weight: 300;
     opacity: 0.9;