From 00b5b6e8756edcb10cf5eedf0745e217697b3280 Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Wed, 11 Dec 2024 15:25:46 +0100 Subject: [PATCH 1/7] fix: Solve/hide some Sass warnings in the terminal --- astro.config.mjs | 24 ++++++++++++++++++++---- src/assets/scss/base/_breakpoint.scss | 19 ++++++++++--------- src/assets/scss/base/_font.scss | 26 +++++++++++++++++++------- 3 files changed, 49 insertions(+), 20 deletions(-) diff --git a/astro.config.mjs b/astro.config.mjs index 5a267f1..2f41ec2 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -2,12 +2,28 @@ import { defineConfig } from 'astro/config' import mdx from '@astrojs/mdx' import tailwind from '@astrojs/tailwind' import compress from 'astro-compress' -import icon from "astro-icon" +import icon from 'astro-icon' // https://astro.build/config export default defineConfig({ compressHTML: true, - integrations: [mdx(), icon(), tailwind({ - applyBaseStyles: false, - }), compress()], + integrations: [ + mdx(), + icon(), + tailwind({ + applyBaseStyles: false, + }), + compress(), + ], + vite: { + css: { + preprocessorOptions: { + scss: { + logger: { + warn: () => {}, + }, + }, + }, + }, + }, }) diff --git a/src/assets/scss/base/_breakpoint.scss b/src/assets/scss/base/_breakpoint.scss index 59bb1f6..70f6920 100644 --- a/src/assets/scss/base/_breakpoint.scss +++ b/src/assets/scss/base/_breakpoint.scss @@ -1,25 +1,26 @@ +@use 'sass:map'; + // | ------------------------------------------------------------- // | Breakpoint // | ------------------------------------------------------------- $breakpoints: ( - "default": 0, - "small": 24em, - "medium": 48em, - "large": 75em + 'default': 0, + 'small': 24em, + 'medium': 48em, + 'large': 75em, ) !default; @mixin breakpoint($breakpoint) { - @if map-has-key($breakpoints, $breakpoint) { - @media (min-width: map-get($breakpoints, $breakpoint)) { + @if map.has-key($breakpoints, $breakpoint) { + @media (min-width: map.get($breakpoints, $breakpoint)) { @content; } } @else if (type_of($breakpoint) == number) { - @media (min-width: $breakpoint+"px") { + @media (min-width: $breakpoint+'px') { @content; } - } - @else { + } @else { @error "Not a correct value, check _base-breakpoints for available values."; } } diff --git a/src/assets/scss/base/_font.scss b/src/assets/scss/base/_font.scss index d4f3a20..76d663b 100644 --- a/src/assets/scss/base/_font.scss +++ b/src/assets/scss/base/_font.scss @@ -6,7 +6,10 @@ @font-face { font-family: 'Open Sans'; - src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url('/fonts/OpenSans-ExtraBold.woff2') format('woff2'), + src: + local('Open Sans ExtraBold'), + local('OpenSans-ExtraBold'), + url('/fonts/OpenSans-ExtraBold.woff2') format('woff2'), url('/fonts/OpenSans-ExtraBold.woff') format('woff'); font-weight: bold; font-style: normal; @@ -15,7 +18,10 @@ @font-face { font-family: 'Open Sans'; - src: local('Open Sans Bold'), local('OpenSans-Bold'), url('/fonts/OpenSans-Bold.woff2') format('woff2'), + src: + local('Open Sans Bold'), + local('OpenSans-Bold'), + url('/fonts/OpenSans-Bold.woff2') format('woff2'), url('/fonts/OpenSans-Bold.woff') format('woff'); font-weight: bold; font-style: normal; @@ -24,7 +30,10 @@ @font-face { font-family: 'Open Sans'; - src: local('Open Sans Italic'), local('OpenSans-Italic'), url('/fonts/OpenSans-Italic.woff2') format('woff2'), + src: + local('Open Sans Italic'), + local('OpenSans-Italic'), + url('/fonts/OpenSans-Italic.woff2') format('woff2'), url('/fonts/OpenSans-Italic.woff') format('woff'); font-weight: normal; font-style: italic; @@ -33,7 +42,10 @@ @font-face { font-family: 'Open Sans'; - src: local('Open Sans Regular'), local('OpenSans-Regular'), url('/fonts/OpenSans-Regular.woff2') format('woff2'), + src: + local('Open Sans Regular'), + local('OpenSans-Regular'), + url('/fonts/OpenSans-Regular.woff2') format('woff2'), url('/fonts/OpenSans-Regular.woff') format('woff'); font-weight: normal; font-style: normal; @@ -134,11 +146,11 @@ body { @include breakpoint(medium) { font-size: 1.25rem; line-height: 1.875rem; - h6 { - font-size: 1rem; - } } + } + h6 { + font-size: 1rem; line-height: 1.5rem; @include breakpoint(medium) { From 2069c7c8b5802b460388d6fb39f7c9576d10afa4 Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Wed, 11 Dec 2024 15:26:19 +0100 Subject: [PATCH 2/7] feat: Add support for `color-scheme` and `interpolate-size: allow-keywords` --- src/assets/scss/base/_root.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/assets/scss/base/_root.scss b/src/assets/scss/base/_root.scss index f4e99e1..52b7fab 100644 --- a/src/assets/scss/base/_root.scss +++ b/src/assets/scss/base/_root.scss @@ -2,9 +2,12 @@ // | Root // | ------------------------------------------------------------- -@use "color" as *; +@use 'color' as *; :root { + color-scheme: light dark; + interpolate-size: allow-keywords; + @each $color, $shades in $colors { @each $shade, $value in $shades { --#{$color}-#{$shade}: #{$value}; From 815f3b27666913784e91250cd0cf17b963a683b9 Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Thu, 12 Dec 2024 20:29:45 +0100 Subject: [PATCH 3/7] Update accessible-astro-components to 3.0.0 --- package.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 476fe86..a36f67c 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,6 @@ "@iconify-json/mdi": "^1.2.1", "@typescript-eslint/eslint-plugin": "^6.21.0", "@typescript-eslint/parser": "^6.21.0", - "accessible-astro-components": "^2.4.0", "astro": "^4.16.16", "astro-compress": "^2.3.5", "astro-icon": "^1.1.4", @@ -31,5 +30,8 @@ "sass": "^1.81.0", "svgo": "^3.3.2", "tailwindcss": "^3.4.15" + }, + "dependencies": { + "accessible-astro-components": "^3.0.0" } } From 36dcf11f89b8bdd75d2f203ab1fdbe7ddabc180a Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Thu, 12 Dec 2024 20:30:07 +0100 Subject: [PATCH 4/7] Add new Tabs component and update other component examples --- src/pages/accessible-components.astro | 117 ++++++++++++++++++++++++-- 1 file changed, 109 insertions(+), 8 deletions(-) diff --git a/src/pages/accessible-components.astro b/src/pages/accessible-components.astro index 5eda212..cb92565 100644 --- a/src/pages/accessible-components.astro +++ b/src/pages/accessible-components.astro @@ -11,6 +11,10 @@ import { Modal, Notification, Pagination, + Tabs, + TabsList, + TabsTab, + TabsPanel, } from 'accessible-astro-components' --- @@ -20,7 +24,7 @@ import {

