From 2f6ce92e68d12c0a8c99f811e6654baac337734f Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Wed, 29 Jan 2020 10:25:57 -0800
Subject: [PATCH] fix(code-snippet): remove focus on mulit-line snippet

---
 .../src/components/code-snippet/_code-snippet.scss          | 6 +-----
 .../components/src/components/code-snippet/code-snippet.hbs | 3 ++-
 packages/react/src/components/CodeSnippet/CodeSnippet.js    | 2 ++
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/components/code-snippet/_code-snippet.scss b/packages/components/src/components/code-snippet/_code-snippet.scss
index e46f4bb5119b..84bd86d6e921 100644
--- a/packages/components/src/components/code-snippet/_code-snippet.scss
+++ b/packages/components/src/components/code-snippet/_code-snippet.scss
@@ -90,11 +90,6 @@
     padding: 0 $spacing-03;
   }
 
-  .#{$prefix}--snippet--single .#{$prefix}--snippet-container,
-  .#{$prefix}--snippet--multi .#{$prefix}--snippet-container {
-    @include focus-outline('reset');
-  }
-
   // Single Line Snippet
   .#{$prefix}--snippet--single {
     @include bx--snippet;
@@ -304,6 +299,7 @@
 
   .#{$prefix}--snippet-btn--expand:focus {
     @include focus-outline('outline');
+    border-color: transparent;
   }
 
   .#{$prefix}--snippet--expand
diff --git a/packages/components/src/components/code-snippet/code-snippet.hbs b/packages/components/src/components/code-snippet/code-snippet.hbs
index 89c38c8be32e..5c63223d4948 100644
--- a/packages/components/src/components/code-snippet/code-snippet.hbs
+++ b/packages/components/src/components/code-snippet/code-snippet.hbs
@@ -18,7 +18,8 @@
 
 <div class="{{@root.prefix}}--snippet {{@root.prefix}}--snippet--{{variant}}" {{#is variant "multi"}}
   data-code-snippet{{/is}}>
-  <div class="{{@root.prefix}}--snippet-container" aria-label="Code Snippet Text">
+  <div {{#is variant "single"}}tabindex="0" {{/is}} class="{{@root.prefix}}--snippet-container"
+    aria-label="Code Snippet Text">
     <pre>
 <code>@mixin grid-container {
     width: 100%;
diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.js b/packages/react/src/components/CodeSnippet/CodeSnippet.js
index 6785e209d1f1..552f68a3a65a 100644
--- a/packages/react/src/components/CodeSnippet/CodeSnippet.js
+++ b/packages/react/src/components/CodeSnippet/CodeSnippet.js
@@ -69,6 +69,8 @@ function CodeSnippet({
   return (
     <div {...rest} className={codeSnippetClasses}>
       <div
+        role={type === 'single' ? 'textbox' : null}
+        tabIndex={type === 'single' ? 0 : null}
         className={`${prefix}--snippet-container`}
         aria-label={ariaLabel || copyLabel || 'code-snippet'}>
         <code>