ARIA

jsx.ts

@@ -45,13 +45,21 @@ namespace JSXInternal {
   }[keyof T]
 
   export type HtmlElementAttributes<T> = {
-    [Property in WritableKeys<T> as T[Property] extends string | number
+    [Property in WritableKeys<T> as T[Property] extends
+      | string
+      | number
+      | null
+      | undefined
       ? Property
       : never]?: T[Property]
   }
 
   export type HtmlElementAttributesBind<T> = {
-    [Property in WritableKeys<T> as T[Property] extends string | number
+    [Property in WritableKeys<T> as T[Property] extends
+      | string
+      | number
+      | null
+      | undefined
       ? Property
       : never]?: Observable<T[Property]>
   }

package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "butterfloat",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Knockout-inspired view engine for RxJS with TSX",
   "homepage": "https://worldmaker.net/butterfloat/",
   "repository": "github:WorldMaker/butterfloat",

static-dom.test.tsx

@@ -30,7 +30,7 @@ describe('static-dom', () => {
   })
 
   it('builds a single element with dataset data- attributes', () => {
-    const desc = <div data-test="something" data-funkyThing="music" />
+    const desc = <div data-test="something" data-funky-thing="music" />
     equal(desc.type, 'element')
     const test = buildElement(desc, document)
     equal(test.tagName, 'DIV')
@@ -40,6 +40,20 @@ describe('static-dom', () => {
     test.remove()
   })
 
+  it('builds a single element with aria- attributes', () => {
+    const desc = (
+      <div role="navigation" aria-label="something" aria-expanded="true" />
+    )
+    equal(desc.type, 'element')
+    const test = buildElement(desc, document)
+    equal(test.tagName, 'DIV')
+    equal(test.role, 'navigation')
+    equal(test.getAttribute('aria-label'), 'something')
+    equal(test.getAttribute('aria-expanded'), 'true')
+
+    test.remove()
+  })
+
   it('builds a single label with dataset for attribute', () => {
     const desc = <label for="example" />
     equal(desc.type, 'element')

static-dom.ts

@@ -13,8 +13,9 @@ export function buildElement(
 ) {
   const element = document.createElement(description.element)
   for (const [key, value] of Object.entries(description.attributes)) {
-    if (key.startsWith('data-')) {
-      element.dataset[key.replace(/^data-/, '')] = value as string | undefined
+    if (key.includes('-')) {
+      // for example: aria- and data-
+      element.setAttribute(key, (value ?? '').toString())
     } else if (key === 'class') {
       element.className = value as string
     } else if (key === 'for') {