Add keyboard handler and aria attributes to

collapse/expand braces, strings and functions

Fixes mac-s-g#355

src/js/components/DataTypes/Function.js

@@ -4,6 +4,8 @@ import DataTypeLabel from './DataTypeLabel';
 //theme
 import Theme from './../../themes/getStyle';
 
+import { generateExpanderProps } from '../../helpers/util';
+
 //attribute store for storing collapsed state
 import AttributeStore from './../../stores/ObjectAttributes';
 
@@ -48,7 +50,7 @@ export default class extends React.PureComponent {
                 <span
                     {...Theme(props.theme, 'function-value')}
                     class="rjv-function-container"
-                    onClick={this.toggleCollapsed}
+                    {...generateExpanderProps(this.toggleCollapsed, !collapsed)}
                 >
                     {this.getFunctionDisplay(collapsed)}
                 </span>

src/js/components/DataTypes/Object.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { polyfill } from 'react-lifecycles-compat';
-import { toType } from './../../helpers/util';
+import { toType, generateExpanderProps } from './../../helpers/util';
 
 //data type components
 import { JsonObject } from './DataTypes';
@@ -156,10 +156,12 @@ class RjvObject extends React.PureComponent {
         return (
             <span>
                 <span
-                    onClick={e => {
-                        this.toggleCollapsed();
-                    }}
+                    {...generateExpanderProps(
+                        this.toggleCollapsed,
+                        this.state.expanded
+                    )}
                     {...Theme(theme, 'brace-row')}
+                    className="rjv-object-container"
                 >
                     <div
                         class="icon-container"

src/js/components/DataTypes/String.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import DataTypeLabel from './DataTypeLabel';
-import { toType } from './../../helpers/util';
+import { toType, generateExpanderProps } from './../../helpers/util';
 
 //theme
 import Theme from './../../themes/getStyle';
@@ -67,7 +67,10 @@ export default class extends React.PureComponent {
                 <span
                     class="string-value"
                     {...style}
-                    onClick={this.toggleCollapsed}
+                    {...generateExpanderProps(
+                        this.toggleCollapsed,
+                        this.state.expanded
+                    )}
                 >
                     {quotesOnValues ? '"' : ''}
                     {value}

src/js/helpers/util.js

@@ -53,3 +53,20 @@ export function isTheme(theme) {
     }
     return false;
 }
+
+export function generateExpanderProps(callback, isExpanded) {
+    function handler(e) {
+        if (e && e.key && e.key != 'Enter') {
+            return;
+        } else {
+            return callback(e);
+        }
+    }
+    return {
+        onClick: callback,
+        onKeyDown: handler,
+        role: 'button',
+        tabIndex: '0',
+        'aria-expanded': isExpanded
+    };
+}

test/tests/js/components/DataTypes/Function-test.js

@@ -1,86 +1,120 @@
-import React from "react"
-import { shallow, mount } from "enzyme"
-import { expect } from "chai"
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import { expect } from 'chai';
 
-import JsonFunction from "./../../../../../src/js/components/DataTypes/Function"
+import JsonFunction from './../../../../../src/js/components/DataTypes/Function';
 
-import AttributeStore from "./../../../../../src/js/stores/ObjectAttributes"
+import AttributeStore from './../../../../../src/js/stores/ObjectAttributes';
 
-describe("<JsonFunction />", function() {
-    const rjvId = 1
+describe('<JsonFunction />', function () {
+    const rjvId = 1;
 
-    it("function component should have a data type label", function() {
+    it('function component should have a data type label', function () {
         const wrapper = mount(
             <JsonFunction
-                value={function() {}}
+                value={function () {}}
                 rjvId={rjvId}
                 displayDataTypes={true}
                 theme="rjv-default"
             />
-        )
-        expect(wrapper.find(".data-type-label")).to.have.length(1)
-    })
+        );
+        expect(wrapper.find('.data-type-label')).to.have.length(1);
+    });
 
-    it("function component should not have a data type label", function() {
+    it('function component should not have a data type label', function () {
         const wrapper = mount(
             <JsonFunction
-                value={function() {}}
+                value={function () {}}
                 rjvId={rjvId}
                 displayDataTypes={false}
                 theme="rjv-default"
             />
-        )
-        expect(wrapper.find(".data-type-label")).to.have.length(0)
-    })
+        );
+        expect(wrapper.find('.data-type-label')).to.have.length(0);
+    });
 
-    it("function component expanded", function() {
-        AttributeStore.set(rjvId, "function-test", "collapsed", false)
+    it('function component expanded', function () {
+        AttributeStore.set(rjvId, 'function-test', 'collapsed', false);
 
         const wrapper = shallow(
             <JsonFunction
-                value={function() {}}
+                value={function () {}}
                 namespace="function-test"
                 rjvId={rjvId}
                 displayDataTypes={true}
                 theme="rjv-default"
             />
-        )
-        expect(wrapper.find(".function-collapsed")).to.have.length(0)
-    })
+        );
+        expect(wrapper.find('.function-collapsed')).to.have.length(0);
+    });
 
-    it("function component collapsed", function() {
-        AttributeStore.set(rjvId, "function-test", "collapsed", true)
+    it('function component collapsed', function () {
+        AttributeStore.set(rjvId, 'function-test', 'collapsed', true);
 
         const wrapper = shallow(
             <JsonFunction
-                value={function() {}}
+                value={function () {}}
                 namespace="function-test"
                 rjvId={rjvId}
                 displayDataTypes={true}
                 theme="rjv-default"
             />
-        )
+        );
 
-        expect(wrapper.find(".function-collapsed")).to.have.length(1)
-    })
+        expect(wrapper.find('.function-collapsed')).to.have.length(1);
+    });
 
-    it("function component click to expand", function() {
-        AttributeStore.set(rjvId, "function-test", "collapsed", true)
+    it('function component click to expand', function () {
+        AttributeStore.set(rjvId, 'function-test', 'collapsed', true);
 
         const wrapper = shallow(
             <JsonFunction
-                value={function() {}}
+                value={function () {}}
                 namespace="function-test"
                 rjvId={rjvId}
                 displayDataTypes={true}
                 theme="rjv-default"
             />
-        )
+        );
 
-        expect(wrapper.find(".function-collapsed")).to.have.length(1)
+        expect(wrapper.find('.function-collapsed')).to.have.length(1);
+        expect(
+            wrapper.find('.rjv-function-container').prop('aria-expanded')
+        ).to.equal(false);
 
-        wrapper.find(".rjv-function-container").simulate("click")
+        wrapper.find('.rjv-function-container').simulate('click');
 
-        expect(wrapper.find(".function-collapsed")).to.have.length(0)
-    })
-})
+        expect(wrapper.find('.function-collapsed')).to.have.length(0);
+        expect(
+            wrapper.find('.rjv-function-container').prop('aria-expanded')
+        ).to.equal(true);
+    });
+
+    it('function component keydown to expand', function () {
+        AttributeStore.set(rjvId, 'function-test', 'collapsed', true);
+
+        const wrapper = shallow(
+            <JsonFunction
+                value={function () {}}
+                namespace="function-test"
+                rjvId={rjvId}
+                displayDataTypes={true}
+                theme="rjv-default"
+            />
+        );
+
+        expect(wrapper.find('.function-collapsed')).to.have.length(1);
+        expect(
+            wrapper.find('.rjv-function-container').prop('aria-expanded')
+        ).to.equal(false);
+
+        wrapper
+            .find('.rjv-function-container')
+            .simulate('keydown', { key: 'Enter' });
+
+        expect(wrapper.find('.function-collapsed')).to.have.length(0);
+        expect(
+            wrapper.find('.rjv-function-container').prop('aria-expanded')
+        ).to.equal(true);
+    });
+});

