aria-ease 1.1.5 → 1.1.7

package/README.md

@@ -59,24 +59,25 @@ export default App
 
 Add accessibility to tab: tab can be tabs, interactive sliders and carousels e.t.c. Basically any component that is permanently displayed and has a list of related interractive children items. The function creates a focus trap within the tab and the focus can be navigated using the arrow keys.
 
-The makeTabAccessible function takes two string arguments; the id of the tab main div, and the class name of the children item of the div. The function should be called when any of the interractive children item (e.g button) of the tab is clicked. The clicked button gets focused and the focus can be navigated using the arrow keys.
+The makeTabAccessible function takes two string arguments; the id of the tab main div, and the class name of the children item of the div. The function should be called on page render, so the event listeners get activated. On click of a button, the clicked button gets focused and the focus can be navigated using the arrow keys.
 
 #### Usage
 
 ```
+import { useEffect } from 'react'
 import { makeTabAccessible } from "aria-ease"
 
 const App = () => {
-  const handleTabButtonClick = (): void => {
+  useEffect(() => {
     makeTabAccessible('custom-tab', 'custom-tab-item')
-  }
+  },[])
 
   return (
     <div>
       <div id="custom-tab">
-        <button className="custom-tab-item" onClick={handleTabButtonClick}>One</button>
-        <button className="custom-tab-item" onClick={handleTabButtonClick}>Two</button>
-        <button className="custom-tab-item" onClick={handleTabButtonClick}>Three</button>
+        <button className="custom-tab-item">One</button>
+        <button className="custom-tab-item">Two</button>
+        <button className="custom-tab-item">Three</button>
       </div>
     </div>
   )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aria-ease",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "description": "Out of the box utility accessibility package to develop production ready applications.",
   "main": "index.js",
   "scripts": {