Merge pull request #57 from IBMa/html-code-snippets

Support HTML code snippet in help files
IBMa · May 13, 2020 · b60d30d · b60d30d
2 parents ab40f13 + c5f47e1
commit b60d30d
Show file tree

Hide file tree

Showing 161 changed files with 663 additions and 802 deletions.
diff --git a/accessibility-checker-engine/help/HAAC_Accesskey_NeedLabel.mdx b/accessibility-checker-engine/help/HAAC_Accesskey_NeedLabel.mdx
@@ -2,7 +2,7 @@
 title: "Accessibility Checker Rule Help: HAAC_Accesskey_NeedLabel"
 ---
 import "../../../styles/ToolHelp.scss"
-import { Tag } from "carbon-components-react";
+import { CodeSnippet, Tag } from "carbon-components-react";
 
 <div className="toolHelp">
 <Row>

diff --git a/accessibility-checker-engine/help/HAAC_ActiveDescendantCheck.mdx b/accessibility-checker-engine/help/HAAC_ActiveDescendantCheck.mdx
@@ -2,7 +2,7 @@
 title: "Accessibility Checker Rule Help: HAAC_ActiveDescendantCheck"
 ---
 import "../../../styles/ToolHelp.scss"
-import { Tag } from "carbon-components-react";
+import { CodeSnippet, Tag } from "carbon-components-react";
 
 <div className="toolHelp">
 <Row>
@@ -38,14 +38,14 @@ The `aria-activedescendant` property must reference the `id` of a non-empty, non
 
 The following example* shows a radio group using `aria-activedescendant` to indicate the active radio button, which is coded as a DOM descendant:
 
-   ``` 
-   <h3 id="group_label_1">Pizza Crust</h3>
-   <ul id="rg1" class="radiogroup" role="radiogroup" aria-labelledby="group_label_1" aria-activedescendant="rb11" tabindex="0">
-     <li id="rb11" role="radio" aria-checked="false">Regular crust</li>
-     <li id="rb12" role="radio" aria-checked="false">Deep dish</li>
-     <li id="rb13" role="radio" aria-checked="false">Thin crust</li>
-   </ul> 
-   ``` 
+<CodeSnippet type="multi" light={true}> 
+   &lt;h3 id="group_label_1"&gt;Pizza Crust&lt;/h3&gt;
+   &lt;ul id="rg1" class="radiogroup" role="radiogroup" aria-labelledby="group_label_1" aria-activedescendant="rb11" tabindex="0"&gt;
+     &lt;li id="rb11" role="radio" aria-checked="false"&gt;Regular crust&lt;/li&gt;
+     &lt;li id="rb12" role="radio" aria-checked="false"&gt;Deep dish&lt;/li&gt;
+     &lt;li id="rb13" role="radio" aria-checked="false"&gt;Thin crust&lt;/li&gt;
+   &lt;/ul&gt; 
+   </CodeSnippet> 
 
 * Example code includes material copied from or derived from ARIA 1.2 Practices - Radio Group Example Using aria-activedescendant. Copyright © 2018-2019 W3C® (MIT, ERCIM, Keio, Beihang).
 

diff --git a/accessibility-checker-engine/help/HAAC_Application_Role_Text.mdx b/accessibility-checker-engine/help/HAAC_Application_Role_Text.mdx
@@ -2,7 +2,7 @@
 title: "Accessibility Checker Rule Help: HAAC_Application_Role_Text"
 ---
 import "../../../styles/ToolHelp.scss"
-import { Tag } from "carbon-components-react";
+import { CodeSnippet, Tag } from "carbon-components-react";
 
 <div className="toolHelp">
 <Row>

diff --git a/accessibility-checker-engine/help/HAAC_Aria_ErrorMessage.mdx b/accessibility-checker-engine/help/HAAC_Aria_ErrorMessage.mdx
@@ -2,7 +2,7 @@
 title: "Accessibility Checker Rule Help: HAAC_Aria_ErrorMessage"
 ---
 import "../../../styles/ToolHelp.scss"
