From 850c258cc3d9f2a9ed9aea49fb920454b18b633e Mon Sep 17 00:00:00 2001 From: Chris Najman Date: Sun, 31 Dec 2023 10:37:50 +0000 Subject: [PATCH] First commit --- .gitignore | 0 LICENSE | 21 +++ README.md | 50 +++++ css/base.css | 281 +++++++++++++++++++++++++++++ css/index.css | 6 + css/primary-navigation.css | 139 ++++++++++++++ css/theme-switcher.css | 31 ++++ css/theme.css | 35 ++++ favicon.ico | Bin 0 -> 15406 bytes img/sprite.svg | 20 ++ index.html | 80 ++++++++ js/hamburger-button copy.js | 15 ++ js/hamburger-button.js | 15 ++ js/index.js | 5 + js/theme-switcher.js | 65 +++++++ ref/about-and-items-json-entry.txt | 1 + ref/button/5.html | 28 +++ ref/button/script.js | 10 + ref/button/style-5.css | 104 +++++++++++ ref/css/hamburger-menu.css | 107 +++++++++++ ref/css/style-5.css | 104 +++++++++++ ref/question.txt | 228 +++++++++++++++++++++++ ref/snippet.html | 41 +++++ 23 files changed, 1386 insertions(+) create mode 100644 .gitignore create mode 100644 LICENSE create mode 100644 README.md create mode 100644 css/base.css create mode 100644 css/index.css create mode 100644 css/primary-navigation.css create mode 100644 css/theme-switcher.css create mode 100644 css/theme.css create mode 100644 favicon.ico create mode 100644 img/sprite.svg create mode 100644 index.html create mode 100644 js/hamburger-button copy.js create mode 100644 js/hamburger-button.js create mode 100644 js/index.js create mode 100644 js/theme-switcher.js create mode 100644 ref/about-and-items-json-entry.txt create mode 100644 ref/button/5.html create mode 100644 ref/button/script.js create mode 100644 ref/button/style-5.css create mode 100644 ref/css/hamburger-menu.css create mode 100644 ref/css/style-5.css create mode 100644 ref/question.txt create mode 100644 ref/snippet.html diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e69de29 diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..bb04982 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2023 Christopher. Najman + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..92c7070 --- /dev/null +++ b/README.md @@ -0,0 +1,50 @@ +# Accessible Mobile Menu + +A responsive mobile menu that prioritizes accessibility features for screen readers and keyboard users. + +## Description + +The mobile menu is designed to be responsive, and is visible on screens less than 768px wide. It is initially hidden and appears upon clicking the hamburger menu button. + +## Accessibility Features + +### Screen Reader Accessibility + +The menu is accessible to screen readers through the use of appropriate ARIA attributes. + +#### ARIA Attributes Used + +- `aria-controls="site-navigation"`: Associates the hamburger button with the site navigation menu. +- `aria-expanded="false" / aria-expanded="true"`: Dynamically updates the state of the navigation menu, indicating whether it's expanded or collapsed. + +### Keyboard Accessibility + +The menu ensures accessibility for keyboard users by allowing them to navigate to the hamburger button using the keyboard's tab functionality. Once focused on the button, users can press the 'enter' key to toggle the visibility of the menu. This behavior ensures that keyboard users can interact with the menu effectively, enabling them to open and close it without relying on mouse interactions. + +## Usage + +### HTML Structure + +The HTML structure comprises a div element with an ID of `primary-navigation`, containing the hamburger button and the navigation menu. + +### CSS + +The CSS defines the styles for the mobile menu and the hamburger button, including responsive design for different screen sizes. + +### JavaScript Functionality + +The JavaScript function `btnHamburger()` handles the click event on the hamburger button, toggling the visibility of the navigation menu and updating ARIA attributes accordingly. + +## Source + +- The animation on the button is based on the basic version of [Basic, Intermediate & Pro animated hamburger icons](https://youtu.be/R00QiudbD4Y?si=VDTxfeCotRcLGnGx). + +## Testing + +Tested on Windows 10 with: + +- Chrome +- Firefox +- Microsoft Edge + +The page has been tested in both browser and device views. diff --git a/css/base.css b/css/base.css new file mode 100644 index 0000000..d6dbc68 --- /dev/null +++ b/css/base.css @@ -0,0 +1,281 @@ +*, +*::after { + box-sizing: border-box; + margin: 0; +} + +html { + overflow-y: scroll; + font-size: 10px; +} + +@media (prefers-reduced-motion: no-preference) { + html, + html:focus-within { + scroll-behavior: smooth; + } +} + +:root { + --font-sans: system-ui, sans-serif; + --font-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif; + --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace; + --horz-center: 0 auto; + --flex: flex; + --grid: grid; +} + +ul:empty, +p:empty { + display: none; +} + +body { + background-color: var(--body-bg); + color: var(--body-txt); + font-family: var(--font-sans); + margin: 0; + line-height: 1.5; + font-size: clamp(1.5rem, 1.35rem + 0.4vw, 1.8rem); +} + +h1 { + font-size: clamp(2.4rem, 2.2rem + 0.8889vw, 3.2rem); + line-height: 1.3; + @media screen and (width < 360px) { + padding: 0 1rem; + } +} + +h2 { + font-size: clamp(2rem, 1.9rem + 0.4444vw, 2.4rem); +} + +h3 { + font-size: clamp(1.6rem, 1.525rem + 0.3333vw, 1.9rem); + margin-bottom: 1rem; +} + +h1 { + font-weight: 400; +} + +h2, +h3, +h4, +h5, +h6 { + line-height: 1.1; +} + +h2 { + text-align: center; + margin-bottom: 3rem; +} + +img { + max-width: 100%; + height: auto; + vertical-align: middle; /* replaces display: block but also removes space below */ + font-style: italic; +} + +ul[role="list"] { + list-style: none; + padding-left: 0; +} + +code, +pre { + font-family: var(--font-mono); +} + +:focus-visible { + outline: 3px solid var(--highlight); + outline-offset: 3px; +} + +button { + all: unset; + color: inherit; + cursor: pointer; +} + +.page-layout { + min-height: 100vh; + min-height: 100dvh; + display: var(--grid); + grid-template-rows: auto 1fr auto; +} + +.page-header { + padding: 3.2rem 0; + @media screen and (width < 360px) { + padding-inline: 1rem; + padding-top: 5rem; + } + + & p { + text-wrap: balance; + padding-inline: 1rem; + max-width: 60ch; + margin: var(--horz-center); + } +} + +.main { + max-width: 80rem; + margin: var(--horz-center); + padding: 5rem 2rem; + display: var(--flex); + flex-direction: column; + + & p { + margin-bottom: 2.5rem; + } +} + +.page-footer { + padding: 3.2rem 0; +} + +.page-header, +.page-footer { + background-color: var(--clr-darkest); + color: var(--clr-lightest); + text-align: center; + display: flex; + flex-direction: column; + gap: 2rem; +} + +.page-header a, +.page-footer a { + color: var(--clr-lightest); + text-decoration: none; +} + +.page-header ul, +.page-footer ul { + display: flex; + gap: 1rem; +} + +.page-footer { + & a:hover { + text-decoration: underline; + } + + & a::after { + content: " \27F6"; + } + + & ul { + flex-direction: column; + } +} + +.icon-logo { + fill: var(--clr-lightest); + width: 3.6rem; + height: 3.6rem; + margin: var(--horz-center); +} + +.article { + max-width: 100rem; + margin: var(--horz-center); + padding: 3rem 0 8rem; + display: var(--flex); + flex-direction: column; + gap: 3rem; + + & h2 { + text-align: center; + margin: 1rem 0; + text-transform: capitalize; + } + + & p:first-of-type { + max-width: 60ch; + } + + & section { + display: var(--flex); + flex-direction: column; + gap: 2.5rem; + } +} + +/** Helpers */ +/* Scrollable container for tables */ +[role="region"][aria-labelledby][tabindex] { + overflow: auto; +} + +/* Skip link */ +.skip-link { + color: var(--clr-lightest); + text-decoration: none; + font-weight: 600; + padding: 0.5rem 1rem; + + &::after { + content: " \2193"; + } +} +.element-invisible { + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + top: 0; + left: 0; + z-index: 200; + border-bottom: 5px solid transparent; + &.element-focusable:active, + &.element-focusable:focus { + clip: auto; + height: auto; + overflow: visible; + border-bottom-color: var(--clr-lightest); + } +} + +/* Screenreader only */ +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: clip; + clip-path: inset(0); + border: 0; +} + +/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */ +@media (prefers-reduced-motion: reduce) { + html, + html:focus-within { + scroll-behavior: auto; + } + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + transition-delay: 0ms !important; + } +} + +.warning { + color: var(--clr-warning); + font-weight: 600; +} +/* Always comes last **/ +.hide { + display: none; +} diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..7d2a0eb --- /dev/null +++ b/css/index.css @@ -0,0 +1,6 @@ +@import "./theme.css"; +@import "./base.css"; +@import "./primary-navigation.css"; +/* @import "./hamburger-button.css"; */ + +@import "./theme-switcher.css"; diff --git a/css/primary-navigation.css b/css/primary-navigation.css new file mode 100644 index 0000000..86370cf --- /dev/null +++ b/css/primary-navigation.css @@ -0,0 +1,139 @@ +:root { + --animation-timing: 200ms; +} + +.primary-navigation { + position: relative; + width: 100%; + + &.padding { + padding-block-end: 1.8rem; + } + + & nav { + width: fit-content; + margin: var(--horz-center); + @media screen and (width <= 768px) { + flex-direction: column; + margin: 0 auto 0 2rem; + } + } + + & ul { + list-style: none; + padding-left: 0; + display: var(--flex); + gap: 2rem; + align-items: baseline; + + @media screen and (width <= 768px) { + flex-direction: column; + } + } + & a { + text-decoration: none; + color: var(--clr-lightest); + border-bottom: 5px solid transparent; + padding-block-end: 0.5rem; + margin-bottom: 1rem; + + &:hover { + border-bottom-color: var(--clr-lightest); + } + + &.current-page, + &.current-page:hover { + text-decoration: none; + cursor: default; + border-bottom-color: var(--clr-lightest); + font-weight: 600; + } + } + + @media screen and (width <= 768px) { + max-width: 100%; + margin: 0; + } +} + +.hamburger-button-wrapper { + display: none; +} + +@media screen and (width <= 768px) { + .hamburger-button-wrapper { + width: fit-content; + display: var(--flex); + gap: 1rem; + align-items: center; + margin: var(--horz-center); + position: absolute; + top: -1.2rem; + right: 2rem; + + & h2 { + font-size: 1.6rem; + font-weight: normal; + margin-bottom: 1rem; + } + } + + .hamburger-button { + cursor: pointer; + width: 5rem; + + & .line { + width: 80%; + height: 1rem; + fill: var(--hamburger-line-colour); + transition: + y var(--animation-timing) ease-in var(--animation-timing), + rotate var(--animation-timing) ease-in, + opacity 0ms var(--animation-timing); + transform-origin: center; + } + + &[aria-expanded="true"] .line { + transition: + y var(--animation-timing) ease-in, + rotate var(--animation-timing) ease-in var(--animation-timing), + opacity 0ms var(--animation-timing); + } + &[aria-expanded="true"] :is(.top, .bottom) { + /* + VS Code linter warns that 'y' is an unknown property: + It isn't, it's an svg property. + */ + y: 47px; + } + &[aria-expanded="true"] .top { + rotate: 45deg; + } + &[aria-expanded="true"] .bottom { + rotate: -45deg; + } + &[aria-expanded="true"] .middle { + opacity: 0; + } + } + + .menu-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + overflow: clip; + clip-path: inset(0); + border: 0; + opacity: 0; + } + .menu-visible { + position: static; + width: auto; + height: auto; + margin: inherit; + overflow: visible; + clip-path: none; + transition: opacity var(--animation-timing) var(--animation-timing) ease-in; + } +} diff --git a/css/theme-switcher.css b/css/theme-switcher.css new file mode 100644 index 0000000..037cd9e --- /dev/null +++ b/css/theme-switcher.css @@ -0,0 +1,31 @@ +.theme-picker { + position: absolute; + top: 0.5rem; + right: 1rem; + z-index: 300; + width: fit-content; +} + +.theme-icon { + width: 2.4rem; + height: 2.4rem; + fill: var(--clr-lightest); + margin-right: 0.5rem; +} + +.btn-theme-toggle { + display: var(--flex); + align-items: center; + padding: 0.5rem 0.5rem 0.75rem 0; + border-bottom: 5px solid var(--clr-mid); + color: var(--clr-lightest); + font-size: clamp(1.2rem, 1.1rem + 0.4444vw, 1.6rem); + + &:hover { + border-bottom-color: var(--clr-lightest); + } + + & .mode { + margin-inline-start: 0.5rem; + } +} diff --git a/css/theme.css b/css/theme.css new file mode 100644 index 0000000..662bfc9 --- /dev/null +++ b/css/theme.css @@ -0,0 +1,35 @@ +:root { + --clr-light-blue: rgb(135, 206, 235); + --clr-blue: rgb(0, 117, 255); + --clr-lightest: white; + --clr-mid: #555; + --clr-light-green: rgb(239, 250, 250); + --clr-green: rgb(4, 167, 167); + --clr-grey-green: rgb(44, 58, 58); + --clr-dark: rgb(30, 39, 39); + --clr-darker: #222; + --clr-darkest: black; + --clr-code-bg: beige; + --clr-red-tile: rgb(205, 74, 10); + --clr-warning: red; + + --highlight: var(--clr-light-blue); + --timeline: var(--clr-red-tile); + --hamburger-line-colour: var(--clr-light-green); + + /* Dark theme (default) */ + + --body-bg: var(--clr-dark); + --body-txt: var(--clr-light-green); + --item-shadow: rgba(0, 0, 0, 0.5); + --item-bg: var(--clr-grey-green); + --item-repo-link: var(--clr-light-green); +} + +.light-theme { + --body-bg: var(--clr-light-green); + --body-txt: var(--clr-darkest); + --item-shadow: rgba(0, 0, 0, 0.3); + --item-bg: var(--clr-lightest); + --item-repo-link: var(--clr-green); +} diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..b419ac2be677f6ceb6d357e7bab40d0d6296efc9 GIT binary patch literal 15406 zcmeI2Pfr>_7{=eGg#dxDkdz3Nge=5b4#t2fhC(F#DGd-jk@Vm}J?W+2z$Wdnm-gbJ zJ+z5e4}Jg>y*2UV(VHIoG4z?}9waX5V%#0!ndHgr%UFk!<#+ybu%ljk=|!+w=1xe_x6$;2M~~;-(&%wy97k%;od>S5BmCtPX`jp-UWJ zIT36wEc;k2_Ra72|8XK^W7&J1N2AdrpU-#hM9RkU8^@>U`#&dAHkQ5Dc|0Ef91I43 zI1y}iEx#W+e*%GkiQjtdM7K7U3r{vz>r57^Lu!3uA_1KV6pO_-c+RZ2A=TC>i)1o+ zf;vafs!6X;rBcUi|1N=Yxx9$6Uv)zm|HZqlvoz}ja=F~sNF;LThA_v!jPjoK^#@FT zg~Q=9H-xeNIm(~q*(NX?4(EEkp6P~ETcfmR{r>m5|A@)nVNBNCP$H2~Z84Dm33yCE z?UP`ORyH8+lK=t}36KB@kbo_LZnwLP_th<()#-H9=g50gtycSv6RzxaPTEeXRNA}O zc~sK>#~-_C=HF;EcCgQMqO&TM$|t+|U$55#rfEiXmh#cgf7X)#36OwS1p57cGn2{e z>a2FV{oalb;~&O9m>Xl`_i2vb27|$RI-NeyS*=!U)9(IdJqeHi33x>S-=F<>KMU(D z<)a;+X0!RxFpPbjg&1w!&VR;l<6{?a8ynmF&-rPNf1djMsaC5WFox