Skip to content

feat: match existing behaviour, add docs #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nedatidrc wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

feat: match existing behaviour, add docs #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion .npmignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@
.npmignore
.release-please-manifest.json
.zed
!dist
!dist/*.d.ts
!dist/*.js
!dist/*.js.map
!dist/*.json
demo.html
src
commitlint.config.js
eslint.config.js
Expand Down
32 changes: 32 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,35 @@
# Inclusive Disclosure

Web component implementation of the [disclosure pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/).

Based on [code by Chris Ferdinandi](https://gomakethings.com/web-components-vs.-state-based-ui/),
released under the MIT license.

## Usage

To use the `inclusive-disclosure` web component, include it in your HTML via a content delivery network (CDN):

```html
<script src="https://unpkg.com/@inclusive-design/inclusive-disclosure/dist/bundle.js" type="module"></script>
```

Or install it with npm and include the installed package in your HTML:

```npm install --save @inclusive-design/inclusive-disclosure```

```html
<script src="node_modules/@inclusive-design/inclusive-disclosure/dist/bundle.js" type="module"></script>
```

On the page where you want to use the component, the following markup is required:

```html
<inclusive-disclosure>
<button hidden>Disclosure Title</button>
<div>Disclosure content.</div>
</inclusive-disclosure>
```

The first element must be a `<button>`. The second element contains the content which will be shown or hidden via the
disclosure pattern. For progressive enhancement, the button should have a `hidden` attribute so that it will not be
displayed if web components are not supported or JavaScript is disabled.
20 changes: 20 additions & 0 deletions demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!doctype html>
<html lang="en-ca">

<head>
<meta charset=utf-8>
<title>Inclusive Disclosure</title>
<script src="/dist/bundle.js" type="module"></script>
</head>

<body>
<h1>Inclusive Disclosure Demo</h1>
<inclusive-disclosure>
<button hidden>Show Me</button>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et voluptatibus quibusdam magni beatae nemo
ducimus at dolorum rerum nulla consectetur quam nihil in repudiandae, expedita officia qui harum placeat
quos.</div>
</inclusive-disclosure>
</body>

</html>
154 changes: 153 additions & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 6 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "@inclusive-design/inclusive-disclosure",
"version": "0.0.2",
"description": "Web component implementation of the disclosure pattern",
"main": "src/inclusive-disclosure.js",
"main": "dist/bundle.js",
"type": "module",
"scripts": {
"build": "elena build",
Expand All @@ -12,7 +12,9 @@
"lint:stylelint": "stylelint \"**/*.css\"",
"prepare": "husky",
"prepublish": "elena build",
"start": "elena watch",
"start:elena": "elena watch",
"start:serve": "sirv --single demo.html",
"start": "run-p start:*",
"test": "node --test"
},
"repository": {
Expand Down Expand Up @@ -44,7 +46,8 @@
"eslint": "^10.0.0",
"husky": "^9.0.0",
"lint-staged": "^17.0.0",
"npm-run-all2": "^9.0.0"
"npm-run-all2": "^9.0.0",
"sirv-cli": "^3.0.1"
},
"lint-staged": {
"*.css": [
Expand Down
9 changes: 0 additions & 9 deletions src/inclusive-disclosure/inclusive-disclosure.css
View file
Open in desktop

This file was deleted.

14 changes: 13 additions & 1 deletion src/inclusive-disclosure/inclusive-disclosure.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,17 @@ import { Elena } from '@elenajs/core';

export default class InclusiveDisclosure extends Elena(HTMLElement) {
static tagName = 'inclusive-disclosure';
static element = 'button[aria-expanded]';

connectedCallback() {
super.connectedCallback();
if (this.element.tagName !== 'BUTTON') {
/** The first child element must be a button. */
console.warn('░█ [ELENA]: Element not found.');
}

this.element.removeAttribute('hidden');
this.element.nextElementSibling.setAttribute('hidden', '');
this.element.setAttribute('aria-expanded', false);
this.element.addEventListener('click', this._onClick);
}

Expand All @@ -18,6 +25,11 @@ export default class InclusiveDisclosure extends Elena(HTMLElement) {
event.preventDefault();
const ariaExpanded = this.element.getAttribute('aria-expanded') === 'true' || false;
this.element.setAttribute('aria-expanded', !ariaExpanded);
if (ariaExpanded) {
this.element.nextElementSibling.setAttribute('hidden', '');
} else {
this.element.nextElementSibling.removeAttribute('hidden');
}
};
}

Expand Down