Skip to content

Latest commit

 

History

History

disclosure

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 
disclosure.ts
disclosure.ts
 
 

README.md

Disclosure Widget

A custom element for building accessible disclosure widgets.

Example

import { DisclosureElement } from 'inclusive-elements';

window.customElements.define('ui-disclosure', DisclosureElement);
<ui-disclosure>
    <button type="button">Summary</button>
    <div>Details</div>
</ui-disclosure>

Behavior

  • The first descendant that is a <button> or has role="button" will be given the aria-expanded attribute, which will reflect the open state of the disclosure widget.

  • Clicking the button will toggle the disclosure widget. The hidden attribute will be toggled on the content element.

API

const disclosure = document.querySelector('ui-disclosure');

// Programatically open and close the widget.
disclosure.open = true;

disclosure.addEventListener('toggle', callback);
/* Transitions can be applied to the content using hello-goodbye */
@media (prefers-reduced-motion: no-preference) {
    ui-disclosure > .enter-active,
    ui-disclosure > .leave-active {
        transition: all 0.5s;
    }

    ui-disclosure > .enter-from,
    ui-disclosure > .leave-to {
        opacity: 0;
        transform: scale(0.5);
    }
}

Further Reading