test/tests/js/components/DataTypes/Object-test.js

@@ -5,7 +5,11 @@ import { expect } from 'chai';
 import JsonObject from './../../../../../src/js/components/DataTypes/Object';
 
 describe('<JsonObject />', function () {
-    const rjvId = 1;
+    let rjvId = 1;
+
+    beforeEach(() => {
+        rjvId++;
+    });
 
     it('Object component should have a data type label', function () {
         let src = {
@@ -373,4 +377,52 @@ describe('<JsonObject />', function () {
         );
         expect(wrapper.text()).to.equal('"":{"d":"d""b":"b""a":"a""c":"c"}');
     });
+
+    it('Object click to expand', function () {
+        let src = {
+            obj: {
+                test: true
+            }
+        };
+        const wrapper = shallow(
+            <JsonObject src={src} rjvId={rjvId} namespace={['root']} />
+        );
+        expect(
+            wrapper.find('.rjv-object-container').prop('aria-expanded')
+        ).to.equal(false);
+        wrapper.find('.rjv-object-container').simulate('click');
+        expect(
+            wrapper.find('.rjv-object-container').prop('aria-expanded')
+        ).to.equal(true);
+    });
+
+    it('Object keydown to expand', function () {
+        let src = {
+            obj: {
+                test: true
+            }
+        };
+        const wrapper = shallow(
+            <JsonObject src={src} rjvId={rjvId} namespace={['root']} />
+        );
+
+        expect(
+            wrapper.find('.rjv-object-container').prop('aria-expanded')
+        ).to.equal(false);
+
+        wrapper
+            .find('.rjv-object-container')
+            .simulate('keydown', { key: 'Space' });
+
+        expect(
+            wrapper.find('.rjv-object-container').prop('aria-expanded')
+        ).to.equal(false);
+
+        wrapper
+            .find('.rjv-object-container')
+            .simulate('keydown', { key: 'Enter' });
+        expect(
+            wrapper.find('.rjv-object-container').at(0).prop('aria-expanded')
+        ).to.equal(true);
+    });
 });