Skip to content
This repository has been archived by the owner on Nov 1, 2022. It is now read-only.

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

License

Notifications You must be signed in to change notification settings

jsuria/generic-components

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 navigation, 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 @generic-components/components

And imported in your code via ES imports:

import '@generic-components/components/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/@generic-components/components@latest/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-radio demo WAI-ARIA Practices
generic-skiplink demo WebAIM
generic-spinner demo
generic-switch demo WAI-ARIA Practices
generic-tabs demo WAI-ARIA Practices
generic-visually-hidden demo WebAIM

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 55.5%
  • HTML 43.8%
  • CSS 0.7%