docs: fix a11y issues in composition app

angular.json

@@ -71,9 +71,7 @@
                 "output": "hljs-themes"
               }
             ],
-            "styles": [
-              "projects/composition/src/styles.scss"
-            ],
+            "styles": ["projects/composition/src/styles.scss"],
             "scripts": [],
             "browser": "projects/composition/src/main.ts"
           },
@@ -87,8 +85,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "11kb",
-                  "maximumError": "22kb"
+                  "maximumWarning": "22kb",
+                  "maximumError": "40kb"
                 }
               ],
               "outputHashing": "all",

projects/composition/src/app/app.component.html

@@ -1,4 +1,4 @@
-<div class="top-toolbar">
+<header class="top-toolbar">
   <img src="assets/ui_logo.svg" alt="CPS UI Kit logo" />
   <span>Consumer Products UI Kit</span>
   @if (version) {
@@ -9,20 +9,41 @@
   @if (showThemeToggle) {
     <app-theme-toggle />
   }
-</div>
-<div class="composition-container">
+</header>
+<div
+  class="composition-container"
+  [class.sidebar-open-mobile]="sidebarExpanded && isMobile">
+  <div class="sidebar-toggle-wrap" [class.sidebar-expanded]="sidebarExpanded">
+    <button
+      #sidebarToggle
+      type="button"
+      class="sidebar-toggle-btn"
+      [attr.aria-expanded]="sidebarExpanded"
+      aria-label="Toggle navigation sidebar"
+      (click)="toggleSidebar()">
+      <cps-icon icon="burger-arrow" class="sidebar-toggle-icon"></cps-icon>
+    </button>
+  </div>
   <app-navigation-sidebar
-    [isExpanded]="sidebarExpanded"></app-navigation-sidebar>
-  <div
+    #sidebar
+    [isExpanded]="sidebarExpanded"
+    (linkClicked)="onNavLinkClicked()"></app-navigation-sidebar>
+  @if (sidebarExpanded && isMobile) {
+    <div
+      class="sidebar-backdrop"
+      (click)="toggleSidebar()"
+      aria-hidden="true"></div>
+  }
+  <main
     class="composition-body"
-    [ngClass]="{ 'composition-body-collapsed': !sidebarExpanded }">
+    id="main-content"
+    tabindex="-1"
+    [ngClass]="{ 'composition-body-collapsed': !sidebarExpanded }"
+    (keydown.shift.tab)="focusActiveNavItem($event)">
     <div class="composition-body-toolbar">
-      <cps-icon
-        icon="burger-arrow"
-        class="sidebar-toggle-icon"
-        (click)="toggleSidebar()"></cps-icon>
+      <div class="sidebar-toggle-placeholder" aria-hidden="true"></div>
       <span class="composition-body-toolbar-title">{{ componentTitle }}</span>
     </div>
     <router-outlet></router-outlet>
-  </div>
+  </main>
 </div>

projects/composition/src/app/app.component.scss

@@ -1,20 +1,21 @@
 @use '../variables.scss' as vars;
+@use '../../../cps-ui-kit/styles/mixins' as *;
 
 .top-toolbar {
   height: vars.$top-tbar-height;
   background-color: var(--cps-surface-body);
   display: flex;
-  padding: 0 14px;
+  padding: 0 0.875rem;
   align-items: center;
-  border-bottom: 1px solid var(--cps-border-color);
-  gap: 8px;
+  border-bottom: 0.0625rem solid var(--cps-border-color);
+  gap: 0.5rem;
   img {
-    width: 42px;
-    height: 42px;
+    width: 2.625rem;
+    height: 2.625rem;
   }
 
   span {
-    font-size: 18px;
+    font-size: 1.125rem;
     color: var(--cps-accent-primary);
     line-height: 1;
 
@@ -27,14 +28,62 @@
     b {
       color: var(--cps-accent-primary);
       font-weight: 700;
-      font-size: 18px;
+      font-size: 1.125rem;
     }
   }
 
   app-theme-toggle {
     margin-left: auto;
   }
 }
+.sidebar-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 2001;
+}
+
+.sidebar-toggle-wrap {
+  position: fixed;
+  top: vars.$top-tbar-height;
+  height: vars.$inner-tbar-height;
+  left: 0;
+  z-index: 101;
+  display: flex;
+  align-items: center;
+  transition: left 0.2s;
+
+  &.sidebar-expanded {
+    left: vars.$sidebar-width;
+  }
+
+  .sidebar-toggle-icon {
+    transform: rotate(180deg);
+    transition: transform 0.2s;
+  }
+
+  &.sidebar-expanded .sidebar-toggle-icon {
+    transform: rotate(0deg);
+  }
+}
+
+.sidebar-toggle-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--cps-text-primary);
+  margin-left: 0.75rem;
+  margin-right: 0.5rem;
+  padding: 0.125rem;
+  border-radius: 0.25rem;
+  &:focus-visible {
+    @include focus-ring();
+  }
+}
+
 .composition-container {
   display: flex;
   height: calc(100vh - vars.$top-tbar-height);
@@ -45,32 +94,56 @@
     width: 100%;
     overflow-x: auto;
     background-color: vars.$composition-background;
+    outline: none;
     .composition-body-toolbar {
       height: vars.$inner-tbar-height;
       background: var(--cps-surface-elevated);
-      border-bottom: 1px solid var(--cps-border-color);
+      border-bottom: 0.0625rem solid var(--cps-border-color);
       display: flex;
       align-items: center;
       justify-content: space-between;
       color: var(--cps-text-primary);
-      font-size: 20px;
+      font-size: 1.25rem;
       .composition-body-toolbar-title {
         margin: 0 auto;
       }
-      .sidebar-toggle-icon {
-        margin-left: 12px;
-        margin-right: 8px;
-        cursor: pointer;
+      .sidebar-toggle-placeholder {
+        display: flex;
+        flex: 0 0 2.5rem;
       }
     }
   }
+  &.sidebar-open-mobile {
+    .sidebar-toggle-wrap {
+      z-index: 2003;
+      top: calc(vars.$top-tbar-height + 0.375rem);
+      left: calc(vars.$sidebar-width - 2.5rem);
+      height: 1.5rem;
+      width: 1.5rem;
+      justify-content: center;
+      background: var(--cps-surface-highlight);
+      border-radius: 0.25rem;
+      opacity: 0;
+      animation: sidebar-btn-appear 0s linear 0.2s forwards;
+      transition: none;
+    }
+
+    .sidebar-toggle-btn {
+      background: transparent;
+      margin: 0;
+      padding: 0;
+      flex: 0 0 1.5rem;
+      height: 1.5rem;
+    }
+  }
+
   .composition-body-collapsed {
     width: 100%;
-    .composition-body-toolbar {
-      .sidebar-toggle-icon {
-        transform: rotate(180deg);
-        transition: 0.2s;
-      }
-    }
+  }
+}
+
+@keyframes sidebar-btn-appear {
+  to {
+    opacity: 1;
   }
 }