-import { Tag } from "carbon-components-react";
+import { CodeSnippet, Tag } from "carbon-components-react";
 
 <div className="toolHelp">
 <Row>
@@ -34,17 +34,16 @@ A custom error message must reference a valid `id` and when triggered the messag
 
 Example:
 
-```<!-- Initial valid state -->
-<label for="startTime">Please enter a start time for the meeting:</label>
-<input id="startTime" type="text" aria-errormessage="msgID" value="" aria-invalid="false">
-<span id="msgID" aria-live="off" style="visibility:hidden">Invalid time:  the time must be between 9:00 AM and 5:00 PM</span>
-
-<!-- User has entered an invalid value -->
-<label for="startTime">Please enter a start time for the meeting:</label>
-
-<input id="startTime" type="text" aria-errormessage="msgID" aria-invalid="true" value="11:30" PM>
-<span id="msgID" aria-live="assertive" style="visibility:visible">Invalid time:  the time must be between 9:00 AM and 5:00 PM</span>
-```
+<CodeSnippet type="multi" light={true}>&lt;!-- Initial valid state --&gt;
+&lt;label for="startTime"&gt;Please enter a start time for the meeting:&lt;/label&gt;
+&lt;input id="startTime" type="text" aria-errormessage="msgID" value="" aria-invalid="false"&gt;
+&lt;span id="msgID" aria-live="off" style="visibility:hidden"&gt;Invalid time:  the time must be between 9:00 AM and 5:00 PM&lt;/span&gt;
+
+&lt;!-- User has entered an invalid value --&gt;
+&lt;label for="startTime"&gt;Please enter a start time for the meeting:&lt;/label&gt;
+
+&lt;input id="startTime" type="text" aria-errormessage="msgID" aria-invalid="true" value="11:30" PM&gt;
+&lt;span id="msgID" aria-live="assertive" style="visibility:visible"&gt;Invalid time:  the time must be between 9:00 AM and 5:00 PM&lt;/span&gt;</CodeSnippet>
 
 Note: Example code includes material copied from or derived from W3C WAI-ARIA 1.1 Copyright © [2013-2017] W3C® (MIT, ERCIM, Keio, Beihang)
 

diff --git a/accessibility-checker-engine/help/HAAC_Aria_ImgAlt.mdx b/accessibility-checker-engine/help/HAAC_Aria_ImgAlt.mdx
@@ -2,7 +2,7 @@
 title: "Accessibility Checker Rule Help: HAAC_Aria_ImgAlt"
 ---
 import "../../../styles/ToolHelp.scss"
-import { Tag } from "carbon-components-react";
+import { CodeSnippet, Tag } from "carbon-components-react";
 
 <div className="toolHelp">
 <Row>
@@ -38,9 +38,7 @@ Element with an `"img"` role must have a non-empty label
 
 Example:
 
-```
-<div role="img" aria-labelledby="image1"> ... <p id="image1">Text that describes the group of images.</p></div>
-```
+<CodeSnippet type="single" light={true}>&lt;div role="img" aria-labelledby="image1"&gt; ... &lt;p id="image1"&gt;Text that describes the group of images.&lt;/p&gt;&lt;/div&gt;</CodeSnippet>
 
 </Column>
 </Row>

diff --git a/accessibility-checker-engine/help/HAAC_Aria_Native_Host_Sematics.mdx b/accessibility-checker-engine/help/HAAC_Aria_Native_Host_Sematics.mdx
@@ -2,7 +2,7 @@
 title: "Accessibility Checker Rule Help: HAAC_Aria_Native_Host_Sematics"
 ---
 import "../../../styles/ToolHelp.scss"
-import { Tag } from "carbon-components-react";
+import { CodeSnippet, Tag } from "carbon-components-react";
 
 <div className="toolHelp">
 <Row>
@@ -36,15 +36,11 @@ WAI-ARIA roles and attributes must be valid for the element they are assigned to
 
 The following sample code correctly uses the HTML5 `<aside>` element to designate complementary content on the page.
 
