		{
		"name": "@wezz/ariatabmanager",
		"version": "0.0.4",
		"version": "0.0.5",
		"description": "A script library to manage interaction and state of ARIA attributes",
		@@ -5,0 +5,0 @@ "main": "build/index.js",

README.md

		@@ -1,7 +0,5 @@
		# ARIA Manager
		# ARIA Tab Manager

		This is a script that will handle events related to [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/) attributes.
		It's most common use is to bind click events to buttons with the [aria-controls] attribute and to toggle the attribute aria-hidden on it's target.
		The script acts as a state handler for elements with these attributes.
		If a aria-controls target changes state, the controlling buttons will reflect that state.
		This is a Tab Management script that takes advantage of (ARIA Manager)[https://github.com/wezz/ARIAManager]
		By adding data attributes to markup it will take care of aria attributes which can e used to style the tabs.

		@@ -11,55 +9,42 @@ ## Installation
		npm install @wezz/ariamanager
		npm install @wezz/ariatabmanager
		```

		## Usage
		### Initialize ARIA Manager
		### Initialize ARIA Manager & ARIA Tab Manager
		```
		import ARIAManager from "@wezz/ariamanager";
		import ARIATabManager from "@wezz/ariatabmanager";
		// On document ready
		new ARIAManager();
		new ARIATabManager();
		```

		### Add WAI-ARIA attributes to markup
		### Tab markup example
		```
		<button aria-controls="exampletarget1" aria-pressed="false">Open Example target 1</button>
		<div id="exampletarget1" class="exampletarget" aria-hidden="true">
		<div data-tab-container>
		<button
		aria-controls="mycontent1"
		aria-pressed="false"
		data-tab-button>Tab 1</button>
		<button
		aria-controls="mycontent2"
		aria-pressed="false"
		data-tab-button>Tab 2</button>

		<div data-tab-contentcontainer>
		<div
		id="mycontent1"
		aria-hidden="false"
		data-tab-content>Tab 1</div>
		<div
		id="mycontent2"
		aria-hidden="true"
		data-tab-content>Tab 2</div>
		</div>
		</div>
		```

		## Advanced usage
		### Programatic triggers
		The ARIA manager is a class with methods so you can programatically toggle elements visibility and the controlling buttons will reflect the targets state.
		```
		const ariaInstance = new ARIAManager();
		// This will set the attribute to the target to be _aria-expanded="true"_.
		// And any button that targets that element and has the aria-pressed attribute will reflect that state.
		ariaInstance.AriaExpand(document.getElementById("exampletarget1"), true);
		```

		### Adding markup after DOMContentLoaded
		If markup has been added to a page after the ARIA Manager has been updated, it is possible to initialize new elements using a global event against the window.

		```
		window.dispatchEvent(new CustomEvent('global-markupchange', { detail: { target: document.querySelector(".additionalDataContainer") } }));
		```

		The target in the event is optional, but if a target has been added (as a HTML Element) to the detail data;
		Then the ARIA Manager will only search for new elements to bind to within that container.

		## Usage in combination of reactive frameworks (ARIA Manager Ignore)
		The most common usecase is that the ARIA Manager will run on document ready.
		It is not recommended to use the ARIA Manager within reactive frameworks since the bindings will not re-initialize or get lost when the markup changes.

		But if you have a reactive component that use aria-controls attributes on a page that has ARIA Manager, you can add the attribute _data-ariamanager-ignore_ to the aria-controls elements within the reactive component / app to avoid having ARIA Manager adjusting attributes.

		Vue Example
		```
		<button
		aria-controls="myexamplediv"
		data-ariamanager-ignore
		v-bind:click="this.openState = !this.openState">Toggle</button>
		<div id="myexamplediv" v-bind:aria-hidden="(!this.openState)+''">
		</div>
		```

		## Development & Demo
		@@ -66,0 +51,0 @@ Clone this repo

@wezz/ariatabmanager - npm Package Compare versions

New alerts

Fixed alerts

Worsened metrics