Fixed VirtualNode for role attributes.

sjohnsonaz · Oct 4, 2018 · 03a7de9 · 03a7de9
1 parent 2db027d
commit 03a7de9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/src/scripts/dom/VirtualNode.ts b/src/scripts/dom/VirtualNode.ts
@@ -121,6 +121,8 @@ export default class VirtualNode<T> implements IVirtualNode<T> {
                 element.setAttribute(property, value);
             } else if (property === 'class') {
                 element.setAttribute(property, value);
+            } else if (property === 'role') {
+                element.setAttribute(property, value);
             } else {
                 try {
                     element[property] = value;
@@ -152,6 +154,8 @@ export default class VirtualNode<T> implements IVirtualNode<T> {
                 element.removeAttribute(property);
             } else if (property === 'class') {
                 element.removeAttribute(property);
+            } else if (property === 'role') {
+                element.removeAttribute(property);
             } else {
                 try {
                     element[property] = '';

diff --git a/src/tests/VirtualNode.toNode_Test.tsx b/src/tests/VirtualNode.toNode_Test.tsx
@@ -109,6 +109,22 @@ describe('VirtualNode.toNode', function () {
         expect(element.getAttribute('data-custom')).to.equal('test value');
     });
 
+    it('should render role attributes', () => {
+        var root = (
+            <div role="button"></div>
+        );
+        let element = Cascade.render(document.createElement('div'), root) as HTMLElement;
+        expect(element.getAttribute('role')).to.equal('button');
+    });
+
+    it('should render aria attributes', () => {
+        var root = (
+            <div aria-label="test value"></div>
+        );
+        let element = Cascade.render(document.createElement('div'), root) as HTMLElement;
+        expect(element.getAttribute('aria-label')).to.equal('test value');
+    });
+
     it('should render style attribute objects', () => {
         var root = (
             <div style={{ width: "100%" }}></div>