fix(code-snippet): add screen reader accessibility improvements (#2165)

* fix(code-snippet): add alert role to copy verification

* fix(code-snippet): add aria-describedby, aria-labelledby to inline snippet

* fix(code-snippet): add unique id to aria-describedby

* fix(code-snippet): remove breaking change

* fix(codesnippet): preserve ariaLabel

src/components/CodeSnippet/CodeSnippet-story.js

@@ -16,8 +16,11 @@ const props = {
   inline: () => ({
     light: boolean('Light variant (light)', false),
     feedback: text('Feedback text (feedback)', 'Feedback Enabled 👍'),
-    copyLabel: text('ARIA label of the copy button (copyLabel)', 'Copy Code'),
     onClick: action('onClick'),
+    copyLabel: text(
+      'ARIA label for the snippet/copy button (copyLabel)',
+      'copyable code snippet'
+    ),
   }),
   single: () => ({
     feedback: text('Feedback text (feedback)', 'Feedback Enabled 👍'),

src/components/CodeSnippet/CodeSnippet.js

@@ -14,6 +14,7 @@ import Copy from '../Copy';
 import CopyButton from '../CopyButton';
 import Icon from '../Icon';
 import { componentsX } from '../../internal/FeatureFlags';
+import uid from '../../tools/uniqueId';
 
 const { prefix } = settings;
 
@@ -39,11 +40,6 @@ export default class CodeSnippet extends Component {
      */
     feedback: PropTypes.string,
 
-    /**
-     * Specify the label used for the Copy Button
-     */
-    copyLabel: PropTypes.string,
-
     /**
      * Specify the description for the Copy Button
      */
@@ -55,6 +51,12 @@ export default class CodeSnippet extends Component {
      */
     onClick: PropTypes.func,
 
+    /**
+     * Specify a label to be read by screen readers on the containing <textbox>
+     * node
+     */
+    copyLabel: PropTypes.string,
+
     /**
      * Specify a label to be read by screen readers on the containing <textbox>
      * node
@@ -119,14 +121,17 @@ export default class CodeSnippet extends Component {
       feedback,
       onClick,
       ariaLabel,
-      copyLabel,
+      copyLabel, //TODO: Merge this prop to `ariaLabel` in `v11`
       copyButtonDescription,
       light,
       showMoreText,
       showLessText,
       ...other
     } = this.props;
 
+    // a unique id generated for aria-describedby
+    this.uid = uid();
+
     const codeSnippetClasses = classNames(className, {
       [`${prefix}--snippet`]: true,
       [`${prefix}--snippet--single`]: type === 'single',
@@ -172,7 +177,7 @@ export default class CodeSnippet extends Component {
         role="textbox"
         tabIndex={0}
         className={`${prefix}--snippet-container`}
-        aria-label={ariaLabel ? ariaLabel : 'code-snippet'}>
+        aria-label={ariaLabel || copyLabel || 'code-snippet'}>
         <code>
           <pre
             ref={codeContent => {
@@ -197,10 +202,11 @@ export default class CodeSnippet extends Component {
         <Copy
           {...other}
           onClick={onClick}
+          aria-label={copyLabel || ariaLabel}
+          aria-describedby={this.uid}
           className={codeSnippetClasses}
-          aria-label={copyLabel}
           feedback={feedback}>
-          <code>{children}</code>
+          <code id={this.uid}>{children}</code>
         </Copy>
       );
     }