https://github.com/chrisnajman/faqs
An accessible FAQ accordion. The CSS enhances the 'details' element with a smooth height transition only when it's safe and supported. It uses modern CSS features with progressive enhancement in mind.
https://github.com/chrisnajman/faqs
accessibility css-transitions es6-modules html-css-javascript interpolation-techniques loading-spinner prefers-reduced-motion supports theme-switcher
Last synced: 9 months ago
JSON representation
An accessible FAQ accordion. The CSS enhances the 'details' element with a smooth height transition only when it's safe and supported. It uses modern CSS features with progressive enhancement in mind.
- Host: GitHub
- URL: https://github.com/chrisnajman/faqs
- Owner: chrisnajman
- License: mit
- Created: 2025-03-27T11:28:01.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-04-05T12:16:31.000Z (9 months ago)
- Last Synced: 2025-04-05T13:20:20.670Z (9 months ago)
- Topics: accessibility, css-transitions, es6-modules, html-css-javascript, interpolation-techniques, loading-spinner, prefers-reduced-motion, supports, theme-switcher
- Language: CSS
- Homepage: https://chrisnajman.github.io/faqs/
- Size: 20.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# FAQ
An accessible FAQ accordion. This CSS snippet enhances the `` element with a smooth height transition - but only when it's safe and supported. It uses modern CSS features with progressive enhancement in mind.
## Features
- **Responsive-aware**: Transitions are only applied on viewports wider than 37.5rem (600px), avoiding layout issues caused by wrapped `summary` text on smaller screens.
- **Respects user preferences**: Honors `prefers-reduced-motion` to avoid animating for users who have motion reduction enabled.
- **Feature detection**: Uses `@supports` to apply styles only if the browser supports the experimental `interpolate-size` property.
- **Safe fallback**: Older browsers that don’t support modern syntax will ignore the transition block entirely, without affecting functionality.
### Other
- Loading animation,
- theme switcher.
## How it works
```CSS
/*
Apply styles only when:
- The screen width is greater than 37.5rem (600px). (Note: 'width' is modern range syntax.)
- (Adjust the width to your own requirements.)
- The user has not requested reduced motion
*/
@media (width > 37.5rem) and (prefers-reduced-motion: no-preference) {
/*
Check if the browser supports the experimental 'interpolate-size' property
(some browsers may ignore this block if they don't support it)
*/
@supports (interpolate-size: allow-keywords) {
/*
Enable the 'interpolate-size' feature globally.
This is a proposed property allowing height/width interpolation on elements
like , which normally don't transition well.
*/
:root {
interpolate-size: allow-keywords;
}
/*
Target all elements.
Apply a transition on the height property and set a fixed closed height.
*/
details {
transition: height 0.5s ease;
height: 4rem; /* Set closed height */
/*
When the element is open:
- Allow it to grow in height
- Use 'overflow: clip' to hide overflowing content while transitioning
(Note: 'overflow: clip' avoids scrollbars)
*/
&[open] {
height: auto;
overflow: clip;
}
}
}
}
```
---
## Live Demo
[View on GitPage](https://chrisnajman.github.io/faqs)
---
## JavaScript
Built with **vanilla ES6 JavaScript**, focusing on modern syntax and browser APIs.
The JavaScript has been split into separate modules, improving code modularity.
### `ariaExpandedDetails()`
- `aria-expanded-details.js`: This function ensures accessibility by dynamically updating the `aria-expanded` attribute on `` elements, improving screen reader support for users with older or less capable assistive technologies. It listens for the `toggle` event to reflect the open/closed state, providing clearer communication for browsers or screen readers that may not fully support the native `` behavior.
### Other
- `loader.js`: See [Loader Git repository](https://github.com/chrisnajman/loader)
- `theme.js`: Handles theme toggling (light/dark mode) and local storage management.
---
## Theme Toggling
The application includes a dark mode and light mode toggle:
- The current theme state is stored in **local storage** and applied automatically on page reload.
- Accessible buttons with appropriate ARIA attributes are used to improve usability.
---
## Accessibility
The site is fully navigable using tab keys and up/down arrows.
---
## Testing and Compatibility
The application has been tested on the following platforms and browsers:
- **Operating System**: Windows 10
- **Browsers**:
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
### Device View Testing
The layout and functionality have been verified in both browser and device simulation views to ensure responsiveness and usability.
---
## How to Run
1. Clone or download the repository to your local machine.
2. Open the project folder and start a simple HTTP server (e.g., using `Live Server` in VS Code or Python's `http.server` module).
3. Open the project in a modern browser (e.g., Chrome, Firefox, or Edge).