Accessible Components

This theme has a lot of extra a11y components provided by the Accessible Astro ComponentAccessible Astro Component NPM package to help you build accessible pages faster:

@@ -29,38 +33,79 @@ import {
-

Accordion

+

Accordion (normal)

- + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo + accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam + quod veritatis laboriosam est tenetur. +

+ Tab to me! + + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo + accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod + veritatis laboriosam est tenetur. +

+ + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo + accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod + veritatis laboriosam est tenetur. +

+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod veritatis laboriosam est tenetur.

+ + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo + accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod + veritatis laboriosam est tenetur. +

+ + +
+
+

Accordion (exclusive)

+ + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo + accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam + quod veritatis laboriosam est tenetur. +

Tab to me! - +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod veritatis laboriosam est tenetur.

- +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod veritatis laboriosam est tenetur.

- +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod veritatis laboriosam est tenetur.

- +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod @@ -101,7 +146,7 @@ import {

Why hello, I be the first Modal.

- +

Ah yes, and I be the second Modal. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, a! Ratione eaque temporibus alias tempora pariatur dolorem. @@ -145,6 +190,62 @@ import {

This component can be viewed by shift+tabbing until they show up.

+
+
+

Tabs

+ + + First Panel + Second Panel + Third Panel + + + +

First Panel

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo + accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod + veritatis laboriosam est tenetur. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed eveniet + quidem earum at nobis enim. +

+ Tab to me! + + +

Second Panel

+
+ + +
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo + accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod + veritatis laboriosam est tenetur. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed eveniet + quidem earum at nobis enim. +

+ Tab to me! + + +

Third Panel

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur, nulla! Sapiente saepe voluptate nemo in + id aperiam tempore quo unde, ipsum similique explicabo non maiores qui voluptates dolore obcaecati. Atque + voluptates similique ad ipsam nostrum quibusdam doloremque cum porro, aperiam beatae voluptas dolore et + neque voluptate alias nesciunt blanditiis totam voluptatem necessitatibus. Similique aliquid molestiae + iusto nam nobis ut aspernatur blanditiis provident iste corporis minima, quidem autem nulla doloremque + eaque a obcaecati! Nisi quod quam repellendus facilis? Libero voluptas doloribus maxime, suscipit odio + veritatis optio nulla officia quos cum at ea hic numquam perferendis molestiae! Aperiam quia veritatis + earum tempora. +

+ Tab to me! + + +
From 3d1932b06a6ece64084f4b181b30331fa2b0b57c Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Thu, 12 Dec 2024 20:30:19 +0100 Subject: [PATCH 5/7] Add FAQ example section --- src/pages/index.astro | 61 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 60 insertions(+), 1 deletion(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index 7bcd5e1..03ecc03 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -4,6 +4,7 @@ import Hero from '../components/Hero.astro' import Feature from '../components/Feature.astro' import Counter from '../components/Counter.astro' import ContentMedia from '../components/ContentMedia.astro' +import { Accordion, AccordionItem } from 'accessible-astro-components' --- @@ -52,13 +53,71 @@ import ContentMedia from '../components/ContentMedia.astro'

-

WCAG 2.1 AA Compliant

+

WCAG 2.2 AA Compliant

Using semantic HTML, landmarks, skip links, screen reader friendly content, aria-labels, keyboard accessible navigation and components, clear outlines and tab indicators and the right color contrast, you're more certain of reaching WCAG AA compliance.

+
+
+
+

FAQ

+

+ This section demonstrates how to effectively use the Accordion component to organize and display frequently + asked questions in an accessible and user-friendly way. +

+ Contact support team +
+
+ + +

+ WCAG (Web Content Accessibility Guidelines) is a set of internationally recognized standards for web + accessibility. Following WCAG ensures your website is usable by people with various disabilities, + including visual, auditory, physical, and cognitive impairments. It's important not just for + accessibility, but also for legal compliance, SEO, and reaching a wider audience. +

+ + +

+ Alt text is specifically for describing images to screen reader users, while ARIA labels (aria-label, + aria-labelledby) can describe any element on a page. Alt text is HTML's native way to provide alternative + text for images, while ARIA labels are part of the ARIA specification that helps make dynamic content and + advanced UI controls more accessible. +

+ + +

+ Keyboard navigation is essential for users who can't use a mouse, including people with motor + disabilities, visual impairments, or those who simply prefer keyboard controls. A website should be fully + operable using only a keyboard, with visible focus indicators and logical tab order. This includes being + able to access all interactive elements and navigate through content efficiently. +

+ + +

+ According to WCAG 2.2 AA standards, text should have a minimum contrast ratio of 4.5:1 against its + background for regular text, and 3:1 for large text (18pt or 14pt bold). For non-text elements like icons + or buttons, a minimum ratio of 3:1 is required. This ensures content is readable for users with visual + impairments or color blindness. +

+ + +

+ To make custom components accessible, focus on these key aspects: use semantic HTML where possible, + implement proper keyboard support, add appropriate ARIA attributes, manage focus when needed, and ensure + adequate color contrast. Always test with screen readers and keyboard navigation. Consider using + established design patterns from the ARIA Authoring Practices Guide. +

+ + +
+
+

Counters

From 2b287d433bf73205c6f310ccee8a40e26c4a4cad Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Thu, 12 Dec 2024 20:30:34 +0100 Subject: [PATCH 6/7] Add `sr-only` utility class --- src/layouts/DefaultLayout.astro | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/layouts/DefaultLayout.astro b/src/layouts/DefaultLayout.astro index 2290c34..c6740bb 100644 --- a/src/layouts/DefaultLayout.astro +++ b/src/layouts/DefaultLayout.astro @@ -105,6 +105,18 @@ const { } } } + + .sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; + } From bddabffc6f46ca417684eecbeeded855eb1bf7cb Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Thu, 12 Dec 2024 20:31:19 +0100 Subject: [PATCH 7/7] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a36f67c..3f27013 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "accessible-astro-starter", "description": "An Accessible Starter Theme for Astro including several accessibility features and tools to help you build faster.", - "version": "3.2.0", + "version": "3.2.1", "author": "Mark Teekman", "homepage": "https://accessible-astro.netlify.app/", "scripts": {