From 538aa01ecda08a7eb3a06382fc58c1ed0f757b82 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Sat, 9 Dec 2023 09:54:35 +0100
Subject: [PATCH] feat(templating): support adding aria- attributes

---
 examples/templating/index.js |  2 ++
 package.json                 |  2 +-
 src/utils/create-element.js  | 33 ++++++++++++++++++++-------------
 3 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/examples/templating/index.js b/examples/templating/index.js
index a82c954..c83704d 100644
--- a/examples/templating/index.js
+++ b/examples/templating/index.js
@@ -12,6 +12,8 @@ export class Counter extends WebComponent {
         onClick=${() => ++this.props.count}
         style="background-color: green; color: white;"
         about="Elephant"
+        data-name="thing"
+        aria-name="thingz"
       >
         <span>${this.props.count}</span>
       </button>
diff --git a/package.json b/package.json
index 764e04e..77c2492 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web-component-base",
-  "version": "2.0.0-beta.17",
+  "version": "2.0.0-beta.18",
   "description": "A zero-dependency, ~600 Bytes (minified & gzipped), JS base class for creating reactive custom elements easily",
   "type": "module",
   "exports": {
diff --git a/src/utils/create-element.js b/src/utils/create-element.js
index 656736b..c2b680b 100644
--- a/src/utils/create-element.js
+++ b/src/utils/create-element.js
@@ -10,19 +10,26 @@ export function createElement(tree) {
   } else {
     const el = document.createElement(tree.type);
     if (tree.props) {
-        Object.keys(tree.props).forEach(prop => {
-            let domProp = prop.toLowerCase();
-            if (domProp.startsWith('data-')) {
-              const dataProp = domProp.replace('data-', '');
-              el.dataset[getCamelCase(dataProp)] = tree.props[prop];
-            } else {
-              switch(domProp) {
-                case 'class': domProp = 'className'; break;
-                case 'for': domProp = 'htmlFor'; break;
-              }
-              if (domProp in el) el[domProp] = tree.props[prop]
-            }
-        })
+      Object.keys(tree.props).forEach((prop) => {
+        let domProp = prop.toLowerCase();
+        let value = tree.props[prop];
+        if (domProp.startsWith("data-")) {
+          const dataProp = domProp.replace("data-", "");
+          el.dataset[getCamelCase(dataProp)] = value;
+        } else if (domProp.startsWith("aria-")) {
+          el.setAttribute(domProp, value);
+        } else {
+          switch (domProp) {
+            case "class":
+              domProp = "className";
+              break;
+            case "for":
+              domProp = "htmlFor";
+              break;
+          }
+          if (domProp in el) el[domProp] = value;
+        }
+      });
     }
     tree.children?.forEach((child) => {
       const childEl = createElement(child);