jgarber623 / aria-collapsible

A dependency-free Web Component that generates progressively-enhanced collapsible regions using ARIA States and Properties.

Hello, world! 👋🏻

🛠 Projects

💎 Ruby Gems

• link-header-parser-ruby – Parse HTTP Link headers.
• nokogiri-html-ext – Extend Nokogiri with several useful HTML-centric features.
• sprockets-sass_embedded – Process and compress Sass files using Sprockets 4 and Embedded Dart Sass.

🧩 Web Components

• <aria-collapsible> – Generate progressively-enhanced collapsible regions using ARIA States and Properties.
• <bandcamp-player> – Generate a Bandcamp embedded player.
• <remote-template> – Fetch a URL and append the response to a <template>.
• <under-construction> – Generate OSHA-compliant barricade tape.

🎈 Eleventy

• eleventy-plugin-liquid – Configure the LiquidJS template language.
• eleventy-plugin-markdown – Process Markdown files with markdown-it.
• eleventy-plugin-postcss – Process CSS files with PostCSS.
• eleventy-plugin-sass – Process SCSS files with Dart Sass.

📦 JavaScript

• CashCash – A very small DOM library inspired by jQuery.
• RadioRadio – A very small JavaScript PubSub library.
• RouterRouter – A very small JavaScript routing library extracted from Backbone’s Router.
• TemplateTemplate – A very small JavaScript <template> manipulation library.

🌎 Websites

• atom-editor.cc and flight-manual.atom-editor.cc – Mirrors of the defunct Atom promotional and documentation websites.
• docs.getchip.cc – A mirror of the defunct Next Thing Co. documentation website.
• spaceholder.cc – A space-themed image placeholder service.

📡 Feeds

• nasa-apod – A fuller feed of content from NASA's Astronomy Picture of the Day website.
• nasa-iotd – A feed of content from NASA's Image of the Day website.

🛠️ Reusable Configuration and Templates

• Node.js: eslint-config, stylelint-config, stylelint-config-scss
• Ruby: rubocop-configs
• Templates: eleventy-plugin-template, web-component-template

🧡 IndieWeb Projects

I’ve been involved with the IndieWeb community since 2013. In that time, I’ve created (or contributed to) a few websites and tools.

💎 Ruby Gems

• indieweb-endpoints-ruby – Discover a URL’s IndieAuth, Micropub, Microsub, and Webmention endpoints.
• MicroMicro – Extract microformats2-encoded data from HTML documents.
• webmention-cli – A command-line interface for Webmention written in Ruby.
• webmention-client-ruby – Send and verify Webmention notifications.

🌎 Websites

• indieweb-endpoints.cc – Discover a URL’s IndieAuth, Micropub, Microsub, and Webmention endpoints.
• micromicro.cc – Extract microformats2-encoded data from a webpage.
• rel-me.cc – Discover a URL’s published rel="me" links.

🤷🏻‍♂️ Miscellaneous

• IndieWeb wiki leaderboard – Ranking active users on the IndieWeb wiki.

aria-collapsible's Issues

Update examples based on expert feedback

See the conversation here with feedback from Adrian Roselli. Their article on disclosure widgets recommends:

Ensure the disclosed content immediately follows the control in the DOM. For screen reader users this allows them to continue reading without the need to hunt for the content. If the disclosed content includes interactive controls (tab stops), this allows keyboard users to quickly move to those controls.

As linked from the article, the WAI-ARIA Authoring Practices 1.1 site has some examples here: disclosure patterns

So, probably best to remove the "Toggle Notes" example as it doesn't conform well to user expectations or AT capabilities without more work.

Write tests

Make self-initing?

Might be nice if the init() wasn't necessary and the act of creating a new instance of Collapsible did the work.

Keyboard Nav: Arrows

I like what you're doing here, but have a concern.

Wouldn't one expect to tab to the Menu button and then use up & down arrows to traverse the list?