Drafting an Accessible, Responsive Site Navigation Element

I recently set out to draft out an accessible, responsive site navigation element that can be dropped into projects with relative ease (with minimal-to-no additional coding or configuration required when it's used). In my time as a developer and accessibility consultant, I've noticed that this is a high-impact area that is commonly prone to having accessibility issues (specifically - and especially - when the user is accessing the website on a device with a smaller viewport width or when the user has zoomed in on the page).

A demo of my working draft version of the element.

Project Goals

1. To begin: build a basic, responsive site navigation element using HTML and CSS. Ensure that it works as-is (without JavaScript). Ensure that it is WCAG 2.2 (Web Content Accessibility Guidelines 2.2) AA compliant (i.e. ensure that it is accessible).
2. Register a custom element via JavaScript. When the user adds the is attribute (with the custom element's name as its value) to the <nav> element, progressively enhance the element as follows: a. In small viewports: hide the navigation links inside a dialog (modal) element. Add a "Menu" trigger control to the site header. When the "Menu" control is activated, open the modal dialog and move focus to the first focusable element inside it (the dialog's "Close" control); b. In larger viewports: show the navigation links within the site header; c. When the viewport is resized (or when a user zooms in, or increases the page's font size): hide and/or show the correct version of the site navigation, ensuring that the layout is appropriately responsive (no overlapping and/or cut off text, no layout bugs).
3. Ensure that the progressively enhanced version of the site navigation element is also WCAG 2.2 AA compliant.
4. Build an initial version relatively quickly (as an exercise in quick turnover). Test it, and capture any initial bugs found as GitHub Issues. Potentially: iterate further on this later, refactor the code, etc..

Challenges

1. I encountered some CSS issues in iOS Safari. I was able to resolve them relatively easily.
2. There were some errors within some of the site navigation link `href` attribute values. These paths were a little cumbersome to test locally, so I missed some of the errors when doing the initial development. Once I spotted the errors, they were also relatively easy to fix.