Getting Started

The package is available on NPM.

Installation

Installation as a package

     npm require @savvywombat/accessible-web-components

     yarn add @savvywombat/accessible-web-components

Download as a tarball

       npm pack @savvywombat/accessible-web-components
tar -xzf savvywombat-accessible-web-components-{version}.tgz

Vanilla JavaScript

Import the package as a module in your HTML document:

     <head>
    <script type="module">
        import {defineAccessibleWebComponents} from '@savvywombat/accessible-web-components/index.js';
 
        defineAccessibleWebComponents();
    </script>
</head>

The import automatically defines all Web Components in the library, ready to use.

Importing a specific Web Component

     <head>
    <script type="module">
        import {DropdownSelector} from '@savvywombat/accessible-web-components/';
 
        customElements.define('dropdown-selector', DropdownSelector);
    </script>
</head>

This allows you to choose an alternative name for the custom element to be used. It is recommended that custom elements consist of two or more words seperated by a dash, so that they are distinct from HTML standard elements.

Using the Web Component

     <dropdown-selector id="month" name="month">
  <option>January</option>
  <option>February</option>
</dropdown-selector>

Vue.js

Import the package into your app's main.js before you call createApp:

     import {defineAccessibleWebComponents} from '@savvywombat/accessible-web-components/index.js';
defineAccessibleWebComponents();
 
createApp(App).mount('#app');

The import automatically defines all Web Components in the library, ready to use.

Importing a specific Web Component

     import {DropdownSelector} from '@savvywombat/accessible-web-components/';
customElements.define('dropdown-selector', DropdownSelector);
 
createApp(App).mount('#app');

Using the Web Component

     <template>
  <dropdown-selector id="month"
                     name="month"
                     v-model="value"
                     @change="(event) => output = months[event.target.value]"
                     :disabled="disabled"
                     tabIndex="2"
  >
    <option v-for="(month, index) in monthList"
            :value="month"
            :key="index"
    >{{ months[month] }}</option>
  </dropdown-selector>
</template>

React

Import the package into your app's main.jsx before you call ReactDOM.render:

     import {defineAccessibleWebComponents} from '@savvywombat/accessible-web-components/index.js';
defineAccessibleWebComponents();
 
ReactDOM.render(
        ...

The import automatically defines all Web Components in the library, ready to use.

Importing a specific Web Component

     import {DropdownSelector} from '@savvywombat/accessible-web-components/';
customElements.define('dropdown-selector', DropdownSelector);
 
ReactDOM.render(
        ...

Using the Web Component

     function Page () {
  ...
 
  return(
    <dropdown-selector id="month"
                       name="month"
                       ref={selectorRef}
                       disabled={disabled ? '' : null}
                       value={value}
      >
        { [...Array(numMonths).keys()].map((m) => (
            <option key={m}>{months[m]}</option>
        ))}
    </dropdown-selector>
  );
}

Other Frameworks

I haven't experimented much beyond the three options above, but as this library contains native Web Components that are not framework dependent, it should be usable as per the documentation of your chosen framework.