fix(CodeSnippet): a11y tabstop + attributes (#13310)

* fix(CodeSnippet): a11y tabstop + attributes

* fix(CSS): add Carbon CSS to focus outline

* refactor(CodeSnippet): relocate parens

Author: jsehull

packages/react/src/components/CodeSnippet/CodeSnippet.js

@@ -226,10 +226,14 @@ function CodeSnippet({
     <div {...rest} className={codeSnippetClasses}>
       <div
         ref={codeContainerRef}
-        role={type === 'single' ? 'textbox' : null}
-        tabIndex={type === 'single' && !disabled ? 0 : null}
+        role={type === 'single' || type === 'multi' ? 'textbox' : null}
+        tabIndex={
+          (type === 'single' || type === 'multi') && !disabled ? 0 : null
+        }
         className={`${prefix}--snippet-container`}
         aria-label={ariaLabel || 'code-snippet'}
+        aria-readonly={type === 'single' || type === 'multi' ? true : null}
+        aria-multiline={type === 'multi' ? true : null}
         onScroll={(type === 'single' && handleScroll) || null}
         {...containerStyle}>
         <pre

packages/styles/scss/components/code-snippet/_code-snippet.scss

@@ -201,6 +201,12 @@ $copy-btn-feedback: $background-inverse !default;
     order: 1;
     overflow-y: auto;
     transition: max-height $duration-moderate-01 motion(standard, productive);
+
+    &:focus {
+      @include focus-outline('outline');
+
+      outline-offset: 0;
+    }
   }
 
   // expanded snippet container