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>