-```
-<aside>About the editor, Max Perkins: Editor of Genius(1978),…… </aside> 
-```
+<CodeSnippet type="single" light={true}>&lt;aside&gt;About the editor, Max Perkins: Editor of Genius(1978),…… &lt;/aside&gt; </CodeSnippet>
 
-The following code correctly overrides the `<aside>` element’s implicit semantics (`role=“complementary”`) by using the ARIA role of `“note”` to designate the notated content on the page.
-
-```        
-<aside role="note">About the editor, Max Perkins: Editor of Genius(1978),…… </aside> 
-```
+The following code correctly overrides the `&lt;aside&gt;` element’s implicit semantics (`role=“complementary”`) by using the ARIA role of `“note”` to designate the notated content on the page.
+
+<CodeSnippet type="single" light={true}>&lt;aside role="note"&gt;About the editor, Max Perkins: Editor of Genius(1978),…… &lt;/aside&gt; </CodeSnippet>
 
 </Column>
 </Row>

diff --git a/accessibility-checker-engine/help/HAAC_Aria_Or_HTML5_Attr.mdx b/accessibility-checker-engine/help/HAAC_Aria_Or_HTML5_Attr.mdx
@@ -2,7 +2,7 @@
 title: "Accessibility Checker Rule Help: HAAC_Aria_Or_HTML5_Attr"
 ---
 import "../../../styles/ToolHelp.scss"
-import { Tag } from "carbon-components-react";
+import { CodeSnippet, Tag } from "carbon-components-react";
 
 <div className="toolHelp">
 <Row>
@@ -34,15 +34,13 @@ Remove one of the conflicting HTML5 or ARIA attributes from the `<input>` elemen
 
 Example using HTML5:
 
-```<label for="phone">* Phone number: </body>
-<input type="text" id="phone" name="phone" required>
-```
-
+<CodeSnippet type="multi" light={true}>&lt;label for="phone"&gt;* Phone number: &lt;/body&gt;
+&lt;input type="text" id="phone" name="phone" required&gt;</CodeSnippet>
+
 Example uses both HTML5 and ARIA attribute indicating the input is required without any conflict:
-
-```<label for="phone">* Phone number: </body>
-<input type="text" id="phone" name="phone" required aria-required="true">
-```
+
+<CodeSnippet type="multi" light={true}>&lt;label for="phone"&gt;* Phone number: &lt;/body&gt;
+&lt;input type="text" id="phone" name="phone" required aria-required="true"&gt;</CodeSnippet>
 
 
 </Column>

diff --git a/accessibility-checker-engine/help/HAAC_Audio_Video_Trigger.mdx b/accessibility-checker-engine/help/HAAC_Audio_Video_Trigger.mdx
@@ -2,7 +2,7 @@
 title: "Accessibility Checker Rule Help: HAAC_Audio_Video_Trigger"
 ---
 import "../../../styles/ToolHelp.scss"
-import { Tag } from "carbon-components-react";
+import { CodeSnippet, Tag } from "carbon-components-react";
 
 <div className="toolHelp">
 <Row>
@@ -36,14 +36,13 @@ Media using `<audio>` and / or `<video>` elements must have keyboard accessible
 * OR check to ensure default playback controls provided by the browser allow easy keyboard navigation and control.
 For example:
 
-```<audio id="demo" src="audio.mp3"></audio>
-    <div>
-        <button onclick="document.getElementById('demo').play()">Play the Audio</button>
-        <button onclick="document.getElementById('demo').pause()">Pause the Audio</button>
-        <button onclick="document.getElementById('demo').volume+=0.1">Increase Volume</button>
-        <button onclick="document.getElementById('demo').volume-=0.1">Decrease Volume</button>
-    </div>
-```
+<CodeSnippet type="multi" light={true}>&lt;audio id="demo" src="audio.mp3"&gt;&lt;/audio&gt;
+    &lt;div&gt;
+        &lt;button onclick="document.getElementById('demo').play()"&gt;Play the Audio&lt;/button&gt;
+        &lt;button onclick="document.getElementById('demo').pause()"&gt;Pause the Audio&lt;/button&gt;
+        &lt;button onclick="document.getElementById('demo').volume+=0.1"&gt;Increase Volume&lt;/button&gt;
+        &lt;button onclick="document.getElementById('demo').volume-=0.1"&gt;Decrease Volume&lt;/button&gt;
+    &lt;/div&gt;</CodeSnippet>
 
 </Column>
 </Row>

