daKmoR / generic-components

A collection of generic web components with a focus on accessibility, and ease of use

generic-components

A collection of generic web components with a focus on:

• 🚹 Accessibility
• 🏗 Easy to use
• 🎨 Easy to style

Goal

The goal of this project is to create a common library of generic web components, that are accessible, framework agnostic, easy to style, and easy to consume.

All components in these repo extend from HTMLElement and dont use any libraries or framework.

You can think of these components like using a native <button> element, you get all the functionality, and accessibility, keyboard nav, etc for free, you just have to style the button to your liking.

You can use these components to build an app, or compose them and build your own components with them.

Usage

Via npm

Components can be installed via npm

npm i --save @thepassle/generic-components

And imported in your code via ES imports:

import '@thepassle/generic-components/generic-switch.js';

Via CDN

Alternatively you can load the components from a CDN and drop them in your HTML file as a script tag

<script src="https://unpkg.com/@thepassle/generic-components@0.1.0/generic-switch.js" type="module"></script>

<generic-switch></generic-switch>

Collection

Component	Demo	Spec	Status
generic-accordion	demo	Wai Aria Practices	✅
generic-alert	demo	Wai Aria Practices	✅
generic-dialog	demo	Wai Aria Practices	🏗
generic-disclosure	demo	Wai Aria Practices	✅
generic-listbox	demo	Wai Aria Practices	✅
generic-skiplink	demo	Wai Aria Practices	✅
generic-switch	demo	Wai Aria Practices	✅
generic-tabs	demo	Wai Aria Practices	✅
generic-tooltip	demo	Wai Aria Practices	🏗
generic-visually-hidden	demo	WebAIM	✅

Todo:

general

• Convert docs to 11ty + mdjs
• Add api table for components with custom-elements.json

generic-dialog

• Tests
• Finish implementation as web component

generic-tooltip

• Tests
• Improve implementation