From ce1ffe5efa3b3629dec9e29f358f0f8d1f55d952 Mon Sep 17 00:00:00 2001 From: Chris Najman Date: Sat, 13 Jan 2024 12:52:04 +0000 Subject: [PATCH] Replaced 'width: fit-content;' with '-moz-width: fit-content; width: fit-content;' --- css/primary-navigation.css | 2 +- css/theme-switcher.css | 2 +- 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 ------ 10 files changed, 2 insertions(+), 625 deletions(-) delete mode 100644 ref/about-and-items-json-entry.txt delete mode 100644 ref/button/5.html delete mode 100644 ref/button/script.js delete mode 100644 ref/button/style-5.css delete mode 100644 ref/css/hamburger-menu.css delete mode 100644 ref/css/style-5.css delete mode 100644 ref/question.txt delete mode 100644 ref/snippet.html diff --git a/css/primary-navigation.css b/css/primary-navigation.css index 5f1af9d..ce3a812 100644 --- a/css/primary-navigation.css +++ b/css/primary-navigation.css @@ -23,7 +23,7 @@ } & nav { - width: fit-content; + width: -moz-fit-content; width: fit-content; margin: 0 auto; @media screen and (width <= 768px) { diff --git a/css/theme-switcher.css b/css/theme-switcher.css index 40753c4..b2f58c4 100644 --- a/css/theme-switcher.css +++ b/css/theme-switcher.css @@ -3,7 +3,7 @@ top: 0.5rem; right: 1rem; z-index: 300; - width: fit-content; + width: -moz-fit-content; width: fit-content; } .theme-icon { diff --git a/ref/about-and-items-json-entry.txt b/ref/about-and-items-json-entry.txt deleted file mode 100644 index 0860022..0000000 --- a/ref/about-and-items-json-entry.txt +++ /dev/null @@ -1 +0,0 @@ -A responsive mobile menu with accessibility features designed for both screen reader users and keyboard-based navigation. \ No newline at end of file diff --git a/ref/button/5.html b/ref/button/5.html deleted file mode 100644 index a2dca80..0000000 --- a/ref/button/5.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - 5 Svg test - - - - - - - -
- - - - - - - \ No newline at end of file diff --git a/ref/button/script.js b/ref/button/script.js deleted file mode 100644 index f878536..0000000 --- a/ref/button/script.js +++ /dev/null @@ -1,10 +0,0 @@ -const button = document.querySelector("button") - -button.addEventListener("click", () => { - const isExpanded = button.getAttribute("aria-expanded") - if (isExpanded === "false") { - button.setAttribute("aria-expanded", "true") - } else { - button.setAttribute("aria-expanded", "false") - } -}) diff --git a/ref/button/style-5.css b/ref/button/style-5.css deleted file mode 100644 index b590c89..0000000 --- a/ref/button/style-5.css +++ /dev/null @@ -1,104 +0,0 @@ -*, -*::before, -*::after { - box-sizing: border-box; -} - -:root { - --clr-dark: rgb(30, 39, 39); - --clr-light-green: rgb(239, 250, 250); - --clr-green: rgb(4, 167, 167); - --button-colour: var(--clr-dark); - --button-border: var(--clr-green); - --line-colour: var(--clr-light-green); -} - -body { - min-height: 100vh; - display: grid; - place-content: center; - background: black; -} - -.examples { - padding: 3rem; - max-width: 1200px; - display: flex; - gap: clamp(2rem, 8vw, 4rem); -} - -button { - background-color: var(--button-colour); - appearance: none; - border: 5px solid var(--button-border); - border-radius: 10px; - cursor: pointer; -} - -button:focus-visible { - outline: 2px solid var(--line-colour); -} - -.hamburger { - width: 50px; - fill: var(--line-colour); -} - -.line { - width: 80px; - - height: 10px; - - x: 10px; - - rx: 5px; -} - -.top { - y: 28px; -} - -.middle { - y: 47px; -} - -.bottom { - y: 68px; -} - -/* button one */ - -/* .button-one { - --button-color: #333; -} */ - -.button-one .line { - transition: - y 300ms ease-in 300ms, - rotate 300ms ease-in, - opacity 0ms 300ms; - transform-origin: center; -} - -.button-one[aria-expanded="true"] .line { - transition: - y 300ms ease-in, - rotate 300ms ease-in 300ms, - opacity 0ms 300ms; -} - -.button-one[aria-expanded="true"] :is(.top, .bottom) { - y: 47; -} - -.button-one[aria-expanded="true"] .top { - rotate: 45deg; -} - -.button-one[aria-expanded="true"] .middle { - opacity: 0; -} - -.button-one[aria-expanded="true"] .bottom { - rotate: -45deg; -} diff --git a/ref/css/hamburger-menu.css b/ref/css/hamburger-menu.css deleted file mode 100644 index 0ad158a..0000000 --- a/ref/css/hamburger-menu.css +++ /dev/null @@ -1,107 +0,0 @@ -*, -*::after, -*::before { - box-sizing: border-box; -} - -body { - margin: 0; -} - -:root { - --bar-width: 60px; - --bar-height: 8px; - --hamburger-gap: 6px; - --foreground: #333; - --background: white; - --hamburger-margin: 8px; - --animation-timing: 200ms ease-in-out; - --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2); -} - -.hamburger-menu { - --x-width: calc(var(--hamburger-height) * 1.41421356237); - - display: flex; - flex-direction: column; - gap: var(--hamburger-gap); - width: max-content; - position: absolute; - top: var(--hamburger-margin); - left: var(--hamburger-margin); - z-index: 2; - cursor: pointer; -} - -.hamburger-menu:has(input:checked) { - --foreground: white; - --background: #333; -} - -.hamburger-menu:has(input:focus-visible)::before, -.hamburger-menu:has(input:focus-visible)::after, -.hamburger-menu input:focus-visible { - border: 1px solid var(--background); - box-shadow: 0 0 0 1px var(--foreground); -} - -.hamburger-menu::before, -.hamburger-menu::after, -.hamburger-menu input { - content: ""; - width: var(--bar-width); - height: var(--bar-height); - background-color: var(--foreground); - border-radius: 9999px; - transform-origin: left center; - transition: - opacity var(--animation-timing), - width var(--animation-timing), - rotate var(--animation-timing), - translate var(--animation-timing), - background-color var(--animation-timing); -} - -.hamburger-menu input { - appearance: none; - padding: 0; - margin: 0; - outline: none; - pointer-events: none; -} - -.hamburger-menu:has(input:checked)::before { - rotate: 45deg; - width: var(--x-width); - translate: 0 calc(var(--bar-height) / -2); -} - -.hamburger-menu:has(input:checked)::after { - rotate: -45deg; - width: var(--x-width); - translate: 0 calc(var(--bar-height) / 2); -} - -.hamburger-menu input:checked { - opacity: 0; - width: 0; -} - -.sidebar { - transition: translate var(--animation-timing); - translate: -100%; - padding: 0.5rem 1rem; - padding-top: calc(var(--hamburger-height) + var(--hamburger-margin) + 1rem); - background-color: var(--foreground); - color: var(--background); - max-width: 10rem; - min-height: 100vh; -} - -/* .hamburger-menu:has(input:checked) + .sidebar { - translate: 0; -} */ - -.translateZero { - translate: 0; -} diff --git a/ref/css/style-5.css b/ref/css/style-5.css deleted file mode 100644 index b590c89..0000000 --- a/ref/css/style-5.css +++ /dev/null @@ -1,104 +0,0 @@ -*, -*::before, -*::after { - box-sizing: border-box; -} - -:root { - --clr-dark: rgb(30, 39, 39); - --clr-light-green: rgb(239, 250, 250); - --clr-green: rgb(4, 167, 167); - --button-colour: var(--clr-dark); - --button-border: var(--clr-green); - --line-colour: var(--clr-light-green); -} - -body { - min-height: 100vh; - display: grid; - place-content: center; - background: black; -} - -.examples { - padding: 3rem; - max-width: 1200px; - display: flex; - gap: clamp(2rem, 8vw, 4rem); -} - -button { - background-color: var(--button-colour); - appearance: none; - border: 5px solid var(--button-border); - border-radius: 10px; - cursor: pointer; -} - -button:focus-visible { - outline: 2px solid var(--line-colour); -} - -.hamburger { - width: 50px; - fill: var(--line-colour); -} - -.line { - width: 80px; - - height: 10px; - - x: 10px; - - rx: 5px; -} - -.top { - y: 28px; -} - -.middle { - y: 47px; -} - -.bottom { - y: 68px; -} - -/* button one */ - -/* .button-one { - --button-color: #333; -} */ - -.button-one .line { - transition: - y 300ms ease-in 300ms, - rotate 300ms ease-in, - opacity 0ms 300ms; - transform-origin: center; -} - -.button-one[aria-expanded="true"] .line { - transition: - y 300ms ease-in, - rotate 300ms ease-in 300ms, - opacity 0ms 300ms; -} - -.button-one[aria-expanded="true"] :is(.top, .bottom) { - y: 47; -} - -.button-one[aria-expanded="true"] .top { - rotate: 45deg; -} - -.button-one[aria-expanded="true"] .middle { - opacity: 0; -} - -.button-one[aria-expanded="true"] .bottom { - rotate: -45deg; -} diff --git a/ref/question.txt b/ref/question.txt deleted file mode 100644 index e36d1b8..0000000 --- a/ref/question.txt +++ /dev/null @@ -1,228 +0,0 @@ -I have a question about web accessibility for screen reader users. - -Given this CSS: - -```CSS - -.visually-hidden { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: clip; - clip-path: inset(0); - border: 0; -} - -``` - -and this HTML: - -```HTML - - -``` - -Will a screen reader user be able to click on / interact with the links? - - - -Following on from our previous chat, create a readme file in markdown using the Git Hub markdown format. - -Base the readme on the following HTML, CSS and JavaScript: - -```HTML -
-
-

Menu

- -
- - -
-``` - -```CSS -:root { - --animation-timing: 200ms; -} - -.primary-navigation { - position: relative; - width: 100%; - - &.padding { - padding-block-end: 1.8rem; - } - - & nav { - width: fit-content; - margin: 0 auto; - @media screen and (width <= 768px) { - flex-direction: column; - margin: 0 auto 0 2rem; - } - } - - & ul { - list-style: none; - padding-left: 0; - display: 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: flex; - gap: 1rem; - align-items: center; - margin: 0 auto; - 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) { - y: 47; - } - &[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; - } -} - -``` - -```JAVASCRIPT -function btnHamburger() { - const hamburgerButton = document.getElementById("hamburger-button") - const primaryNavigation = document.getElementById("primary-navigation") - const siteNavigation = document.getElementById("site-navigation") - - hamburgerButton.addEventListener("click", () => { - const isExpanded = hamburgerButton.getAttribute("aria-expanded") - isExpanded === "false" - ? hamburgerButton.setAttribute("aria-expanded", "true") - : hamburgerButton.setAttribute("aria-expanded", "false") - siteNavigation.classList.toggle("menu-hidden") - siteNavigation.classList.toggle("menu-visible") - primaryNavigation.classList.toggle("padding") - }) -} -btnHamburger() -``` -The hamburger menu button appears at screens less than 768px wide. At this point the menu itself is hidden and is brought into view by clicking the button. -Describe how the menu is accessible to screen readers and keyboard users even when it is not visible. -Also mention the various 'aria-' attributes. \ No newline at end of file diff --git a/ref/snippet.html b/ref/snippet.html deleted file mode 100644 index 5ed14a2..0000000 --- a/ref/snippet.html +++ /dev/null @@ -1,41 +0,0 @@ - - - - - - - - Document - - - - - - - - - - - \ No newline at end of file