Website - CodeBlock a11y improvements docs (#2896)

Author: dchyun

website/docs/components/code-block/partials/code/component-api.md

@@ -11,6 +11,15 @@ This component uses [prism.js](https://prismjs.com/) under the hood.
   <C.Property @name="<[CB].Description>" @type="yielded component">
     `ContentBlock::Description` yielded as contextual component (see below).
   </C.Property>
+  <C.Property @name="ariaLabel" @type="string">
+    Accepts a localized string. The `ariaLabel` value is applied to the code block pre element.
+  </C.Property>
+  <C.Property @name="ariaLabelledBy" @type="string">
+    Accepts a localized string. The `ariaLabelledBy` value is applied to the code block pre element.
+  </C.Property>
+  <C.Property @name="ariaDescribedBy" @type="string">
+    Accepts a localized string. The `ariaDescribedBy` value is applied to the code block pre element.
+  </C.Property>
   <C.Property @name="value" @type="string" @required={{true}}>
     The text/code content for the `CodeBlock`. The component encodes this argument before displaying it.
   </C.Property>

website/docs/components/code-block/partials/code/how-to-use.md

@@ -1,5 +1,7 @@
 ## How to use this component
 
+To use this component, you must either include the yielded `Title` component, provide an `@ariaLabel`, or specify an `@ariaLabelledBy`.
+
 The basic invocation requires a `@value` argument. The component encodes this argument before displaying it.
 
 !!! Info
@@ -10,6 +12,7 @@ If the `\n` escape sequence is used in the `@value` string in Handlebars, it wil
 
 ```handlebars
 <Hds::CodeBlock
+  @ariaLabel="basic usage"
   @value="aws ec2 --region us-west-1 accept-vpc-peering-connection"
 />
 ```
@@ -70,6 +73,7 @@ The `language` argument sets the syntax highlighting used. We only support the f
 
 ```handlebars
 <Hds::CodeBlock
+  @ariaLabel="language"
   @language="go"
   @value="package main
 import fmt
@@ -85,6 +89,7 @@ Set `hasCopyButton` to `true` to display a button for users to copy `CodeBlock`
 
 ```handlebars
 <Hds::CodeBlock
+  @ariaLabel="copy button"
   @language="javascript"
   @hasCopyButton={{true}}
   @copyButtonText="Copy javascript code"
@@ -99,6 +104,7 @@ Line numbers are displayed by default. Set `hasLineNumbers` to `false` to hide t
 
 ```handlebars
 <Hds::CodeBlock
+  @ariaLabel="line numbers"
   @language="javascript"
   @hasLineNumbers={{false}}
   @value="let codeLang=`JavaScript`;
@@ -118,6 +124,7 @@ By default, long lines of code will overflow the `CodeBlock` container requiring
 
 ```handlebars
 <Hds::CodeBlock
+  @ariaLabel="line wrapping"
   @language="javascript"
   @hasLineWrapping={{true}}
   @value="console.log(`I am JavaScript code`, `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam`);"
@@ -130,6 +137,7 @@ Highlight either individual code lines or a range of code lines. (Examples: `2,
 
 ```handlebars
 <Hds::CodeBlock
+  @ariaLabel="line highlighting"
   @language="javascript"
   @highlightLines={{"2, 4"}}
   @value="import Application from `@ember/application`;

website/docs/components/code-editor/partials/code/component-api.md

@@ -20,6 +20,9 @@ This component uses [CodeMirror 6](https://codemirror.net/) under the hood.
   <C.Property @name="ariaLabelledBy" @type="string">
     Accepts a localized string. The `ariaLabelledBy` value is applied to the code editor input element.
   </C.Property>
+  <C.Property @name="ariaDescribedBy" @type="string">
+    Accepts a localized string. The `ariaDescribedBy` value is applied to the code editor input element.
+  </C.Property>
   <C.Property @name="hasCopyButton" @type="boolean" @default="false">
     Used to control whether a copy button for copying the code/text content will be displayed.
   </C.Property>