Merge branch 'dev' into main

package.json

@@ -1,6 +1,6 @@
 {
   "name": "portfolio",
-  "version": "1.05",
+  "version": "1.06",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

src/app/app.component.html

@@ -2,7 +2,7 @@
 <p-confirmDialog></p-confirmDialog>
 <div class="app-container">
   <jm-header></jm-header>
-  <div class="page-contents">
+  <main class="page-contents" id="main" #main>
     <ng-container *ngIf="!loading; else appLoading">
       <router-outlet
         *ngIf="(!mnts.activeMaintenanceEvent || ignoreMaintenance) && !inits.initializationError"
@@ -24,5 +24,5 @@
       ></jm-loading-spinner>
     </ng-template>
     <jm-footer></jm-footer>
-  </div>
+  </main>
 </div>

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { InitializerService } from './services/initializer.service';
 import { ToastService } from './services/toast.service';
 import { MaintenanceService } from './services/maintenance.service';
@@ -10,6 +10,8 @@ import { environment } from 'src/environments/environment';
   styleUrls: ['./app.component.scss'],
 })
 export class AppComponent implements OnInit {
+  @ViewChild('main') main!: ElementRef;
+
   public loading = true;
 
   public ignoreMaintenance = environment.ignoreMaintenance;

src/app/classes/ExternalSitePresence.ts

@@ -14,6 +14,8 @@ export class ExternalSitePresence {
 
   address!: string;
 
+  alt!: string;
+
   icon?: string;
 
   styleClass?: string;

src/app/modules/shared/components/color-theme-toggler/color-theme-toggler.component.html

@@ -1,4 +1,12 @@
-<button *ngIf="ths.activeTheme; else themeNotLoadedYet" pButton class="p-button p-button-text p-button-outline" [icon]="ths.activeTheme.icon" (click)="ths.toggleLightDark()" [pTooltip]="ths.darkMode ? 'Switch to light mode' : 'Switch to dark mode'"></button>
+<button
+  *ngIf="ths.activeTheme; else themeNotLoadedYet"
+  pButton
+  class="p-button p-button-text p-button-outline"
+  [icon]="ths.activeTheme.icon"
+  (click)="ths.toggleLightDark()"
+  [pTooltip]="ths.darkMode ? 'Switch to light mode' : 'Switch to dark mode'"
+  [attr.aria-label]="ths.darkMode ? 'Switch to light mode' : 'Switch to dark mode'"
+></button>
 <ng-template #themeNotLoadedYet>
   <jm-loading-spinner [showMessage]="false" [useDots]="false"></jm-loading-spinner>
 </ng-template>

src/app/modules/shared/components/matomo-opt-out/matomo-opt-out.component.html

@@ -1,5 +1,18 @@
-<p-dialog class="matomo-opt-out-dialog" [(visible)]="popupOpen" header="Data collection opt-out">
-  <div *ngIf="!loading; else optStateLoading" class="opt-out-container">
+<p-dialog
+  class="matomo-opt-out-dialog"
+  [(visible)]="popupOpen"
+  header="Data collection opt-out"
+  aria-live="polite"
+  aria-atomic="false"
+  aria-relevant="additions"
+>
+  <div
+    *ngIf="!loading; else optStateLoading"
+    class="opt-out-container"
+    aria-live="polite"
+    aria-atomic="false"
+    aria-relevant="additions"
+  >
     <div class="opt-btn-row">
       <label class="opt-out-label" for="opt-out">Usage metrics:</label>
       <p-selectButton name="opt-out" id="opt-out" [options]="stateOptions" [ngModel]="selected.value"
@@ -13,4 +26,4 @@
   </ng-template>
 </p-dialog>
 
-<button pButton class="p-button p-button-text" icon="pi pi-eye-slash" (click)="popupOpen=true" [disabled]="popupOpen" pTooltip="Review privacy settings"></button>
+<button pButton class="p-button p-button-text" icon="pi pi-eye-slash" (click)="popupOpen=true" [disabled]="popupOpen" pTooltip="Review privacy settings" [attr.aria-label]="'Review privacy settings'"></button>

src/app/modules/shared/components/social-icons/social-icons.component.html

@@ -7,5 +7,7 @@
     [pTooltip]="site.label"
     (click)="exss.onClickSocialIcon(site)"
     [href]="site.address"
+    role="link"
+    [attr.aria-label]="site.alt"
   ></a>
 </div>

src/app/modules/splash/greeting/greeting.component.html

@@ -2,11 +2,11 @@
  <img
     class="my-picture"
     src="../../../../assets/images/me.png"
-    alt="Julie Muzina"
+    alt="Picture of Julie Muzina. She is a young woman of about 25, with long, brown, hair, and light blue eyes. She is wearing an orange button-up shirt and a jacket, and is wearing a rubber duck necklace."
   />
   <div class="greeting-text">
     <h1 class="salutation">
-      <div class="hand-wave-wrapper rot-45">
+      <div class="hand-wave-wrapper rot-45" aria-label="Waving hand icon">
         <i class="fa fa-hand fa-bounce"></i>
       </div>
       Hi, I'm Julie!

src/app/modules/splash/resume/job-card/job-card.component.html

@@ -1,48 +1,30 @@
 <div class="job-container">
   <div class="job-main-details job-flex-item">
-    <span class="job-title">{{ job.title }}</span>
-    <span class="job-employer">{{ job.employer.name }}</span>
-    <span class="job-time-period"
+    <span class="job-title" aria-description="Job title">{{ job.title }}</span>
+    <span class="job-employer" aria-description="Employer name">{{ job.employer.name }}</span>
+    <span class="job-time-period" aria-description="Employment time period"
       >{{ job.started_at | date : "MMM y" }} -
       {{ (job.ended_at | date : "MMM y") || "Present" }}
       ({{ job.started_at | humanizedDuration : job.ended_at }})</span
     >
-    <ul *ngIf="job.responsibilities?.length">
-      <ng-container
-        *ngIf="job.responsibilities.length > abbreviatedJobDescriptionMaxLength"
-      >
-        <ng-container *ngIf="!showMore">
-          <li
-            *ngFor="
-              let responsibility of job.responsibilities
-                | slice : 0 : abbreviatedJobDescriptionMaxLength
-            "
-          >
-            {{ responsibility.text }}
-          </li>
-          <span class="job-description-length-toggler" (click)="showMore = true"
-            >Show more</span
-          >
-        </ng-container>
-      </ng-container>
-      <ng-container
-        *ngIf="
-          showMore ||
-          job.responsibilities.length <= abbreviatedJobDescriptionMaxLength
+    <ul
+      *ngIf="job.responsibilities?.length"
+      aria-description="Job responsibilities"
+      aria-live="polite"
+      aria-atomic="false"
+      aria-relevant="all"
+    >
+      <li
+        *ngFor="
+          let responsibility of job.responsibilities
+            | slice : 0 : (showMore ? job.responsibilities.length : abbreviatedJobDescriptionMaxLength)
         "
       >
-        <li *ngFor="let responsibility of job.responsibilities">
-          {{ responsibility.text }}
-        </li>
-        <span
-          *ngIf="
-            job.responsibilities.length > abbreviatedJobDescriptionMaxLength
-          "
-          class="job-description-length-toggler"
-          (click)="showMore = false"
-          >Show less</span
-        >
-      </ng-container>
+        {{ responsibility.text }}
+      </li>
+      <span *ngIf="job.responsibilities.length > abbreviatedJobDescriptionMaxLength" class="job-description-length-toggler" (click)="showMore = !showMore" [attr.aria-description]="(job.responsibilities.length - abbreviatedJobDescriptionMaxLength) + 'responsibilities are hidden for brevit. Click to show them.'" role="link"
+        >Show {{showMore ? 'less' : 'more'}}</span
+      >
     </ul>
   </div>
   <!--  <div class="job-skill-icons job-flex-item">

src/app/services/external-sites.service.ts

@@ -10,6 +10,7 @@ export class ExternalSitesService {
     label: 'Portfolio (Development build)',
     address: 'https://dev.jmuzina.io',
     icon: 'pi pi-wrench',
+    alt: 'Link to development portfolio site',
     confirmNavigation: {
       header: 'Open development build?',
       message:
@@ -23,18 +24,21 @@ export class ExternalSitesService {
     label: 'Main site',
     address: 'https://jmuzina.io',
     icon: 'pi pi-server',
+    alt: 'Link to production portfolio site',
   });
 
   public externalSites: ExternalSitePresence[] = [
     new ExternalSitePresence({
       label: 'GitHub',
       address: 'https://github.com/jmuzina',
       icon: 'pi pi-github',
+      alt: 'Link to Julie\'s GitHub profile',
     }),
     new ExternalSitePresence({
       label: 'LinkedIn',
       address: 'https://www.linkedin.com/in/julie-muzina-7b0603164',
       icon: 'pi pi-linkedin',
+      alt: 'Link to Julie\'s LinkedIn profile',
     }),
   ];
 

src/index.html

@@ -13,9 +13,18 @@
     <meta name="description" content="I'm an experienced full-stack engineer from Cleveland, Ohio with a passion for creating useful, user-focused applications!" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <link id="app-theme-supporting" rel="stylesheet" type="text/css" />
+    <script>
+      const doSkipNav = () => {
+        const main = document.getElementById('main');
+        if (!main) return;
+        main.setAttribute('tabIndex', -1);
+        main.focus();
+      }
+    </script>
   </head>
 
   <body>
+    <a id="skipnav" role="link" onclick="doSkipNav()">Skip to main content</a>
     <jm-root></jm-root>
   </body>
 </html>

src/styles.scss

@@ -3,6 +3,7 @@ html {
   width: 100svw;
   overflow: hidden;
 }
+
 :root {
   --content-padding : 4px;
   --border-radius-a: 6px;
@@ -33,6 +34,23 @@ body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 }
 
+
+#skipnav {
+  background: var(--primary-color);
+  height: 30px;
+  z-index: 500;
+  left: 50%;
+  padding: 8px;
+  position: absolute;
+  transform: translateY(-100%);
+  transition: transform 0.3s;
+  text-decoration: underline;
+  cursor: pointer;
+  &:focus {
+    transform: translateY(0%);
+  }
+}
+
 .fade {
   transition: all 2s ease;
 }