release/3.4.0

.cz.json

@@ -1,7 +1,7 @@
 {
   "commitizen": {
     "name": "cz_customize",
-    "version": "3.3.0",
+    "version": "3.4.0",
     "tag_format": "$major.$minor.$patch$prerelease",
     "version_type": "semver",
     "bump_message": "release $current_version \u2192 $new_version",

.github/workflows/bd-fe.yml

@@ -60,7 +60,7 @@ env:
 
 jobs:
   build_deploy:
-    name: 🎁 Pushing to ${{ github.ref_name == 'main' && 'PRD' || 'STG' }}
+    name: Deploying to ${{ github.ref_name == 'main' && 'PRD' || 'STG' }}
     runs-on: ubuntu-latest
     concurrency:
       group: build-deploy
@@ -110,8 +110,6 @@ jobs:
           echo PUBLIC_SENTRY_DSN=${{ secrets.PUBLIC_SENTRY_DSN }} >> front/.env
           echo PUBLIC_ENV=${{ secrets.PUBLIC_ENV }} >> front/.env
           cat front/.env
-          echo "RELEASE_NAME=stg-${name/\//-}" >> $GITHUB_ENV
-          echo "DIST=$(date +%y%m%d-%H%M%S)" >> $GITHUB_ENV
 
       - name: ⬢ Setup Node & Cache
         uses: actions/setup-node@v3

.github/workflows/bdt-fe.yml

@@ -22,7 +22,7 @@ env:
 
 jobs:
   build_deploy:
-    name: 🚀 Build & Deploy
+    name: 🚀 
     uses: ./.github/workflows/bd-fe.yml
     secrets:
       AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
@@ -49,7 +49,7 @@ jobs:
       GH_WORKFLOW_TOKEN: ${{ secrets.GH_WORKFLOW_TOKEN }}
 
   backstop:
-    name: 🧐 Visual Regression
+    name: 👀 
     needs: build_deploy
     uses: ./.github/workflows/test-backstop.yml
     secrets:
@@ -61,7 +61,7 @@ jobs:
       REPORTS_DISTRIBUTION: ${{ secrets.REPORTS_DISTRIBUTION }}
 
   lighthouse:
-    name: 🎭 Performance
+    name: 🕯️
     needs: build_deploy
     uses: ./.github/workflows/test-lighthouse.yml
     secrets:
@@ -73,7 +73,7 @@ jobs:
       GH_WORKFLOW_TOKEN: ${{ secrets.GH_WORKFLOW_TOKEN }}
 
   pagespeed:
-    name: 📈 Metrics
+    name: 📈
     needs: build_deploy
     uses: ./.github/workflows/test-psi.yml
     secrets:

.github/workflows/test-backstop.yml

@@ -1,4 +1,4 @@
-name: 🙈 Run BackstopJS
+name: 🙈 BackstopJS
 run-name: "${{ github.ref_name == 'main' && 'PRD' || 'STG' }} - BackstopJS ${{ github.event_name == 'pull_request' && format('PR #{0}: {1} on ', github.event.pull_request.number, github.event.pull_request.title) || format('on latest {0}', github.ref_name) }}"
 
 on:
@@ -110,7 +110,7 @@ jobs:
       - name: Summary
         if: always()
         env:
-          REPORT_PATH: ${{ github.ref_name == 'main' && 'prod' || 'stg' }}
+          REPORT_PATH: ${{ github.ref_name == 'main' && 'prd' || 'stg' }}
         run: |
           cd _ci/backstop
           FAIL_TABLE=$(./_utils/parse-report.sh ${{ vars.REPORTS_DOMAIN }} $REPORT_PATH)

.github/workflows/test-lighthouse.yml

@@ -23,7 +23,7 @@ env:
 
 jobs:
   lighthouse:
-    name: ⛵️ Auditing
+    name: ⛵️ Lighthouse
     runs-on: ubuntu-latest
 
     environment:

.github/workflows/test-psi.yml

@@ -19,7 +19,7 @@ env:
 
 jobs:
   psi:
-    name: 📊 PSI
+    name: 📊 Page Speed Insights
     runs-on: ubuntu-latest
 
     environment:

CHANGELOG.md

@@ -2,6 +2,38 @@
 
 All notable changes to this project will be documented in this file.
 
+## [3.4.0] - 2023-10-11
+
+### 💡 Features
+
+- ***(front)*** Enhances mini PageNav TOC keyboard navigation focus (#712)
+- ***(front)*** Adds focusTrap action and implementation on PageNav (#711)
+
+### 🐛 Bug Fixes
+
+- ***(ci)*** Removes second set of gh env exports
+- ***(front)*** Adds  to post headline
+- ***(github)*** Updates reports path in summary
+
+### ♻️  Refactor
+
+- ***(ci)*** Reduces cli prompt lengths and adds back bump commit message
+
+### 🪮  Styling
+
+- ***(front)*** Adjusts gradient lengths
+- ***(github)*** Adjusts naming of workflow steps and jobs
+
+### ✅ Testing
+
+- ***(backstop)*** Updates gh-stg refs post-gradient updates
+- ***(backstop)*** Updates test wait times for pagescroll
+- ***(backstop)*** Updates gh-prd backstop refs
+
+### ⚙️  Miscellaneous Tasks
+
+- ***(github)*** Improves on workflow naming conventions
+
 ## [3.3.0] - 2023-10-10
 
 ### 💡 Features

_ci/backstop/scenarios/cats/cats_select_all_category.js

@@ -9,7 +9,7 @@ module.exports = {
   onReadyScript: 'playwright/onReadyCats.js',
   clickSelector:
     '.aside .page-navigation ul.page-navigation-list .page-navigation-category-all a',
-  postInteractionWait: 1000,
+  postInteractionWait: 2000,
   selectors: ['viewport'],
   selectorExpansion: false,
   misMatchThreshold: 0.2,

_ci/backstop/scenarios/post/post_aside_toc_click.js

@@ -6,7 +6,7 @@ module.exports = {
   url: POST_URL,
   viewports: aboveSmallViewports,
   clickSelector: '.post .aside .page-navigation-list a[href="#what"]',
-  postInteractionWait: 800,
+  postInteractionWait: 2000,
   selectors: ['viewport'],
   selectorExpansion: false,
   misMatchThreshold: 0.2,

_utils/_scripts/bump.sh

@@ -5,31 +5,43 @@ cd $directory/../
 config="_utils/_cliff/config.toml"
 file="CHANGELOG.md"
 str=$(cz bump --dry-run | awk '/tag to create: /')
+curr=$(cz version -p)
 ver=${str//tag to create: /}
 git cliff -c $config --unreleased --tag $ver --prepend ${file}
 git ls-files --modified
-read -p $'\e[31mWould you like to cut the release branch now?\e[0m: ' -n 1 -r
 echo # newline
+read -p $'\e[31mCut the release branch now?\e[0m: ' -n 1 -r
 if [[ ! $REPLY =~ ^[Yy]$ ]]; then
-    git status
-    read -p $'\e[31mWould you like to keep the CHANGELOG.md updates?\e[0m: ' -n 1 -r
     echo # newline
-    if [[ ! $REPLY =~ ^[Yy]$ ]]; then
-        git restore CHANGELOG.md
-        exit 1
-    fi
-    exit 1
+    echo 'OK. Changes have been removed from the log.'
+    git status
+    exit 0
 else
+echo # newline
     branch=$(git branch --show-current)
     [[ $branch != release* ]] && git checkout -b release/$ver
     branch=$(git branch --show-current)
     echo "${branch} created!"
+    echo # newline
+    git status
+    echo # newline
+    read -p $'\e[31mCommit the CHANGELOG.md updates?\e[0m: ' -n 1 -r
+    if [[ ! $REPLY =~ ^[Yy]$ ]]; then
+        echo # newline
+        git restore CHANGELOG.md
+        exit 0
+    else
+        echo # newline
+        git add .
+        git commit -m "chore(release): prepare for ${ver}"
+    fi
 fi
-read -p $'\e[31mWould you like to bump the version now?\e[0m: ' -n 1 -r
 echo # newline
+read -p $'\e[31mBump the version now?\e[0m: ' -n 1 -r
 if [[ ! $REPLY =~ ^[Yy]$ ]]; then
-    exit 1
+    exit 0
 else
+    echo # newline
     cdfront
     npm version $ver -s
     cdback
@@ -38,27 +50,30 @@ else
     cz bump --files-only
     git status
 fi
-read -p $'\e[31mWould you like to stage release changes?\e[0m: ' -n 1 -r
 echo # newline
+read -p $'\e[31mStage file bump changes?\e[0m: ' -n 1 -r
 if [[ ! $REPLY =~ ^[Yy]$ ]]; then
+    echo # newline
     git status
-    read -p $'\e[31mWould you like to undo these updates?\e[0m: ' -n 1 -r
+    read -p $'\e[31mUndo these updates?\e[0m: ' -n 1 -r
     echo # newline
     if [[ ! $REPLY =~ ^[Yy]$ ]]; then
-        exit 1
+        exit 0
+    else
+        git restore .
+        exit 0
     fi
-    git restore .
-    exit 1
 else
+    echo # newline
     git add .
-    git commit -m "chore(release): prepare for ${ver}"
+    git commit -m "release ${curr} → ${ver}"
 fi
-echo
-read -p $'\e[31mWould you like to push to origin now?\e[0m: ' -n 1 -r
 echo # newline
+read -p $'\e[31mPush to origin now?\e[0m: ' -n 1 -r
 if [[ ! $REPLY =~ ^[Yy]$ ]]; then
-    exit 1
+    exit 0
 else
+    echo # newline
     git push --set-upstream origin $branch
     printDgBnr "Congratulations! ${branch} is queuing up for deployment!"
 fi

back/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cms.dgrebb.com",
   "private": true,
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "cms.dgrebb.com",
   "scripts": {
     "develop": "strapi develop",

front/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dgrebb.com",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "private": true,
   "type": "module",
   "scripts": {

front/src/lib/_utils/actions.js

@@ -0,0 +1,34 @@
+/**
+ * Traps the focus within the given node when enabled.
+ *
+ * @param {Node} node - The node within which to trap the focus.
+ * @param {boolean} enabled - Whether the focus trap is enabled.
+ * @returns {boolean} - Returns false if the focus trap is not enabled.
+ */
+export const focusTrap = (node, enabled) => {
+  if (!enabled) return false;
+  var focusableEls = node.querySelectorAll(
+    'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])'
+  );
+  var firstFocusableEl = focusableEls[0];
+  var lastFocusableEl = focusableEls[focusableEls.length - 1];
+
+  node.addEventListener('keydown', function (e) {
+    var isTab = e.key === 'Tab' || e.keyCode === 9;
+    var isEsc = e.key === 'Escape' || e.keyCode === 27;
+    if (isTab) {
+      var activeElement = document.activeElement;
+      var focusElement = e.shiftKey ? firstFocusableEl : lastFocusableEl;
+      if (activeElement === focusElement) {
+        e.preventDefault();
+        (e.shiftKey ? lastFocusableEl : firstFocusableEl).focus();
+      }
+    } else if (isEsc) {
+      const miniNavToggle = document.getElementById('page-navigation-checkbox');
+      miniNavToggle.checked = false;
+      miniNavToggle.focus();
+    } else {
+      return;
+    }
+  });
+};

front/src/lib/components/PageNav.svelte

@@ -1,8 +1,8 @@
 <script>
-  import { onMount } from 'svelte';
   import TableOfContents from '@components/content/TableOfContents.svelte';
   import ClosePageNav from '@components/icons/ClosePageNav.svelte';
   import { categoryClick, relatedClick } from '@utils/uiHelpers.js';
+  import { focusTrap } from '@utils/actions.js';
   import ListIcon from '~icons/gg/list';
 
   export let contents = false;
@@ -44,7 +44,7 @@
       <ClosePageNav classList="page-navigation-close" />
     </label>
   {/if}
-  <div class="page-navigation-list">
+  <div class="page-navigation-list" use:focusTrap={mini}>
     {#if contents && contents.length}
       <h2>Table of Contents</h2>
       <TableOfContents

front/src/lib/components/content/TableOfContents.svelte

@@ -5,10 +5,24 @@
   export let pageFenceClickHandler = null;
   export let activeLink = null;
   export let setActiveLink = null;
+
+  const TOCAnchorFocus = (e) => {
+    if (e.key === 'Enter' || e.keyCode === 13) {
+      const anchor = e.target.getAttribute('href');
+      const focusTarget = document.querySelector(
+        `.post-article a[href="${anchor}"]`
+      );
+      e.preventDefault();
+      pageFenceClickHandler(e);
+      focusTarget.focus();
+    } else {
+      return;
+    }
+  };
 </script>
 
 <ul class="toc">
-  {#each Object.values(contents) as { text, link }, i}
+  {#each contents as { text, link }, i}
     <li>
       <a
         on:click={(e) => {
@@ -20,6 +34,9 @@
         data-sveltekit-replacestate
         data-sveltekit-noscroll="false"
         use:activeLink
+        on:keydown={(e) => {
+          TOCAnchorFocus(e);
+        }}
       >
         <SvelteMarkdown source={text} isInline />
       </a>