diff --git a/src/js/components/DataTypes/Function.js b/src/js/components/DataTypes/Function.js
index 473afe9e..4f8dec69 100644
--- a/src/js/components/DataTypes/Function.js
+++ b/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>
diff --git a/src/js/components/DataTypes/Object.js b/src/js/components/DataTypes/Object.js
index 4c7cb93f..ee23ab6b 100644
--- a/src/js/components/DataTypes/Object.js
+++ b/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"
diff --git a/src/js/components/DataTypes/String.js b/src/js/components/DataTypes/String.js
index bbefb8fa..363b151d 100644
--- a/src/js/components/DataTypes/String.js
+++ b/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}
diff --git a/src/js/helpers/util.js b/src/js/helpers/util.js
index 50ab5185..58d067e8 100644
--- a/src/js/helpers/util.js
+++ b/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
+    };
+}
diff --git a/test/tests/js/components/DataTypes/Function-test.js b/test/tests/js/components/DataTypes/Function-test.js
index 2207dd22..d127bb6a 100644
--- a/test/tests/js/components/DataTypes/Function-test.js
+++ b/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);
+    });
+});
diff --git a/test/tests/js/components/DataTypes/Object-test.js b/test/tests/js/components/DataTypes/Object-test.js
index d50c8d7d..cf669248 100644
--- a/test/tests/js/components/DataTypes/Object-test.js
+++ b/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);
+    });
 });
diff --git a/test/tests/js/components/DataTypes/String-test.js b/test/tests/js/components/DataTypes/String-test.js
index 184dc22a..bdd24e73 100644
--- a/test/tests/js/components/DataTypes/String-test.js
+++ b/test/tests/js/components/DataTypes/String-test.js
@@ -1,12 +1,12 @@
-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 JsonString from "./../../../../../src/js/components/DataTypes/String"
+import JsonString from './../../../../../src/js/components/DataTypes/String';
 
-describe("<JsonString />", function() {
-    it("string component should have a data type label", function() {
-        const rjvId = 1
+describe('<JsonString />', function () {
+    it('string component should have a data type label', function () {
+        const rjvId = 1;
         const wrapper = mount(
             <JsonString
                 value="test"
@@ -14,74 +14,88 @@ describe("<JsonString />", function() {
                 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("string with hidden data type", function() {
-        const rjvId = 1
+    it('string with hidden data type', function () {
+        const rjvId = 1;
         const props = {
-            value: "test",
+            value: 'test',
             rjvId: 1,
-            theme: "rjv-default",
+            theme: 'rjv-default',
             displayDataTypes: false
-        }
-        const component = mount(<JsonString {...props} />).render()
-        expect(component.find(".data-type-label")).to.have.length(0)
-    })
+        };
+        const component = mount(<JsonString {...props} />).render();
+        expect(component.find('.data-type-label')).to.have.length(0);
+    });
 
     //test collapsed string and expand click
-    it("string displaying data type", function() {
-        const rjvId = 1
+    it('string displaying data type', function () {
+        const rjvId = 1;
         const props = {
-            value: "test",
+            value: 'test',
             rjvId: 1,
             displayDataTypes: false,
-            theme: "rjv-default"
-        }
-        const component = mount(<JsonString {...props} />).render()
-        expect(component.find(".data-type-label")).to.have.length(0)
-    })
+            theme: 'rjv-default'
+        };
+        const component = mount(<JsonString {...props} />).render();
+        expect(component.find('.data-type-label')).to.have.length(0);
+    });
 
-    it("collapsed string content", function() {
-        const rjvId = 1
+    it('collapsed string content', function () {
         const props = {
-            value: "123456789",
+            value: '123456789',
             collapseStringsAfterLength: 3,
             rjvId: 1,
             displayDataTypes: false,
-            theme: "rjv-default"
-        }
-        const component = shallow(<JsonString {...props} />)
-        expect(
-            component
-                .render()
-                .find(".string-value")
-                .text()
-        ).to.equal('"123 ..."')
-        component.find(".string-value").simulate("click")
-        expect(
-            component
-                .render()
-                .find(".string-value")
-                .text()
-        ).to.equal('"123456789"')
-    })
+            theme: 'rjv-default'
+        };
+        const component = shallow(<JsonString {...props} />);
+        expect(component.render().find('.string-value').text()).to.equal(
+            '"123 ..."'
+        );
+        component.find('.string-value').simulate('click');
+        expect(component.render().find('.string-value').text()).to.equal(
+            '"123456789"'
+        );
+    });
 
-    it("remove quotes from string value", function() {
+    it('remove quotes from string value', function () {
         const props = {
-            value: "123456789",
+            value: '123456789',
             quotesOnValues: false,
             rjvId: 1,
             displayDataTypes: false,
-            theme: "rjv-default"
-        }
-        const component = shallow(<JsonString {...props} />)
-        expect(
-            component
-                .render()
-                .find(".string-value")
-                .text()
-        ).to.equal('123456789')
-    })
-})
+            theme: 'rjv-default'
+        };
+        const component = shallow(<JsonString {...props} />);
+        expect(component.render().find('.string-value').text()).to.equal(
+            '123456789'
+        );
+    });
+
+    it('collapsed string content with key handler', function () {
+        const props = {
+            value: '123456789',
+            collapseStringsAfterLength: 3,
+            rjvId: 2,
+            displayDataTypes: false,
+            theme: 'rjv-default'
+        };
+        const component = shallow(<JsonString {...props} />);
+        expect(component.render().find('.string-value').text()).to.equal(
+            '"123 ..."'
+        );
+
+        component.find('.string-value').simulate('keydown', { key: 'Space' });
+        expect(component.render().find('.string-value').text()).to.equal(
+            '"123 ..."'
+        );
+
+        component.find('.string-value').simulate('keydown', { key: 'Enter' });
+        expect(component.render().find('.string-value').text()).to.equal(
+            '"123456789"'
+        );
+    });
+});