diff --git a/src/components/block/__snapshots__/spec.js.snap b/src/components/block/__snapshots__/spec.js.snap
index 8affe493..e98b6882 100644
--- a/src/components/block/__snapshots__/spec.js.snap
+++ b/src/components/block/__snapshots__/spec.js.snap
@@ -88,6 +88,7 @@ exports[`Block \`triangle="hide"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "4px",
@@ -117,6 +118,7 @@ exports[`Block \`triangle="hide"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "4px",
@@ -146,6 +148,7 @@ exports[`Block \`triangle="hide"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "4px",
@@ -175,6 +178,7 @@ exports[`Block \`triangle="hide"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "4px",
@@ -204,6 +208,7 @@ exports[`Block \`triangle="hide"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "4px",
@@ -233,6 +238,7 @@ exports[`Block \`triangle="hide"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "4px",
@@ -262,6 +268,7 @@ exports[`Block \`triangle="hide"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "4px",
@@ -291,6 +298,7 @@ exports[`Block \`triangle="hide"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "4px",
@@ -320,6 +328,7 @@ exports[`Block \`triangle="hide"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "4px",
@@ -480,6 +489,7 @@ exports[`Block renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "4px",
@@ -509,6 +519,7 @@ exports[`Block renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "4px",
@@ -538,6 +549,7 @@ exports[`Block renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "4px",
@@ -567,6 +579,7 @@ exports[`Block renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "4px",
@@ -596,6 +609,7 @@ exports[`Block renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "4px",
@@ -625,6 +639,7 @@ exports[`Block renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "4px",
@@ -654,6 +669,7 @@ exports[`Block renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "4px",
@@ -683,6 +699,7 @@ exports[`Block renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "4px",
@@ -712,6 +729,7 @@ exports[`Block renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "4px",
@@ -800,6 +818,7 @@ exports[`BlockSwatches renders correctly 1`] = `
     <div
       onClick={[Function]}
       onKeyDown={[Function]}
+      role="button"
       style={
         Object {
           "MozBorderRadius": "4px",
@@ -829,6 +848,7 @@ exports[`BlockSwatches renders correctly 1`] = `
     <div
       onClick={[Function]}
       onKeyDown={[Function]}
+      role="button"
       style={
         Object {
           "MozBorderRadius": "4px",
@@ -858,6 +878,7 @@ exports[`BlockSwatches renders correctly 1`] = `
     <div
       onClick={[Function]}
       onKeyDown={[Function]}
+      role="button"
       style={
         Object {
           "MozBorderRadius": "4px",
diff --git a/src/components/circle/Circle.js b/src/components/circle/Circle.js
index 58e0b6ba..b33fab2a 100644
--- a/src/components/circle/Circle.js
+++ b/src/components/circle/Circle.js
@@ -9,7 +9,7 @@ import { ColorWrap } from '../common'
 import CircleSwatch from './CircleSwatch'
 
 export const Circle = ({ width, onChange, onSwatchHover, colors, hex, circleSize,
-  styles: passedStyles = {}, circleSpacing, className = '' }) => {
+  styles: passedStyles = {}, circleSpacing, className = '', colorLabels = [] }) => {
   const styles = reactCSS(merge({
     'default': {
       card: {
@@ -26,10 +26,11 @@ export const Circle = ({ width, onChange, onSwatchHover, colors, hex, circleSize
 
   return (
     <div style={ styles.card } className={ `circle-picker ${ className }` }>
-      { map(colors, c => (
+      { map(colors, (c, i) => (
         <CircleSwatch
           key={ c }
           color={ c }
+          label={ colorLabels[i] }
           onClick={ handleChange }
           onSwatchHover={ onSwatchHover }
           active={ hex === c.toLowerCase() }
@@ -58,6 +59,9 @@ Circle.defaultProps = {
     material.green['500'], material.lightGreen['500'], material.lime['500'],
     material.yellow['500'], material.amber['500'], material.orange['500'],
     material.deepOrange['500'], material.brown['500'], material.blueGrey['500']],
+  colorLabels: ['red', 'pink', 'purple', 'deep purple', 'indigo', 'blue',
+    'light blue', 'cyan', 'teal', 'green', 'light green', 'lime', 'yellow',
+    'amber', 'orange', 'deep orange', 'brown', 'blue grey'],
   styles: {},
 }
 
diff --git a/src/components/circle/CircleSwatch.js b/src/components/circle/CircleSwatch.js
index 24e19305..54a1b0c2 100644
--- a/src/components/circle/CircleSwatch.js
+++ b/src/components/circle/CircleSwatch.js
@@ -4,7 +4,7 @@ import reactCSS, { handleHover } from 'reactcss'
 import { Swatch } from '../common'
 
 export const CircleSwatch = ({ color, onClick, onSwatchHover, hover, active,
-  circleSize, circleSpacing }) => {
+  circleSize, circleSpacing, label }) => {
   const styles = reactCSS({
     'default': {
       swatch: {
@@ -39,6 +39,7 @@ export const CircleSwatch = ({ color, onClick, onSwatchHover, hover, active,
       <Swatch
         style={ styles.Swatch }
         color={ color }
+        label={ label }
         onClick={ onClick }
         onHover={ onSwatchHover }
         focusStyle={{ boxShadow: `${ styles.Swatch.boxShadow }, 0 0 5px ${ color }` }}
diff --git a/src/components/circle/__snapshots__/spec.js.snap b/src/components/circle/__snapshots__/spec.js.snap
index 451ec1c8..402b8646 100644
--- a/src/components/circle/__snapshots__/spec.js.snap
+++ b/src/components/circle/__snapshots__/spec.js.snap
@@ -42,8 +42,10 @@ exports[`Circle renders correctly 1`] = `
         onFocus={[Function]}
       >
         <div
+          aria-label="red"
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "50%",
@@ -104,8 +106,10 @@ exports[`Circle renders correctly 1`] = `
         onFocus={[Function]}
       >
         <div
+          aria-label="pink"
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "50%",
@@ -166,8 +170,10 @@ exports[`Circle renders correctly 1`] = `
         onFocus={[Function]}
       >
         <div
+          aria-label="purple"
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "50%",
@@ -228,8 +234,10 @@ exports[`Circle renders correctly 1`] = `
         onFocus={[Function]}
       >
         <div
+          aria-label="deep purple"
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "50%",
@@ -290,8 +298,10 @@ exports[`Circle renders correctly 1`] = `
         onFocus={[Function]}
       >
         <div
+          aria-label="indigo"
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "50%",
@@ -352,8 +362,10 @@ exports[`Circle renders correctly 1`] = `
         onFocus={[Function]}
       >
         <div
+          aria-label="blue"
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "50%",
@@ -414,8 +426,10 @@ exports[`Circle renders correctly 1`] = `
         onFocus={[Function]}
       >
         <div
+          aria-label="light blue"
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "50%",
@@ -476,8 +490,10 @@ exports[`Circle renders correctly 1`] = `
         onFocus={[Function]}
       >
         <div
+          aria-label="cyan"
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "50%",
@@ -538,8 +554,10 @@ exports[`Circle renders correctly 1`] = `
         onFocus={[Function]}
       >
         <div
+          aria-label="teal"
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "50%",
@@ -600,8 +618,10 @@ exports[`Circle renders correctly 1`] = `
         onFocus={[Function]}
       >
         <div
+          aria-label="green"
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "50%",
@@ -662,8 +682,10 @@ exports[`Circle renders correctly 1`] = `
         onFocus={[Function]}
       >
         <div
+          aria-label="light green"
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "50%",
@@ -724,8 +746,10 @@ exports[`Circle renders correctly 1`] = `
         onFocus={[Function]}
       >
         <div
+          aria-label="lime"
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "50%",
@@ -786,8 +810,10 @@ exports[`Circle renders correctly 1`] = `
         onFocus={[Function]}
       >
         <div
+          aria-label="yellow"
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "50%",
@@ -848,8 +874,10 @@ exports[`Circle renders correctly 1`] = `
         onFocus={[Function]}
       >
         <div
+          aria-label="amber"
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "50%",
@@ -910,8 +938,10 @@ exports[`Circle renders correctly 1`] = `
         onFocus={[Function]}
       >
         <div
+          aria-label="orange"
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "50%",
@@ -972,8 +1002,10 @@ exports[`Circle renders correctly 1`] = `
         onFocus={[Function]}
       >
         <div
+          aria-label="deep orange"
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "50%",
@@ -1034,8 +1066,10 @@ exports[`Circle renders correctly 1`] = `
         onFocus={[Function]}
       >
         <div
+          aria-label="brown"
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "50%",
@@ -1096,8 +1130,10 @@ exports[`Circle renders correctly 1`] = `
         onFocus={[Function]}
       >
         <div
+          aria-label="blue grey"
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "50%",
@@ -1164,6 +1200,7 @@ exports[`CircleSwatch renders correctly 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "50%",
@@ -1229,6 +1266,7 @@ exports[`CircleSwatch renders with sizing and spacing 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "50%",
diff --git a/src/components/common/Swatch.js b/src/components/common/Swatch.js
index 436dc62f..19b91c56 100644
--- a/src/components/common/Swatch.js
+++ b/src/components/common/Swatch.js
@@ -7,7 +7,7 @@ import Checkboard from './Checkboard'
 const ENTER = 13
 
 export const Swatch = ({ color, style, onClick = () => {}, onHover, title = color,
-  children, focus, focusStyle = {} }) => {
+  children, focus, focusStyle = {}, label }) => {
   const transparent = color === 'transparent'
   const styles = reactCSS({
     default: {
@@ -38,8 +38,10 @@ export const Swatch = ({ color, style, onClick = () => {}, onHover, title = colo
       style={ styles.swatch }
       onClick={ handleClick }
       title={ title }
+      role="button"
       tabIndex={ 0 }
       onKeyDown={ handleKeyDown }
+      {...(label && {'aria-label': label })}
       { ...optionalEvents }
     >
       { children }
diff --git a/src/components/common/__snapshots__/spec.js.snap b/src/components/common/__snapshots__/spec.js.snap
index 4e3878ff..147c113f 100644
--- a/src/components/common/__snapshots__/spec.js.snap
+++ b/src/components/common/__snapshots__/spec.js.snap
@@ -429,6 +429,7 @@ exports[`Swatch renders correctly 1`] = `
   <div
     onClick={[Function]}
     onKeyDown={[Function]}
+    role="button"
     style={
       Object {
         "background": "#333",
@@ -454,6 +455,7 @@ exports[`Swatch renders custom title correctly 1`] = `
   <div
     onClick={[Function]}
     onKeyDown={[Function]}
+    role="button"
     style={
       Object {
         "background": "#fff",
@@ -479,6 +481,7 @@ exports[`Swatch renders with an onMouseOver handler correctly 1`] = `
     onClick={[Function]}
     onKeyDown={[Function]}
     onMouseOver={[Function]}
+    role="button"
     style={
       Object {
         "background": "#fff",
diff --git a/src/components/compact/__snapshots__/spec.js.snap b/src/components/compact/__snapshots__/spec.js.snap
index 008bb4c4..fea4fde2 100644
--- a/src/components/compact/__snapshots__/spec.js.snap
+++ b/src/components/compact/__snapshots__/spec.js.snap
@@ -57,6 +57,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#4D4D4D",
@@ -100,6 +101,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#999999",
@@ -143,6 +145,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "MozBoxShadow": "inset 0 0 0 1px #ddd",
@@ -191,6 +194,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#F44E3B",
@@ -234,6 +238,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#FE9200",
@@ -277,6 +282,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#FCDC00",
@@ -320,6 +326,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#DBDF00",
@@ -363,6 +370,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#A4DD00",
@@ -406,6 +414,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#68CCCA",
@@ -449,6 +458,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#73D8FF",
@@ -492,6 +502,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#AEA1FF",
@@ -535,6 +546,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#FDA1FF",
@@ -578,6 +590,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#333333",
@@ -621,6 +634,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#808080",
@@ -664,6 +678,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#cccccc",
@@ -707,6 +722,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#D33115",
@@ -750,6 +766,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#E27300",
@@ -793,6 +810,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#FCC400",
@@ -836,6 +854,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#B0BC00",
@@ -879,6 +898,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#68BC00",
@@ -922,6 +942,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#16A5A5",
@@ -965,6 +986,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#009CE0",
@@ -1008,6 +1030,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#7B64FF",
@@ -1051,6 +1074,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#FA28FF",
@@ -1094,6 +1118,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#000000",
@@ -1137,6 +1162,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#666666",
@@ -1180,6 +1206,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#B3B3B3",
@@ -1223,6 +1250,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#9F0500",
@@ -1266,6 +1294,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#C45100",
@@ -1309,6 +1338,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#FB9E00",
@@ -1352,6 +1382,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#808900",
@@ -1395,6 +1426,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#194D33",
@@ -1438,6 +1470,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#0C797D",
@@ -1481,6 +1514,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#0062B1",
@@ -1524,6 +1558,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#653294",
@@ -1567,6 +1602,7 @@ exports[`Compact renders correctly 1`] = `
           <div
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#AB149E",
@@ -1900,6 +1936,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#4D4D4D",
@@ -1944,6 +1981,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#999999",
@@ -1988,6 +2026,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "MozBoxShadow": "inset 0 0 0 1px #ddd",
@@ -2037,6 +2076,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#F44E3B",
@@ -2081,6 +2121,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#FE9200",
@@ -2125,6 +2166,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#FCDC00",
@@ -2169,6 +2211,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#DBDF00",
@@ -2213,6 +2256,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#A4DD00",
@@ -2257,6 +2301,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#68CCCA",
@@ -2301,6 +2346,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#73D8FF",
@@ -2345,6 +2391,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#AEA1FF",
@@ -2389,6 +2436,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#FDA1FF",
@@ -2433,6 +2481,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#333333",
@@ -2477,6 +2526,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#808080",
@@ -2521,6 +2571,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#cccccc",
@@ -2565,6 +2616,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#D33115",
@@ -2609,6 +2661,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#E27300",
@@ -2653,6 +2706,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#FCC400",
@@ -2697,6 +2751,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#B0BC00",
@@ -2741,6 +2796,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#68BC00",
@@ -2785,6 +2841,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#16A5A5",
@@ -2829,6 +2886,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#009CE0",
@@ -2873,6 +2931,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#7B64FF",
@@ -2917,6 +2976,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#FA28FF",
@@ -2961,6 +3021,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#000000",
@@ -3005,6 +3066,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#666666",
@@ -3049,6 +3111,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#B3B3B3",
@@ -3093,6 +3156,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#9F0500",
@@ -3137,6 +3201,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#C45100",
@@ -3181,6 +3246,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#FB9E00",
@@ -3225,6 +3291,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#808900",
@@ -3269,6 +3336,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#194D33",
@@ -3313,6 +3381,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#0C797D",
@@ -3357,6 +3426,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#0062B1",
@@ -3401,6 +3471,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#653294",
@@ -3445,6 +3516,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseOver={[Function]}
+            role="button"
             style={
               Object {
                 "background": "#AB149E",
@@ -3728,6 +3800,7 @@ exports[`CompactColor renders correctly 1`] = `
   <div
     onClick={[Function]}
     onKeyDown={[Function]}
+    role="button"
     style={
       Object {
         "background": undefined,
diff --git a/src/components/github/__snapshots__/spec.js.snap b/src/components/github/__snapshots__/spec.js.snap
index c36dd1ae..3f716f4c 100644
--- a/src/components/github/__snapshots__/spec.js.snap
+++ b/src/components/github/__snapshots__/spec.js.snap
@@ -65,6 +65,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#B80000",
@@ -101,6 +102,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#DB3E00",
@@ -137,6 +139,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#FCCB00",
@@ -173,6 +176,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#008B02",
@@ -209,6 +213,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#006B76",
@@ -245,6 +250,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#1273DE",
@@ -281,6 +287,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#004DCF",
@@ -317,6 +324,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#5300EB",
@@ -353,6 +361,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#EB9694",
@@ -389,6 +398,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#FAD0C3",
@@ -425,6 +435,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#FEF3BD",
@@ -461,6 +472,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#C1E1C5",
@@ -497,6 +509,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#BEDADC",
@@ -533,6 +546,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#C4DEF6",
@@ -569,6 +583,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#BED3F3",
@@ -605,6 +620,7 @@ exports[`Github \`triangle="hide"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#D4C4FB",
@@ -691,6 +707,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#B80000",
@@ -727,6 +744,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#DB3E00",
@@ -763,6 +781,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#FCCB00",
@@ -799,6 +818,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#008B02",
@@ -835,6 +855,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#006B76",
@@ -871,6 +892,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#1273DE",
@@ -907,6 +929,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#004DCF",
@@ -943,6 +966,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#5300EB",
@@ -979,6 +1003,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#EB9694",
@@ -1015,6 +1040,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#FAD0C3",
@@ -1051,6 +1077,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#FEF3BD",
@@ -1087,6 +1114,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#C1E1C5",
@@ -1123,6 +1151,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#BEDADC",
@@ -1159,6 +1188,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#C4DEF6",
@@ -1195,6 +1225,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#BED3F3",
@@ -1231,6 +1262,7 @@ exports[`Github \`triangle="top-right"\` 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#D4C4FB",
@@ -1317,6 +1349,7 @@ exports[`Github renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#B80000",
@@ -1353,6 +1386,7 @@ exports[`Github renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#DB3E00",
@@ -1389,6 +1423,7 @@ exports[`Github renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#FCCB00",
@@ -1425,6 +1460,7 @@ exports[`Github renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#008B02",
@@ -1461,6 +1497,7 @@ exports[`Github renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#006B76",
@@ -1497,6 +1534,7 @@ exports[`Github renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#1273DE",
@@ -1533,6 +1571,7 @@ exports[`Github renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#004DCF",
@@ -1569,6 +1608,7 @@ exports[`Github renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#5300EB",
@@ -1605,6 +1645,7 @@ exports[`Github renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#EB9694",
@@ -1641,6 +1682,7 @@ exports[`Github renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#FAD0C3",
@@ -1677,6 +1719,7 @@ exports[`Github renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#FEF3BD",
@@ -1713,6 +1756,7 @@ exports[`Github renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#C1E1C5",
@@ -1749,6 +1793,7 @@ exports[`Github renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#BEDADC",
@@ -1785,6 +1830,7 @@ exports[`Github renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#C4DEF6",
@@ -1821,6 +1867,7 @@ exports[`Github renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#BED3F3",
@@ -1857,6 +1904,7 @@ exports[`Github renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "background": "#D4C4FB",
@@ -1897,6 +1945,7 @@ exports[`GithubSwatch renders correctly 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "background": "#333",
diff --git a/src/components/sketch/__snapshots__/spec.js.snap b/src/components/sketch/__snapshots__/spec.js.snap
index 2793f6ae..d8837293 100644
--- a/src/components/sketch/__snapshots__/spec.js.snap
+++ b/src/components/sketch/__snapshots__/spec.js.snap
@@ -811,6 +811,7 @@ exports[`Sketch renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "3px",
@@ -852,6 +853,7 @@ exports[`Sketch renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "3px",
@@ -893,6 +895,7 @@ exports[`Sketch renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "3px",
@@ -934,6 +937,7 @@ exports[`Sketch renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "3px",
@@ -975,6 +979,7 @@ exports[`Sketch renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "3px",
@@ -1016,6 +1021,7 @@ exports[`Sketch renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "3px",
@@ -1057,6 +1063,7 @@ exports[`Sketch renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "3px",
@@ -1098,6 +1105,7 @@ exports[`Sketch renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "3px",
@@ -1139,6 +1147,7 @@ exports[`Sketch renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "3px",
@@ -1180,6 +1189,7 @@ exports[`Sketch renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "3px",
@@ -1221,6 +1231,7 @@ exports[`Sketch renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "3px",
@@ -1262,6 +1273,7 @@ exports[`Sketch renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "3px",
@@ -1303,6 +1315,7 @@ exports[`Sketch renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "3px",
@@ -1344,6 +1357,7 @@ exports[`Sketch renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "3px",
@@ -1385,6 +1399,7 @@ exports[`Sketch renders correctly 1`] = `
         <div
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="button"
           style={
             Object {
               "MozBorderRadius": "3px",
@@ -1760,6 +1775,7 @@ exports[`SketchPresetColors renders correctly 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "3px",
@@ -1801,6 +1817,7 @@ exports[`SketchPresetColors renders correctly 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "3px",
@@ -1842,6 +1859,7 @@ exports[`SketchPresetColors renders correctly 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "3px",
@@ -1900,6 +1918,7 @@ exports[`SketchPresetColors with custom titles renders correctly 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "3px",
@@ -1941,6 +1960,7 @@ exports[`SketchPresetColors with custom titles renders correctly 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "3px",
@@ -1982,6 +2002,7 @@ exports[`SketchPresetColors with custom titles renders correctly 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "3px",
@@ -2023,6 +2044,7 @@ exports[`SketchPresetColors with custom titles renders correctly 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "3px",
diff --git a/src/components/swatches/__snapshots__/spec.js.snap b/src/components/swatches/__snapshots__/spec.js.snap
index 37029cc7..548e493c 100644
--- a/src/components/swatches/__snapshots__/spec.js.snap
+++ b/src/components/swatches/__snapshots__/spec.js.snap
@@ -79,6 +79,7 @@ exports[`Swatches renders correctly 1`] = `
               <div
                 onClick={[Function]}
                 onKeyDown={[Function]}
+                role="button"
                 style={
                   Object {
                     "MozBorderRadius": "0 0 2px 2px",
@@ -143,6 +144,7 @@ exports[`Swatches renders correctly 1`] = `
               <div
                 onClick={[Function]}
                 onKeyDown={[Function]}
+                role="button"
                 style={
                   Object {
                     "MozBorderRadius": "0 0 2px 2px",
@@ -212,6 +214,7 @@ exports[`SwatchesColor renders correctly 1`] = `
   <div
     onClick={[Function]}
     onKeyDown={[Function]}
+    role="button"
     style={
       Object {
         "background": undefined,
@@ -262,6 +265,7 @@ exports[`SwatchesColor renders with props 1`] = `
   <div
     onClick={[Function]}
     onKeyDown={[Function]}
+    role="button"
     style={
       Object {
         "MozBorderRadius": "0 0 2px 2px",
@@ -328,6 +332,7 @@ exports[`SwatchesGroup renders correctly 1`] = `
     <div
       onClick={[Function]}
       onKeyDown={[Function]}
+      role="button"
       style={
         Object {
           "MozBorderRadius": "0 0 2px 2px",
diff --git a/src/components/twitter/__snapshots__/spec.js.snap b/src/components/twitter/__snapshots__/spec.js.snap
index 6b073a1f..1548e6cc 100644
--- a/src/components/twitter/__snapshots__/spec.js.snap
+++ b/src/components/twitter/__snapshots__/spec.js.snap
@@ -62,6 +62,7 @@ exports[`Twitter \`triangle="hide"\` 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "4px",
@@ -90,6 +91,7 @@ exports[`Twitter \`triangle="hide"\` 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "4px",
@@ -118,6 +120,7 @@ exports[`Twitter \`triangle="hide"\` 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "4px",
@@ -146,6 +149,7 @@ exports[`Twitter \`triangle="hide"\` 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "4px",
@@ -174,6 +178,7 @@ exports[`Twitter \`triangle="hide"\` 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "4px",
@@ -202,6 +207,7 @@ exports[`Twitter \`triangle="hide"\` 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "4px",
@@ -230,6 +236,7 @@ exports[`Twitter \`triangle="hide"\` 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "4px",
@@ -258,6 +265,7 @@ exports[`Twitter \`triangle="hide"\` 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "4px",
@@ -286,6 +294,7 @@ exports[`Twitter \`triangle="hide"\` 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "4px",
@@ -314,6 +323,7 @@ exports[`Twitter \`triangle="hide"\` 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "4px",
@@ -472,6 +482,7 @@ exports[`Twitter \`triangle="top-right"\` 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "4px",
@@ -500,6 +511,7 @@ exports[`Twitter \`triangle="top-right"\` 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "4px",
@@ -528,6 +540,7 @@ exports[`Twitter \`triangle="top-right"\` 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "4px",
@@ -556,6 +569,7 @@ exports[`Twitter \`triangle="top-right"\` 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "4px",
@@ -584,6 +598,7 @@ exports[`Twitter \`triangle="top-right"\` 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "4px",
@@ -612,6 +627,7 @@ exports[`Twitter \`triangle="top-right"\` 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "4px",
@@ -640,6 +656,7 @@ exports[`Twitter \`triangle="top-right"\` 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "4px",
@@ -668,6 +685,7 @@ exports[`Twitter \`triangle="top-right"\` 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "4px",
@@ -696,6 +714,7 @@ exports[`Twitter \`triangle="top-right"\` 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "4px",
@@ -724,6 +743,7 @@ exports[`Twitter \`triangle="top-right"\` 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "4px",
@@ -882,6 +902,7 @@ exports[`Twitter renders correctly 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "4px",
@@ -910,6 +931,7 @@ exports[`Twitter renders correctly 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "4px",
@@ -938,6 +960,7 @@ exports[`Twitter renders correctly 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "4px",
@@ -966,6 +989,7 @@ exports[`Twitter renders correctly 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "4px",
@@ -994,6 +1018,7 @@ exports[`Twitter renders correctly 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "4px",
@@ -1022,6 +1047,7 @@ exports[`Twitter renders correctly 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "4px",
@@ -1050,6 +1076,7 @@ exports[`Twitter renders correctly 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "4px",
@@ -1078,6 +1105,7 @@ exports[`Twitter renders correctly 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "4px",
@@ -1106,6 +1134,7 @@ exports[`Twitter renders correctly 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "4px",
@@ -1134,6 +1163,7 @@ exports[`Twitter renders correctly 1`] = `
       <div
         onClick={[Function]}
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "MozBorderRadius": "4px",