diff --git a/src/view/components/Button.tsx b/src/view/components/Button.tsx
index 5bd1ed135..c613b5910 100644
--- a/src/view/components/Button.tsx
+++ b/src/view/components/Button.tsx
@@ -4,6 +4,7 @@ import "../styles/Button.css";
 export interface IButtonProps {
   label: string;
   image: any;
+  focusable: boolean;
   styleLabel: string;
   width: number;
   onClick: (event: React.MouseEvent<HTMLElement>) => void;
@@ -13,6 +14,7 @@ export interface IButtonProps {
 const Button: React.FC<IButtonProps> = props => {
   const iconSvg: SVGElement = props.image as SVGElement;
   const buttonStyle = { width: props.width };
+  const tabIndex = props.focusable ? 0 : -1;
 
   return (
     <button
@@ -22,6 +24,7 @@ const Button: React.FC<IButtonProps> = props => {
       role="button"
       onClick={props.onClick}
       style={buttonStyle}
+      tabIndex={tabIndex}
     >
       {iconSvg}
     </button>
diff --git a/src/view/components/Simulator.tsx b/src/view/components/Simulator.tsx
index ce4f6cda1..41f760f52 100644
--- a/src/view/components/Simulator.tsx
+++ b/src/view/components/Simulator.tsx
@@ -132,6 +132,7 @@ class Simulator extends React.Component<any, IState> {
         <div className="buttons">
           <Button
             onClick={this.togglePlayClick}
+            focusable={true}
             image={image}
             styleLabel="play"
             label="play"
@@ -139,6 +140,7 @@ class Simulator extends React.Component<any, IState> {
           />
           <Button
             onClick={this.refreshSimulatorClick}
+            focusable={true}
             image={RefreshLogo}
             styleLabel="refresh"
             label="refresh"
diff --git a/src/view/components/toolbar/ToolBar.tsx b/src/view/components/toolbar/ToolBar.tsx
index 49b603574..5beaf50aa 100644
--- a/src/view/components/toolbar/ToolBar.tsx
+++ b/src/view/components/toolbar/ToolBar.tsx
@@ -53,6 +53,7 @@ class ToolBar extends React.Component<any, IToolbarState, any> {
               onClick={() => {}}
               image={TOOLBAR_SVG.LEFT_EDGE_SVG}
               styleLabel="edge"
+              focusable={false}
             />
             <Button
               label={TOOLBAR_ICON_ID.SWITCH}
@@ -62,6 +63,7 @@ class ToolBar extends React.Component<any, IToolbarState, any> {
               }}
               image={TOOLBAR_SVG.SLIDER_SWITCH_SVG}
               styleLabel="toolbar"
+              focusable={true}
             />
 
             <Button
@@ -72,6 +74,7 @@ class ToolBar extends React.Component<any, IToolbarState, any> {
               }}
               image={TOOLBAR_SVG.PUSH_BUTTON_SVG}
               styleLabel="toolbar"
+              focusable={true}
             />
 
             <Button
@@ -82,6 +85,7 @@ class ToolBar extends React.Component<any, IToolbarState, any> {
               }}
               image={TOOLBAR_SVG.RED_LED_SVG}
               styleLabel="toolbar"
+              focusable={true}
             />
 
             <Button
@@ -92,6 +96,7 @@ class ToolBar extends React.Component<any, IToolbarState, any> {
               }}
               image={TOOLBAR_SVG.SOUND_SVG}
               styleLabel="toolbar"
+              focusable={true}
             />
 
             <Button
@@ -102,6 +107,7 @@ class ToolBar extends React.Component<any, IToolbarState, any> {
               }}
               image={TOOLBAR_SVG.TEMPERATURE_SVG}
               styleLabel="toolbar"
+              focusable={true}
             />
 
             <Button
@@ -112,6 +118,7 @@ class ToolBar extends React.Component<any, IToolbarState, any> {
               }}
               image={TOOLBAR_SVG.LIGHT_SVG}
               styleLabel="toolbar"
+              focusable={true}
             />
 
             <Button
@@ -122,6 +129,7 @@ class ToolBar extends React.Component<any, IToolbarState, any> {
               }}
               image={TOOLBAR_SVG.SPEAKER_SVG}
               styleLabel="toolbar"
+              focusable={true}
             />
 
             <Button
@@ -132,6 +140,7 @@ class ToolBar extends React.Component<any, IToolbarState, any> {
               }}
               image={TOOLBAR_SVG.MOTION_SVG}
               styleLabel="toolbar"
+              focusable={true}
             />
 
             <Button
@@ -142,6 +151,7 @@ class ToolBar extends React.Component<any, IToolbarState, any> {
               }}
               image={TOOLBAR_SVG.IR_SVG}
               styleLabel="toolbar"
+              focusable={true}
             />
 
             <Button
@@ -152,6 +162,7 @@ class ToolBar extends React.Component<any, IToolbarState, any> {
               }}
               image={TOOLBAR_SVG.GPIO_SVG}
               styleLabel="toolbar"
+              focusable={true}
             />
 
             <Button
@@ -160,6 +171,7 @@ class ToolBar extends React.Component<any, IToolbarState, any> {
               onClick={() => {}}
               image={TOOLBAR_SVG.RIGHT_EDGE_SVG}
               styleLabel="edge"
+              focusable={false}
             />
           </div>
 
diff --git a/src/view/styles/Button.css b/src/view/styles/Button.css
index 0d4569e33..5e77bc41b 100644
--- a/src/view/styles/Button.css
+++ b/src/view/styles/Button.css
@@ -16,17 +16,11 @@
   border-radius: 0px 8px 8px 0px;
 }
 
+.button:focus,
 .button:hover {
   background-color: var(--vscode-terminal-selectionBackground);
 }
 
-.play-button:focus,
-.play-button:hover,
-.refresh-button:focus,
-.refresh-button:hover {
-  background-color: var(--vscode-terminal-selectionBackground);
-}
-
 .button:active {
   background-color: var(--vscode-editor-selectionHighlightBackground);
 }