feat(a11y): add skip link for improved navigation accessibility

apps/portal/src/app/i18n/locales/am.ts

@@ -10,6 +10,10 @@ export const am: Translations = {
     tagline: 'የባሕር ፍቃድና የምስክር ወረቀት አገልግሎቶች',
   },
 
+  a11y: {
+    skipToContent: 'ወደ ዋናው ይዘት ዝለል',
+  },
+
   msg: {
     genericError: 'የሆነ ስህተት ተፈጥሯል። እባክዎ እንደገና ይሞክሩ።',
     serverError: 'የሰርቨር ስህተት። እባክዎ ቆየት ብለው እንደገና ይሞክሩ።',

apps/portal/src/app/i18n/locales/en.ts

@@ -9,6 +9,11 @@ export const en = {
     tagline: 'Maritime licensing & certification services',
   },
 
+  // Strings only assistive technology encounters.
+  a11y: {
+    skipToContent: 'Skip to main content',
+  },
+
   msg: {
     genericError: 'Something went wrong. Please try again.',
     serverError: 'Server error. Please try again later.',

apps/portal/src/app/layouts/PortalLayout.tsx

@@ -26,6 +26,8 @@ import {
   AppHeader,
   AppSidebar,
   filterByPermissions,
+  SkipLink,
+  MAIN_CONTENT_ID,
 } from "@ema-platform/ui";
 import type { NavItem } from "@ema-platform/ui";
 import {
@@ -281,6 +283,10 @@ export function PortalLayout() {
     : "?";
 
   return (
+    <>
+      {/* First focusable element on the page, so a keyboard user can bypass
+          the nav instead of tabbing through it on every navigation. */}
+      <SkipLink />
     <AppShell
       header={{ height: 74 }}
       navbar={{
@@ -335,7 +341,7 @@ export function PortalLayout() {
         />
       </AppShell.Navbar>
 
-      <AppShell.Main>
+      <AppShell.Main id={MAIN_CONTENT_ID}>
         <div key={location.pathname} className="ema-page-enter">
           <Outlet />
         </div>
@@ -364,5 +370,6 @@ export function PortalLayout() {
         />
       </Drawer>
     </AppShell>
+    </>
   );
 }