From 625a98bb788a6792b1506f4302df0bf033fda34e Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Wed, 29 Jan 2020 11:47:47 -0800
Subject: [PATCH] fix(code-snippet): remove focus from snippet container
 (#5202)

* fix(code-snippet): remove focus from snippet container

* fix(code-snippet): remove focus on mulit-line snippet

* fix(code-snippet): fix show more styles
---
 .../components/src/components/code-snippet/_code-snippet.scss | 4 ++++
 .../components/src/components/code-snippet/code-snippet.hbs   | 3 ++-
 packages/react/src/components/CodeSnippet/CodeSnippet.js      | 4 ++--
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/code-snippet/_code-snippet.scss b/packages/components/src/components/code-snippet/_code-snippet.scss
index 93232bfcb225..3b3f7ba72980 100644
--- a/packages/components/src/components/code-snippet/_code-snippet.scss
+++ b/packages/components/src/components/code-snippet/_code-snippet.scss
@@ -259,6 +259,9 @@
 
   // Show more / less button
   button.#{$prefix}--btn.#{$prefix}--snippet-btn--expand {
+    @include type-style('body-short-01');
+    @include carbon--font-family('sans');
+    border: 0;
     display: inline-flex;
     align-items: center;
     position: absolute;
@@ -299,6 +302,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 3dd581309e00..552f68a3a65a 100644
--- a/packages/react/src/components/CodeSnippet/CodeSnippet.js
+++ b/packages/react/src/components/CodeSnippet/CodeSnippet.js
@@ -69,8 +69,8 @@ function CodeSnippet({
   return (
     <div {...rest} className={codeSnippetClasses}>
       <div
-        role="textbox"
-        tabIndex={0}
+        role={type === 'single' ? 'textbox' : null}
+        tabIndex={type === 'single' ? 0 : null}
         className={`${prefix}--snippet-container`}
         aria-label={ariaLabel || copyLabel || 'code-snippet'}>
         <code>