Update landmarks + Skip to Main Content link (#1973)

* Update landmarks. Add Skip to Main Content link.

ppr-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ppr-ui",
-  "version": "3.2.37",
+  "version": "3.2.38",
   "private": true,
   "appName": "Assets UI",
   "sbcName": "SBC Common Components",

ppr-ui/src/App.vue

@@ -3,6 +3,8 @@
     id="app"
     class="app-container"
   >
+    <SkipToMainContent mainContentId="main-content" />
+
     <!-- Dialogs -->
     <BaseDialog
       id="errorDialogApp"
@@ -23,18 +25,25 @@
       :showLoginMenu="false"
     />
 
+    <SbcSystemBanner
+      v-if="bannerText != null"
+      class="mt-n1 sbc-system-banner"
+      :show="bannerText != null"
+      type="warning"
+      icon="''"
+      :message="bannerText"
+      :dismissible="false"
+    />
+
+    <nav v-if="haveData">
+      <Breadcrumb />
+    </nav>
+
     <div class="app-body">
-      <main>
-        <SbcSystemBanner
-          v-if="bannerText != null"
-          class="mt-n1"
-          :show="bannerText != null"
-          type="warning"
-          icon="''"
-          :message="bannerText"
-          :dismissible="false"
-        />
-        <Breadcrumb v-if="haveData" />
+      <main
+        id="main-content"
+        tabindex="-1"
+      >
         <Tombstone
           v-if="haveData"
           :actionInProgress="actionInProgress"
@@ -74,7 +83,7 @@ import SbcHeader from 'sbc-common-components/src/components/SbcHeader.vue'
 import SbcFooter from 'sbc-common-components/src/components/SbcFooter.vue'
 import SbcSystemBanner from 'sbc-common-components/src/components/SbcSystemBanner.vue'
 import * as Dialogs from '@/components/dialogs'
-import { Breadcrumb } from '@/components/common'
+import { Breadcrumb, SkipToMainContent } from '@/components/common'
 import { Tombstone } from '@/components/tombstone'
 import * as Views from '@/views'
 import {
@@ -110,6 +119,7 @@ import { useAuth, useNavigation } from '@/composables'
 export default defineComponent({
   name: 'App',
   components: {
+    SkipToMainContent,
     SbcHeader,
     SbcFooter,
     Breadcrumb,
@@ -702,4 +712,9 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import '@/assets/styles/theme.scss';
+
+.sbc-system-banner {
+  min-height: 60px;
+  flex-grow: 0;
+}
 </style>

ppr-ui/src/components/common/SkipToMainContent.vue

@@ -0,0 +1,44 @@
+<template>
+  <a
+    :href="`#${props.mainContentId}`"
+    class="skip-main-content-link py-6 fs-16"
+    @click="skipToContent"
+  >
+    Skip to Main Content
+  </a>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  mainContentId: string
+}>()
+
+// Focuses on main content id and prevents anchor link in url
+const skipToContent = event => {
+  event.preventDefault()
+  const mainContent = document.getElementById(props.mainContentId)
+  if (mainContent) {
+    mainContent.focus()
+  }
+}
+</script>
+
+<style lang="scss">
+.skip-main-content-link {
+  position: absolute;
+  z-index: 100;
+  left: calc(50% - 100px);
+  transform: translateY(-100%);
+  width: 200px;
+  border: 2px solid #000;
+  border-radius: 4px;
+  color: black;
+  text-align: center;
+  text-decoration: none;
+  background: #fff;
+}
+
+.skip-main-content-link:focus {
+  transform: translateY(0%);
+}
+</style>

ppr-ui/src/components/common/index.ts

@@ -41,3 +41,4 @@ export { default as StaffPayment } from './StaffPayment.vue'
 export { default as CollapsibleCard } from './CollapsibleCard.vue'
 export { default as TabbedContainer } from './TabbedContainer.vue'
 export { default as SimpleTable } from './SimpleTable.vue'
+export { default as SkipToMainContent } from './SkipToMainContent.vue'

ppr-ui/tests/unit/App.spec.ts

@@ -5,7 +5,7 @@ import App from '@/App.vue'
 import SbcHeader from 'sbc-common-components/src/components/SbcHeader.vue'
 import SbcFooter from 'sbc-common-components/src/components/SbcFooter.vue'
 import { Tombstone } from '@/components/tombstone'
-import { Breadcrumb } from '@/components/common'
+import { Breadcrumb, SkipToMainContent } from '@/components/common'
 import {
   mockedDisableAllUserSettingsResponse,
   mockedFinancingStatementAll,
@@ -105,6 +105,7 @@ describe('App component basic rendering normal account', () => {
 
   it('renders the sub-components properly', async () => {
     expect(wrapper.findComponent(App).exists()).toBe(true)
+    expect(wrapper.findComponent(SkipToMainContent).exists()).toBe(true)
     expect(wrapper.findComponent(SbcHeader).exists()).toBe(true)
     expect(wrapper.findComponent(SbcFooter).exists()).toBe(true)
     expect(wrapper.findComponent(Tombstone).exists()).toBe(false)
@@ -126,4 +127,3 @@ describe('App component basic rendering normal account', () => {
     expect(store.getStateModel.userInfo.feeSettings.serviceFee).toBe(1)
   })
 })
-