Merge pull request #745 from craftcms/a11y/additions

Start adding accessibility section to control panel page

Author: AugustMiller

docs/.vuepress/components/Journey.vue

@@ -2,7 +2,7 @@
     <ol class="journey theme-default-content-override">
         <li v-for="(segment, i) in segments" :key="i" class="step">
             {{ ' ' }}
-            <span class="step-label">{{ segment }}</span><span v-if="i < (segments.length - 1)" class="step-arrow" aria-hidden="true">&rarr;</span>
+            <span :class="{ 'step-label': true, 'step-label--is-user-defined': segment.isDynamic }">{{ segment.label }}</span><span v-if="i < (segments.length - 1)" class="step-arrow" aria-hidden="true">&rarr;</span>
         </li>
     </ol>
 </template>
@@ -14,7 +14,23 @@ export default {
   },
   computed: {
     segments() {
-        return this.path.split(',').map((s) => s.trim());
+      let arr = this.path.split(',')
+        .map((s) => s.trim())
+        .map(function(s) {
+          if (s.indexOf('*') === 0) {
+            return {
+                label: s.substring(1),
+                isDynamic: true,
+            };
+          }
+
+          return {
+            label: s,
+            isDynamic: false,
+          };
+        });
+
+      return arr;
     }
   }
 };
@@ -39,6 +55,10 @@ export default {
     border-radius: 3px;
     padding: 0.2em 0.4em;
     white-space: nowrap;
+
+    &--is-user-defined {
+        border-style: dashed;
+    }
 }
 
 .step-arrow {

docs/.vuepress/sets/craft-cms.js

@@ -244,6 +244,7 @@ module.exports = {
             "development/eager-loading",
             "development/image-transforms",
             "development/forms",
+            "development/accessibility",
             "development/graphql",
             "development/collections",
           ]

docs/.vuepress/theme/global-components/Badge.vue

@@ -55,6 +55,15 @@ export default {
     background-color: #e7c000;
   }
 
+  &.default {
+    @apply bg-transparent leading-none h-auto;
+
+    border-width: 1px;
+    border-color: var(--border-color);
+    color: var(--sidebar-link-color);
+    padding: 4px calc(4px - 0.1em) 4px 5px;
+  }
+
   /* Custom Badge Types */
 
   &.verb {

docs/.vuepress/theme/global-components/InfoHud.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="info-hud">
     <v-popover placement="right" :click="handleClick">
-      <button>
+      <button :title="activateLabel">
         <svg class="info-circle" viewBox="0 0 512 512">
           <path
             d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"
@@ -30,6 +30,12 @@ export default {
       e.preventDefault();
     },
   },
+  props: {
+    activateLabel: {
+      type: String,
+      default: 'Open',
+    },
+  },
 };
 </script>
 

docs/.vuepress/theme/global-components/Term.vue

@@ -9,23 +9,25 @@
             :title="`${label} in the Glossary`"
             v-text="label"></a>
 
-        <InfoHud>
+        <InfoHud :activateLabel="triggerLabel">
             <template v-if="loaded">
                 <h3 class="glossary-term-heading" v-text="this.term.title"></h3>
                 <div class="glossary-term-content theme-default-content" v-html="this.term.summaryHtml"></div>
 
-                <a :href="this.term.url" target="_blank" class="glossary-term-more">
-                    <span class="glossary-term-more-label">View in the glossary</span>
-                    <span class="glossary-term-more-arrow">&rarr;</span>
-                </a>
-
-                <div v-if="this.term.docsLinks.length" class="glossary-term-docs-links">
-                    <h4 class="glossary-term-heading">In the documentation…</h4>
-                    <ul class="glossary-term-docs-links-list">
-                        <li v-for="(link, i) in this.term.docsLinks" v-bind:key="i" class="glossary-term-docs-link">
-                            <a :href="link.url">{{ link.title }}</a>
-                        </li>
-                    </ul>
+                <div class="glossary-term-nav">
+                    <a :href="this.term.url" target="_blank" class="glossary-term-more">
+                        <span class="glossary-term-more-label">View in the glossary</span>
+                        <span class="glossary-term-more-arrow">&rarr;</span>
+                    </a>
+    
+                    <div v-if="this.term.docsLinks.length" class="glossary-term-docs-links">
+                        <h4 class="glossary-term-heading">In the documentation…</h4>
+                        <ul class="glossary-term-docs-links-list">
+                            <li v-for="(link, i) in this.term.docsLinks" v-bind:key="i" class="glossary-term-docs-link">
+                                <a :href="link.url">{{ link.title }}</a>
+                            </li>
+                        </ul>
+                    </div>
                 </div>
             </template>
             <template v-else>
@@ -55,6 +57,10 @@
     padding: 0;
 }
 
+.glossary-term-nav {
+    @apply mt-2;
+}
+
 .glossary-term-more {}
 
 .glossary-term-more-label {
@@ -115,7 +121,10 @@ export default {
         },
         apiUrl() {
             return `${CRAFTCOM_BASE_URL}/api/glossary/${this.slug}`;
-        }
+        },
+        triggerLabel() {
+            return `Open definition for “${this.label}”`;
+        },
     },
     mounted() {},
     data() {