[R20-1493] Add accessible label to links opening in a new window

examples/nuxt-app/test/fixtures/landingpage/home.json

@@ -235,7 +235,7 @@
         }
       ],
       "props": {
-        "html": "<p>Here is <em>some</em> sample <strong>rich</strong> text content</p>"
+        "html": "<p>Here is <em>some</em> sample <strong>rich</strong> text content, with a <a href=\"https://google.com\" target=\"_blank\" class=\"rpl-text-link rpl-u-focusable-inline\">random link<span class=\"rpl-u-visually-hidden\">(opens in a new window)</span></a> thrown in.</p>"
       }
     },
     {

packages/nuxt-ripple/components/TideDynamicComponents.vue

@@ -6,7 +6,7 @@ import type {
 import { computed } from 'vue'
 import groupDynamicComponents from '../utils/groupDynamicComponents'
 interface Props {
-  components: TideDynamicPageComponent[]
+  components: TideDynamicPageComponent<any>[]
   fullWidth?: boolean
   hasSidebar?: boolean
 }

packages/nuxt-ripple/types.d.ts

@@ -108,6 +108,11 @@ export interface TidePageBase {
   [key: string]: unknown
 }
 
+export interface TideDynamicPageComponentBase {
+  hasSidebar: boolean
+  hasTitle: boolean
+}
+
 export type TideDynamicPageComponent<T> = {
   id: string
   component: string

packages/ripple-tide-api/src/utils/markup-transpiler/default-plugins.ts

@@ -116,6 +116,7 @@ const pluginDocuments = function (this: any) {
       </div>
     </div>
   </span>
+  <span class="rpl-u-visually-hidden">(opens in a new window)</span>
   </a>
 </figure>
 `)
@@ -207,6 +208,15 @@ const pluginLinks = function (this: any) {
       $anchor.addClass('rpl-text-link rpl-u-focusable-inline')
     }
 
+    if (
+      $anchor.attr('target') === '_blank' &&
+      $anchor.find('span.rpl-u-visually-hidden').length === 0
+    ) {
+      $anchor.append(
+        '<span class="rpl-u-visually-hidden">(opens in a new window)</span>'
+      )
+    }
+
     return $anchor
   })
 }

packages/ripple-tide-api/src/utils/markup-transpiler/how-do-i-test-cheerio.md

@@ -0,0 +1,9 @@
+## How do I test cheerio?
+
+```mermaid
+flowchart TD
+  A[BE api]-->|cheerio|B[FE api]
+  B-->C[nuxt]
+  E[integration\nfixtures]-->D[mockserver]-->|cypress|C
+  F[unit test\nfixtures]-->|cheerio|G[unit tests]
+```

packages/ripple-tide-landing-page/components/global/TideLandingPage/Content.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
-defineProps<{
+import { TideDynamicPageComponentBase } from '@dpc-sdp/nuxt-ripple/types'
+
+interface Props extends TideDynamicPageComponentBase {
   html: string
-}>()
+}
+
+defineProps<Props>()
 </script>
 
 <template>

packages/ripple-tide-landing-page/mapping/components/basic-text/basic-text-mapping.test.ts

@@ -23,7 +23,8 @@ const rawData = {
   field_paragraph_body: {
     value: '<h2>Test value</h2>',
     format: 'rich_text',
-    processed: '<h2>Test processed</h2><p>Test para</p><h3>Test subheading</h3>'
+    processed:
+      '<h2>Test processed</h2><p>Test para and <a href="https://www.vic.gov.au" target="_blank">link to homepage</a>.</p><h3>Test subheading</h3>'
   },
   id: 'ae1ffcca-fd04-4733-ae35-85a65d6d6452',
   type: 'paragraph--basic_text'
@@ -45,7 +46,7 @@ const result: TideDynamicPageComponent<ITideBasicText> = {
     }
   ],
   props: {
-    html: '<h2 id="test-processed">Test processed</h2><p>Test para</p><h3 id="test-subheading">Test subheading</h3>'
+    html: '<h2 id="test-processed">Test processed</h2><p>Test para and <a href="https://www.vic.gov.au" target="_blank" class="rpl-text-link rpl-u-focusable-inline">link to homepage<span class="rpl-u-visually-hidden">(opens in a new window)</span></a>.</p><h3 id="test-subheading">Test subheading</h3>'
   }
 }
 

packages/ripple-ui-core/src/components/content/RplContent.stories.mdx

@@ -135,6 +135,7 @@ export const SingleTemplate = (args) => ({
               <span class="rpl-file__meta">1.5 mb</span>
             </div>
           </div>
+          <span class="rpl-u-visually-hidden">(opens in a new window)</span>
         </a>
       </figure>
   `
@@ -165,6 +166,7 @@ export const SingleTemplate = (args) => ({
               <div class="rpl-file__updated">Updated July 17, 2022</div>
             </div>
           </div>
+          <span class="rpl-u-visually-hidden">(opens in a new window)</span>
         </a>
         <figcaption v-if="caption" class="rpl-document__caption rpl-type-p-small">
           And this is example of a longer description of the document, this one seems very descriptive.

packages/ripple-ui-core/src/components/content/fixtures/testcontent.html

@@ -136,6 +136,7 @@ <h3>H3 Heading</h3>
         <span class="rpl-file__meta">1.5 mb</span>
       </div>
     </div>
+    <span class="rpl-u-visually-hidden">(opens in a new window)</span>
   </a>
 </figure>
 
@@ -165,6 +166,7 @@ <h3>H3 Heading</h3>
         <div class="rpl-file__updated">Updated July 17, 2022</div>
       </div>
     </div>
+    <span class="rpl-u-visually-hidden">(opens in a new window)</span>
   </a>
   <figcaption v-if="caption" class="rpl-document__caption rpl-type-p-small">
     And this is example of a longer description of the document, this one seems

packages/ripple-ui-core/src/components/document/RplDocument.vue

@@ -63,6 +63,9 @@ const onClick = () => {
           <slot name="info"></slot>
         </div>
       </div>
+      <span v-if="openInNewWindow" class="rpl-u-visually-hidden">
+        (opens in a new window)
+      </span>
     </a>
     <figcaption
       v-if="$slots.caption"

packages/ripple-ui-core/src/components/text-link/RplTextLink.vue

@@ -1,15 +1,22 @@
 <script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+
 interface Props {
   url: string
   text?: string
 }
 
 defineProps<Props>()
+
+const openInNewWindow = computed(() => useAttrs()['target'] === '_blank')
 </script>
 
 <template>
   <RplLink ref="link" class="rpl-text-link rpl-u-focusable-inline" :url="url">
     <slot>{{ text }}</slot>
+    <span v-if="openInNewWindow" class="rpl-u-visually-hidden">
+      (opens in a new window)
+    </span>
   </RplLink>
 </template>