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

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

@@ -11,6 +11,10 @@ export const am: Translations = {
     tagline: "የቁጥጥር ማዕከል",
   },
 
+  a11y: {
+    skipToContent: "ወደ ዋናው ይዘት ዝለል",
+  },
+
   msg: {
     genericError: "የሆነ ስህተት ተፈጥሯል። እባክዎ እንደገና ይሞክሩ።",
     serverError: "የሰርቨር ስህተት። እባክዎ ቆየት ብለው እንደገና ይሞክሩ።",

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

@@ -10,6 +10,11 @@ export const en = {
     tagline: 'Control Center',
   },
 
+  // 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/backoffice/src/app/layouts/BackofficeLayout.tsx

@@ -8,6 +8,7 @@ import { AppHeader, AppSidebar } from '@ema-platform/ui';
 import type { NavItem, NavSection } from '@ema-platform/ui';
 import { notify } from '@ema-platform/ui';
 import { AppTopNav, filterByPermissions } from '@ema-platform/ui';
+import { SkipLink, MAIN_CONTENT_ID } from '@ema-platform/ui';
 import { baseApi, useGetQueueCountsQuery } from '@ema-platform/api';
 import { usePermissions } from '@ema-platform/auth';
 import { SUPPORTED_LANGUAGES } from '../i18n/config';
@@ -143,6 +144,10 @@ export function BackofficeLayout() {
   const isSidebar = layoutMode === "sidebar";
 
   return (
+    <>
+      {/* First focusable element on the page, so a keyboard user can bypass
+          the 20-plus nav items instead of tabbing through them every time. */}
+      <SkipLink />
     <AppShell
       header={{ height: isSidebar ? 74 : HEADER_HEIGHT }}
       navbar={
@@ -226,7 +231,7 @@ export function BackofficeLayout() {
         </AppShell.Navbar>
       )}
 
-      <AppShell.Main>
+      <AppShell.Main id={MAIN_CONTENT_ID}>
         <div key={location.pathname} className="ema-page-enter">
           <Outlet />
         </div>
@@ -263,5 +268,6 @@ export function BackofficeLayout() {
         </Drawer>
       )}
     </AppShell>
+    </>
   );
 }