diff --git a/accessibility-checker-engine/help/HAAC_BackgroundImg_HasTextOrTitle.mdx b/accessibility-checker-engine/help/HAAC_BackgroundImg_HasTextOrTitle.mdx
@@ -2,7 +2,7 @@
 title: "Accessibility Checker Rule Help: HAAC_BackgroundImg_HasTextOrTitle"
 ---
 import "../../../styles/ToolHelp.scss"
-import { Tag } from "carbon-components-react";
+import { CodeSnippet, Tag } from "carbon-components-react";
 
 <div className="toolHelp">
 <Row>

diff --git a/accessibility-checker-engine/help/HAAC_Canvas.mdx b/accessibility-checker-engine/help/HAAC_Canvas.mdx
@@ -2,7 +2,7 @@
 title: "Accessibility Checker Rule Help: HAAC_Canvas"
 ---
 import "../../../styles/ToolHelp.scss"
-import { Tag } from "carbon-components-react";
+import { CodeSnippet, Tag } from "carbon-components-react";
 
 <div className="toolHelp">
 <Row>
@@ -38,22 +38,18 @@ The `<canvas>` element may not be accessible
 
 This example shows the use of the `<canvas>` element with its content exposed as an image with a WAI-ARIA `role` attribute, a label, and a description.
 
-```
-<!-- Canvas exposed as an image element. -->
-<canvas id="example" role="img" alt="Circles" aria-describedby="img1"></canvas>
-<div id="img1">
-		<p>The prose in this div describes the circles in detail</p>
-</div>
-```
+<CodeSnippet type="multi" light={true}>&lt;!-- Canvas exposed as an image element. --&gt;
+&lt;canvas id="example" role="img" alt="Circles" aria-describedby="img1"&gt;&lt;/canvas&gt;
+&lt;div id="img1"&gt;
+    &lt;p&gt;The prose in this div describes the circles in detail&lt;/p&gt;
+&lt;/div&gt;</CodeSnippet>
 
-This example shows an interactive `<canvas>` with equivalent accessible information provided in the canvas fallback content. The keyboard equivalent would be applied to the corresponding fallback elements.
+This example shows an interactive `&lt;canvas&gt;` with equivalent accessible information provided in the canvas fallback content. The keyboard equivalent would be applied to the corresponding fallback elements.
 
-```
-<!-- Canvas exposed as a button element -->
-<canvas id="roundButton" onmousedown="..." onmouseup="..." onclick="..." onkeydown="..." onkeyup="...">
-    <div tabindex="0" role="button">ok</div>
-</canvas>
-```
+<CodeSnippet type="multi" light={true}>&lt;!-- Canvas exposed as a button element --&gt;
+&lt;canvas id="roundButton" onmousedown="..." onmouseup="..." onclick="..." onkeydown="..." onkeyup="..."&gt;
+    &lt;div tabindex="0" role="button"&gt;ok&lt;/div&gt;
+&lt;/canvas&gt;</CodeSnippet>
 
 </Column>
 </Row>

diff --git a/accessibility-checker-engine/help/HAAC_Combobox_ARIA_11_Guideline.mdx b/accessibility-checker-engine/help/HAAC_Combobox_ARIA_11_Guideline.mdx
@@ -2,7 +2,7 @@
 title: "Accessibility Checker Rule Help: HAAC_Combobox_ARIA_11_Guideline"
 ---
 import "../../../styles/ToolHelp.scss"
-import { Tag } from "carbon-components-react";
+import { CodeSnippet, Tag } from "carbon-components-react";
 
 <div className="toolHelp">
 <Row>
