#10 Added accessibility menu

Annevd · Oct 18, 2024 · 330da98 · 330da98
1 parent be83f4a
commit 330da98
Show file tree

Hide file tree

Showing 7 changed files with 263 additions and 0 deletions.
diff --git a/bieb-in-bloei/src/components/atoms/buttons/Switch.astro b/bieb-in-bloei/src/components/atoms/buttons/Switch.astro
@@ -0,0 +1,72 @@
+---
+export interface Props {
+  id?: string;
+}
+
+// Set a default value for `id` if none is provided
+const { id = "toggle" } = Astro.props;
+---
+
+<input type="checkbox" id={id} role="switch">
+<span class="state">
+    <span class="container">
+      <span class="position"> </span>
+    </span>
+</span>
+
+
+<style>
+
+    input {
+      opacity: 0;
+    }
+
+    input ~ .state {
+      display: inline-block;
+      user-select: none;
+    }
+
+    input ~ .state > .container {
+      position: relative;
+      top: 2px;
+      display: inline-block;
+         border: 2px solid #919191;
+      background: #919191;
+      width: 40px;
+      height: 20px;
+      border-radius: 11px;
+      transition: 0.1s ease-in-out;
+    }
+
+    input ~ .state > .container > .position {
+      position: absolute;
+      top: 1px;
+      left: 2px;
+      display: inline-block;
+      border-radius: 9px;
+      width: 14px;
+      height: 14px;
+      background: #fff;
+      transition: 0.1s ease-in-out;
+    }
+
+    input:checked ~ .state > .container > .position {
+      left: 20px;
+    }
+
+    input:checked ~ .state > .container {
+      border: 2px solid #005CDC;
+      background: #005CDC;
+    }
+
+    input:hover ~ .state > .container {
+      border: 2px solid #3D3D3D;
+      background: #3D3D3D;
+    }
+
+    input:checked:hover ~ .state > .container {
+      border: 2px solid #3D94FF;
+      background: #3D94FF;
+    }
+
+    </style> 
diff --git a/bieb-in-bloei/src/components/atoms/icons/Accessibility.astro b/bieb-in-bloei/src/components/atoms/icons/Accessibility.astro
@@ -0,0 +1,4 @@
+<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 50 50">
+    <path fill="#005CDC" d="M50 25a25 25 0 1 1-50 0 25 25 0 0 1 50 0Z"/>
+    <path fill="#fff" d="M25 12.3a3.2 3.2 0 1 0 0-6.4 3.2 3.2 0 0 0 0 6.4ZM21 26.4c.2-1.4.3-2.8-.1-3.7-.3-.9-1-1.3-1.8-1.6l-7.4-2.4c-1-.3-1.8-.9-1.9-2 0-1.3 1.1-2.1 2.3-1.8 0 0 7 2.5 13 2.5 5.9 0 12.8-2.5 12.8-2.5 1.4-.4 2.4.7 2.4 1.9 0 1.1-1 1.5-2 1.9l-7 2.5c-.6.2-1.6.7-2 1.4-.5.9-.4 2.4-.1 3.8l.4 2.4 3 13c.2 1-.5 2-1.6 2.1-1 .2-1.8-.5-2.1-1.5l-3-9.2-.4-1.3L25 30l-.4 1.7-.4 1.7-3 9c-.3 1-1.1 1.7-2.2 1.5-1-.1-1.7-1.2-1.5-2.1l3-13 .4-2.4Z"/>
+  </svg>
diff --git a/bieb-in-bloei/src/components/atoms/icons/FontIncrease.astro b/bieb-in-bloei/src/components/atoms/icons/FontIncrease.astro
@@ -0,0 +1,11 @@
+<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 27 27">
+    <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 1v25M6.7 13.5V26m15.2 0h-5.5m-7 0H3.8M12 5.7V1H26v4.7m-25 11v-3.2h11.1v3.1"/>
+  </svg>
+
+<style>
+
+svg {
+  height: 1rem;
+}
+
+</style>
diff --git a/bieb-in-bloei/src/components/atoms/icons/Moon.astro b/bieb-in-bloei/src/components/atoms/icons/Moon.astro
@@ -0,0 +1,11 @@
+<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 25">
+    <path fill="#000" d="M13 25c6 0 12-6 12-12l-1-1A8 8 0 1 1 13 1V0a12 12 0 1 0 0 25Z"/>
+</svg>
+
+<style>
+
+  svg {
+    height: 1rem;
+  }
+
+</style>
diff --git a/bieb-in-bloei/src/components/atoms/icons/Translate.astro b/bieb-in-bloei/src/components/atoms/icons/Translate.astro
@@ -0,0 +1,11 @@
+<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 27 28">
+    <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 21h9m-9 0-3 6m3-6 3-8 1-1c0-1 0-1 0 0l1 1 4 8m0 0 2 6M1 4h8m0 0h4M9 4V2m4 2h3m-3 0L9 15m0 0 2 2m-2-2-4-5m4 5c-2 3-5 6-8 7"/>
+</svg>
+
+<style>
+
+  svg {
+    height: 1rem;
+  }
+
+</style>
diff --git a/bieb-in-bloei/src/components/organisms/AccessibilityMenu.astro b/bieb-in-bloei/src/components/organisms/AccessibilityMenu.astro
@@ -0,0 +1,152 @@
+---
+import Accessibility from "../atoms/icons/Accessibility.astro";
+import FontIncrease from "../atoms/icons/FontIncrease.astro";
+import Moon from "../atoms/icons/Moon.astro";
+import Translate from "../atoms/icons/Translate.astro";
+import Switch from "../atoms/buttons/Switch.astro";
+
+
+let isExpanded = false;
+
+function toggleMenu() {
+  isExpanded = !isExpanded;
+}
+---
+
+
+<form aria-label="Accessibility Options">
+    <!-- The toggle menu button -->
+    <input 
+        type="checkbox" 
+        class="toggle-menu"
+        id="menu"
+        aria-expanded={isExpanded ? "true" : "false"}
+        aria-controls="accessibility-options"
+        onChange={toggleMenu} 
+    />
+
+    <!-- Accessibility Options icon -->
+    <label title="Accessibility Options" for="menu" class="icon">
+        <Accessibility />
+    </label>
+
+    <!-- Content that appears when the toggle is checked -->
+    <div class="content" id="accessibility-options" aria-hidden={!isExpanded}>
+        <ul>
+            <li>
+                <label for="toggle-darkmode">
+                    <span class="label-container">
+                        <Moon /> Dark mode
+                    </span>
+                    <Switch id="toggle-darkmode" />
+                </label>
+            </li>
+            <li>
+                <label for="toggle-font-size">
+                    <span class="label-container">
+                        <FontIncrease /> Increase Text
+                    </span>
+                    <Switch id="toggle-font-size" />
+                </label>
+            </li>
+            <li id="google_translate_element">
+                <span class="label-container">
+                    <Translate /> Translate this website
+                </span>  
+            </li>
+        </ul>
+    </div>
+</form>
+
+<style>
+
+form {
+    position: fixed;
+    bottom: 2rem;
+    right: 0;
+    z-index: 10000;
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: flex-end;
+    transition: right 0.3s;
+}
+
+.toggle-menu:checked ~ .content{
+	right: 0;
+	transition: right 0.5s ease-in-out;
+}
+
+.toggle-menu:checked ~ .icon {
+	border-radius: 0 0 0 0.6rem;
+	transition: border-radius 0.5s ease-in-out
+}
+
+.toggle-menu:not(:checked) ~ .content ul {
+	display: none;
+}
+
+.toggle-menu:not(:checked) ~ .content {
+    height: 9rem;
+}
+
+input[type="checkbox"][id^="menu"] {
+    position: absolute;
+    right: -50%;
+}
+
+.toggle-menu:focus-visible ~ label {
+    outline: 2px solid #005CDC;
+    outline-offset: -0.25rem;
+}
+
+.icon {
+    padding: 0.3rem;
+    width: 4rem;
+    height: 4rem;
+    background-color: #fff;
+    border-radius: 0.6rem 0px 0px 0.6rem;
+    cursor: pointer;
+    transition: border-radius 0.5s ease-in-out;
+}
+
+.content {
+	position: absolute;
+	bottom: 4rem;
+	right: -15rem;
+	background: #fff;
+	height: 9rem;
+	width: 15rem;
+	border-radius: 0.6rem 0 0 0.6rem;
+	transition: right 0.5s ease-in-out;
+}
+
+.content ul {
+    padding: 0.5rem;
+}
+
+.content ul li {
+    list-style: none;
+    margin: 0.4rem;
+}
+
+.content label {
+    display: flex;
+    justify-content: space-between;
+    padding: 2px;
+    border-radius: 0.3rem;
+}
+
+.content label:hover,
+.content label:focus-within {
+	background: #d4eaff;
+    outline: 2px solid #005CDC;
+    cursor: pointer;
+}
+
+.label-container {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+</style>
diff --git a/bieb-in-bloei/src/layouts/BaseLayout.astro b/bieb-in-bloei/src/layouts/BaseLayout.astro
@@ -1,6 +1,7 @@
 ---
 import '../styles/global.css';
 import Menu from '../components/organisms/Menu.astro'
+import AccessibilityMenu from '../components/organisms/AccessibilityMenu.astro';
 ---
 <html lang="en">
   <head>
@@ -12,6 +13,7 @@ import Menu from '../components/organisms/Menu.astro'
   </head>
   <body>
     <Menu />
+    <AccessibilityMenu/>
     <slot /> <!-- Content of each page will go here -->
   </body>
 </html>