{"id":27078817,"url":"https://github.com/chrisnajman/faqs","last_synced_at":"2025-04-06T01:18:21.588Z","repository":{"id":286279692,"uuid":"955899548","full_name":"chrisnajman/faqs","owner":"chrisnajman","description":"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.","archived":false,"fork":false,"pushed_at":"2025-04-05T12:16:31.000Z","size":21,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-05T13:20:20.670Z","etag":null,"topics":["accessibility","css-transitions","es6-modules","html-css-javascript","interpolation-techniques","loading-spinner","prefers-reduced-motion","supports","theme-switcher"],"latest_commit_sha":null,"homepage":"https://chrisnajman.github.io/faqs/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chrisnajman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-27T11:28:01.000Z","updated_at":"2025-04-05T12:34:21.000Z","dependencies_parsed_at":"2025-04-05T13:20:22.698Z","dependency_job_id":"ec433a7b-249f-45b3-a94b-f10ae9a38fef","html_url":"https://github.com/chrisnajman/faqs","commit_stats":null,"previous_names":["chrisnajman/faqs"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisnajman%2Ffaqs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisnajman%2Ffaqs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisnajman%2Ffaqs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisnajman%2Ffaqs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chrisnajman","download_url":"https://codeload.github.com/chrisnajman/faqs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247420119,"owners_count":20936059,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","css-transitions","es6-modules","html-css-javascript","interpolation-techniques","loading-spinner","prefers-reduced-motion","supports","theme-switcher"],"created_at":"2025-04-06T01:18:21.110Z","updated_at":"2025-04-06T01:18:21.573Z","avatar_url":"https://github.com/chrisnajman.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FAQ\n\nAn accessible FAQ accordion. This CSS snippet enhances the `\u003cdetails\u003e` element with a smooth height transition - but only when it's safe and supported. It uses modern CSS features with progressive enhancement in mind.\n\n## Features\n\n- **Responsive-aware**: Transitions are only applied on viewports wider than 37.5rem (600px), avoiding layout issues caused by wrapped `summary` text on smaller screens.\n- **Respects user preferences**: Honors `prefers-reduced-motion` to avoid animating for users who have motion reduction enabled.\n- **Feature detection**: Uses `@supports` to apply styles only if the browser supports the experimental `interpolate-size` property.\n- **Safe fallback**: Older browsers that don’t support modern syntax will ignore the transition block entirely, without affecting functionality.\n\n### Other\n\n- Loading animation,\n- theme switcher.\n\n## How it works\n\n```CSS\n/*\n  Apply styles only when:\n  - The screen width is greater than 37.5rem (600px). (Note: 'width' is modern range syntax.)\n    - (Adjust the width to your own requirements.)\n  - The user has not requested reduced motion\n*/\n@media (width \u003e 37.5rem) and (prefers-reduced-motion: no-preference) {\n  /*\n    Check if the browser supports the experimental 'interpolate-size' property\n    (some browsers may ignore this block if they don't support it)\n  */\n    @supports (interpolate-size: allow-keywords) {\n    /*\n      Enable the 'interpolate-size' feature globally.\n      This is a proposed property allowing height/width interpolation on elements\n      like \u003cdetails\u003e, which normally don't transition well.\n    */\n        :root {\n            interpolate-size: allow-keywords;\n        }\n\n    /*\n      Target all \u003cdetails\u003e elements.\n      Apply a transition on the height property and set a fixed closed height.\n    */\n        details {\n            transition: height 0.5s ease;\n            height: 4rem; /* Set closed height */\n\n      /*\n        When the \u003cdetails\u003e element is open:\n        - Allow it to grow in height\n        - Use 'overflow: clip' to hide overflowing content while transitioning\n        (Note: 'overflow: clip' avoids scrollbars)\n      */\n            \u0026[open] {\n                height: auto;\n                overflow: clip;\n            }\n        }\n    }\n}\n\n\n```\n\n---\n\n## Live Demo\n\n[View on GitPage](https://chrisnajman.github.io/faqs)\n\n---\n\n## JavaScript\n\nBuilt with **vanilla ES6 JavaScript**, focusing on modern syntax and browser APIs.\n\nThe JavaScript has been split into separate modules, improving code modularity.\n\n### `ariaExpandedDetails()`\n\n- `aria-expanded-details.js`: This function ensures accessibility by dynamically updating the `aria-expanded` attribute on `\u003cdetails\u003e` 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 `\u003cdetails\u003e` behavior.\n\n### Other\n\n- `loader.js`: See [Loader Git repository](https://github.com/chrisnajman/loader)\n- `theme.js`: Handles theme toggling (light/dark mode) and local storage management.\n\n---\n\n## Theme Toggling\n\nThe application includes a dark mode and light mode toggle:\n\n- The current theme state is stored in **local storage** and applied automatically on page reload.\n- Accessible buttons with appropriate ARIA attributes are used to improve usability.\n\n---\n\n## Accessibility\n\nThe site is fully navigable using tab keys and up/down arrows.\n\n---\n\n## Testing and Compatibility\n\nThe application has been tested on the following platforms and browsers:\n\n- **Operating System**: Windows 10\n- **Browsers**:\n  - Google Chrome\n  - Mozilla Firefox\n  - Microsoft Edge\n\n### Device View Testing\n\nThe layout and functionality have been verified in both browser and device simulation views to ensure responsiveness and usability.\n\n---\n\n## How to Run\n\n1. Clone or download the repository to your local machine.\n2. Open the project folder and start a simple HTTP server (e.g., using `Live Server` in VS Code or Python's `http.server` module).\n3. Open the project in a modern browser (e.g., Chrome, Firefox, or Edge).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisnajman%2Ffaqs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrisnajman%2Ffaqs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisnajman%2Ffaqs/lists"}