Fixing bug seeing which icon in the Simulator Control bar is Focused on when tabbing (#116)

[BUG : 32713]

* Adding the focus class to all buttons to see which file is being tabbed on in the Simulator control bar

* Adding a focusable attribute to prevent tab on edges

Author: Christellah

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>

src/view/components/Simulator.tsx

@@ -132,13 +132,15 @@ class Simulator extends React.Component<any, IState> {
         <div className="buttons">
           <Button
             onClick={this.togglePlayClick}
+            focusable={true}
             image={image}
             styleLabel="play"
             label="play"
             width={SIMULATOR_BUTTON_WIDTH}
           />
           <Button
             onClick={this.refreshSimulatorClick}
+            focusable={true}
             image={RefreshLogo}
             styleLabel="refresh"
             label="refresh"

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>
 

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);
 }