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

carbon-design-system · Jan 29, 2020 · 2f6ce92 · 2f6ce92
1 parent 870e3a7
commit 2f6ce92
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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>