fixes a11y issues, adds to blockStreamfield

nasa-jpl · Aug 18, 2024 · cf6f1d1 · cf6f1d1
1 parent 252a59e
commit cf6f1d1
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 28 deletions.
diff --git a/packages/vue/src/components/BlockGist/BlockGist.vue b/packages/vue/src/components/BlockGist/BlockGist.vue
@@ -3,10 +3,10 @@ import { ref, watch } from 'vue'
 
 interface BlockGistProps {
   data: {
-    blockType: string
-    caption: string
-    id: string
-    url: string
+    blockType?: string
+    caption?: string
+    id?: string
+    url?: string
   }
 }
 
@@ -42,57 +42,81 @@ watch(
       />
     </template>
     <template v-else>
+      <div
+        id="iframe-description"
+        class="sr-only"
+      >
+        This iframe displays a code snippet from GitHub Gist.
+      </div>
       <iframe
         :src="gistUrl"
         width="100%"
         class="min-h-[500px]"
         frameborder="0"
+        title="Code snippet display"
+        aria-label="Code snippet display iframe"
+        aria-describedby="iframe-description"
+        aria-hidden="false"
       ></iframe>
-      <div
-        class="gist-caption"
-        v-html="
-          `${props.data.caption} <a href='${props.data.url}' target='_blank' class='underline text-action can-hover:hover:text-action-dark cursor-pointer'>View on GitHub</a>`
-        "
-      ></div>
+      <div class="gist-caption">
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <span v-html="props.data.caption"></span>
+        <a
+          :href="props.data.url"
+          target="_blank"
+          rel="noopener noreferrer"
+          title="View on GitHub"
+        >
+          {{ 'View on GitHub' }}
+        </a>
+      </div>
     </template>
   </div>
 </template>
 
 <style scoped lang="scss">
+.BlockGist {
+  margin: 1rem 0 0.5rem;
+
+  iframe {
+    @apply border border-gray-light-mid rounded-none pr-2;
+  }
+
+  .gist-caption {
+    @apply text-sm font-medium m-1 flex-wrap;
+
+    span {
+      p {
+        @apply text-gray-mid;
+      }
+    }
+
+    a {
+      @apply underline text-action can-hover:hover:text-action-dark cursor-pointer;
+      white-space: nowrap; /* Prevents the link from wrapping onto a new line */
+    }
+  }
+}
 body.ThemeVariantLight {
   .BlockGist {
-    margin: 1rem 0;
-
     iframe {
-      @apply border border-gray-light-mid rounded-lg;
+      @apply border-gray-light-mid;
     }
 
     .gist-caption {
-      @apply text-sm font-medium text-gray-mid-dark m-1;
-
-      a {
-        @apply underline text-action can-hover:hover:text-action-dark cursor-pointer;
-        white-space: nowrap; /* Prevents the link from wrapping onto a new line */
-      }
+      @apply text-gray-mid-dark;
     }
   }
 }
 
 body.ThemeVariantDark {
   .BlockGist {
-    margin: 1rem 0;
-
     iframe {
-      @apply border border-gray-dark rounded-lg bg-gray-light p-2;
+      @apply border-gray-mid-dark bg-gray-light;
     }
 
     .gist-caption {
-      @apply text-sm font-medium text-gray-light-mid m-1;
-
-      a {
-        @apply underline text-action can-hover:hover:text-action-dark cursor-pointer;
-        white-space: nowrap; /* Prevents the link from wrapping onto a new line */
-      }
+      @apply text-gray-light-mid;
     }
   }
 }

diff --git a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
@@ -166,6 +166,15 @@
         <BlockIframeEmbed :data="block" />
       </LayoutHelper>
 
+      <LayoutHelper
+        v-else-if="block.blockType == 'GitHubGistBlock'"
+        :key="`GitHubGistBlock${index}`"
+        indent="col-2"
+        class="lg:mb-18 mb-10"
+      >
+        <BlockGist :data="block" />
+      </LayoutHelper>
+
       <LayoutHelper
         v-else-if="block.blockType == 'TableBlock'"
         :key="`tableBlock${index}`"
@@ -235,6 +244,7 @@ import BlockTeaser from './../BlockTeaser/BlockTeaser.vue'
 import BlockText from './../BlockText/BlockText.vue'
 import BlockTwitterEmbed from './../BlockTwitterEmbed/BlockTwitterEmbed.vue'
 import BlockIframeEmbed from './../BlockIframeEmbed/BlockIframeEmbed.vue'
+import BlockGist from './../BlockGist/BlockGist.vue'
 import BlockVideo from './../BlockVideo/BlockVideo.vue'
 import BlockVideoEmbed from './../BlockVideoEmbed/BlockVideoEmbed.vue'
 import BlockAnchor from './../BlockAnchor/BlockAnchor.vue'
@@ -258,6 +268,7 @@ export interface StreamfieldBlockData extends BlockData {
   blocks: object[]
   value: string
   customLabel: string
+  url: string
   introduction: string
   teaserPage: object | string[]
   image: ImageObject
@@ -286,6 +297,7 @@ export default defineComponent({
     BlockText,
     BlockTwitterEmbed,
     BlockIframeEmbed,
+    BlockGist,
     BlockVideo,
     BlockVideoEmbed,
     BlockAnchor
@@ -297,6 +309,7 @@ export default defineComponent({
       default: 'default',
       validator: (prop: string): boolean => Object.keys(variants).includes(prop)
     },
+    // eslint-disable-next-line vue/require-default-prop
     data: {
       type: Array as PropType<StreamfieldBlockData[]>,
       required: false