@@ -37,17 +37,15 @@ Combobox widget should be coded to WAI-ARIA 1.2 Authoring Practices
 
 Alert: The guidance for combobox is changing significantly in WAI-ARIA 1.2 due to problems with implementation of the WAI-ARIA 1.1 pattern. The recommended combobox pattern for WAI-ARIA 1.2 is:
 
-```
- <label for="tag_combo">Tag</label>
-  <input type="text" id="tag_combo"
+<CodeSnippet type="multi" light={true}> &lt;label for="tag_combo"&gt;Tag&lt;/label&gt;
+  &lt;input type="text" id="tag_combo"
       role="combobox" aria-autocomplete="list"
       aria-haspopup="listbox" aria-expanded="true"
-      aria-controls="popup_listbox" aria-activedescendant="selected_option">
-<ul role="listbox" id="popup_listbox">
-   <li role="option">Zebra</li>
-   <li role="option" id="selected_option">Zoom</li>
-</ul>
-```
+      aria-controls="popup_listbox" aria-activedescendant="selected_option"&gt;
+&lt;ul role="listbox" id="popup_listbox"&gt;
+   &lt;li role="option"&gt;Zebra&lt;/li&gt;
+   &lt;li role="option" id="selected_option"&gt;Zoom&lt;/li&gt;
+&lt;/ul&gt;</CodeSnippet>
 
 Note, example code includes material copied from or derived from [W3C, Accessible Rich Internet Applications (WAI-ARIA) 1.2 W3C Working Draft 18 December 2019](https://www.w3.org/TR/wai-aria-1.2/#combobox). Copyright © [2013-2019] W3C® (MIT, ERCIM, Keio, Beihang).
 

diff --git a/accessibility-checker-engine/help/HAAC_Combobox_Autocomplete.mdx b/accessibility-checker-engine/help/HAAC_Combobox_Autocomplete.mdx
@@ -2,7 +2,7 @@
 title: "Accessibility Checker Rule Help: HAAC_Combobox_Autocomplete"
 ---
 import "../../../styles/ToolHelp.scss"
-import { Tag } from "carbon-components-react";
+import { CodeSnippet, Tag } from "carbon-components-react";
 
 <div className="toolHelp">
 <Row>
@@ -37,17 +37,15 @@ A combobox that supports autocompletion behavior must have the `aria-autocomplet
 
 For example: 
 
-```
- <label for="tag_combo">Tag</label>
-  <input type="text" id="tag_combo"
+<CodeSnippet type="multi" light={true}> &lt;label for="tag_combo"&gt;Tag&lt;/label&gt;
+  &lt;input type="text" id="tag_combo"
       role="combobox" aria-autocomplete="list"
       aria-haspopup="listbox" aria-expanded="true"
-      aria-controls="popup_listbox" aria-activedescendant="selected_option">
-<ul role="listbox" id="popup_listbox">
-   <li role="option">Zebra</li>
-   <li role="option" id="selected_option">Zoom</li>
-</ul>
-```
+      aria-controls="popup_listbox" aria-activedescendant="selected_option"&gt;
+&lt;ul role="listbox" id="popup_listbox"&gt;
+   &lt;li role="option"&gt;Zebra&lt;/li&gt;
+   &lt;li role="option" id="selected_option"&gt;Zoom&lt;/li&gt;
+&lt;/ul&gt;</CodeSnippet>
 
 Note, example code includes material copied from or derived from [W3C, ARIA 1.1 Authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html). Copyright © [2013-2017] W3C® (MIT, ERCIM, Keio, Beihang).
 

diff --git a/accessibility-checker-engine/help/HAAC_Combobox_Autocomplete_Invalid.mdx b/accessibility-checker-engine/help/HAAC_Combobox_Autocomplete_Invalid.mdx
@@ -2,7 +2,7 @@
 title: "Accessibility Checker Rule Help: HAAC_Combobox_Autocomplete_Invalid"
 ---
 import "../../../styles/ToolHelp.scss"
-import { Tag } from "carbon-components-react";
+import { CodeSnippet, Tag } from "carbon-components-react";
 
 <div className="toolHelp">
 <Row>
@@ -37,17 +37,15 @@ The `aria-autocomplete` attribute value for a combobox text input element must n
 
 For example:
 
-```
- <label for="tag_combo">Tag</label>
-  <input type="text" id="tag_combo"
+<CodeSnippet type="multi" light={true}> &lt;label for="tag_combo"&gt;Tag&lt;/label&gt;
+  &lt;input type="text" id="tag_combo"
       role="combobox" aria-autocomplete="list"
       aria-haspopup="listbox" aria-expanded="true"
-      aria-controls="popup_listbox" aria-activedescendant="selected_option">
-<ul role="listbox" id="popup_listbox">
-   <li role="option">Zebra</li>
-   <li role="option" id="selected_option">Zoom</li>
-</ul>
-```
+      aria-controls="popup_listbox" aria-activedescendant="selected_option"&gt;
+&lt;ul role="listbox" id="popup_listbox"&gt;
+   &lt;li role="option"&gt;Zebra&lt;/li&gt;
+   &lt;li role="option" id="selected_option"&gt;Zoom&lt;/li&gt;
+&lt;/ul&gt;</CodeSnippet>
 
 Note, example code includes material copied from or derived from [W3C, ARIA 1.1 Authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html). Copyright © [2013-2017] W3C® (MIT, ERCIM, Keio, Beihang).
 

diff --git a/accessibility-checker-engine/help/HAAC_Combobox_DOM_Focus.mdx b/accessibility-checker-engine/help/HAAC_Combobox_DOM_Focus.mdx
@@ -2,7 +2,7 @@
 title: "Accessibility Checker Rule Help: HAAC_Combobox_DOM_Focus"
 ---
 import "../../../styles/ToolHelp.scss"
-import { Tag } from "carbon-components-react";
+import { CodeSnippet, Tag } from "carbon-components-react";
 
 <div className="toolHelp">
 <Row>

diff --git a/accessibility-checker-engine/help/HAAC_Combobox_Expanded.mdx b/accessibility-checker-engine/help/HAAC_Combobox_Expanded.mdx
@@ -2,7 +2,7 @@
 title: "Accessibility Checker Rule Help: HAAC_Combobox_Expanded"
 ---
 import "../../../styles/ToolHelp.scss"
-import { Tag } from "carbon-components-react";
+import { CodeSnippet, Tag } from "carbon-components-react";
 
 <div className="toolHelp">
 <Row>
@@ -38,17 +38,15 @@ The `aria-owns` or the `aria-controls` attribute of the expanded combobox must r
 
 Alert: The guidance for combobox is changing significantly in WAI-ARIA 1.2 due to problems with implementation of the WAI-ARIA 1.1 pattern. The recommended combobox pattern for WAI-ARIA 1.2 is:
 
-```
- <label for="tag_combo">Tag</label>
-  <input type="text" id="tag_combo"
+<CodeSnippet type="multi" light={true}> &lt;label for="tag_combo"&gt;Tag&lt;/label&gt;
+  &lt;input type="text" id="tag_combo"
       role="combobox" aria-autocomplete="list"
       aria-haspopup="listbox" aria-expanded="true"
-      aria-controls="popup_listbox" aria-activedescendant="selected_option">
-  <ul role="listbox" id="popup_listbox">
-   <li role="option">Zebra</li>
-   <li role="option" id="selected_option">Zoom</li>
-  </ul>
-```
+      aria-controls="popup_listbox" aria-activedescendant="selected_option"&gt;
+  &lt;ul role="listbox" id="popup_listbox"&gt;
+   &lt;li role="option"&gt;Zebra&lt;/li&gt;
+   &lt;li role="option" id="selected_option"&gt;Zoom&lt;/li&gt;
+  &lt;/ul&gt;</CodeSnippet>
 
 Note, example code includes material copied from or derived from [W3C, Accessible Rich Internet Applications (WAI-ARIA) 1.2 W3C Working Draft 18 December 2019](https://www.w3.org/TR/wai-aria-1.2/#combobox). Copyright © [2013-2019] W3C® (MIT, ERCIM, Keio, Beihang).