Merge pull request #409 from IBMa/April27Archive

Add April archive

rule-server/src/static/archives.json

@@ -4,11 +4,16 @@
         "name": "Latest Deployment",
         "path": "/archives/latest"
     },
+    {
+        "id": "27April2021",
+        "name": "27 April 2021 Deployment",
+        "path": "/archives/2021.04.27",
+        "latest": true
+    },
     {
         "id": "10Feb2021",
         "name": "10 February 2021 Deployment",
-        "path": "/archives/2021.02.10",
-        "latest": true
+        "path": "/archives/2021.02.10"
     },
     {
         "id": "07Oct2020",

rule-server/src/static/archives/2021.04.27/doc/HAAC_Accesskey_NeedLabel.mdx

@@ -0,0 +1,52 @@
+---
+title: "Accessibility Checker Rule Help: HAAC_Accesskey_NeedLabel"
+---
+import "../../../styles/ToolHelp.scss"
+import { CodeSnippet, Tag } from "carbon-components-react";
+
+<div className="toolHelp">
+<Row>
+<Column colLg={16} colMd={8} colSm={4} className="toolHead">
+
+### The HTML element with an assigned `accesskey` attribute does not have an associated label
+
+<div id="locLevel"></div>
+
+An HTML element with an assigned `accesskey` attribute must have an associated label
+
+</Column>
+</Row>
+<Row>
+<Column colLg={11} colMd={5} colSm={4} className="toolMain">
+
+### Why is this important?
+
+The label of an HTML element with an `accesskey` attribute allows the user agent to display a list of access keys with a name describing each access key’s function. It also allows voice control users to speak the label to activate its function.
+
+<div id="locSnippet"></div>
+
+### What to do
+
+ * Provide a label using a `title` attribute (e.g. `<a title="Activities" accesskey="A" href="/Consortium/activities">Activities</a>`);
+ * OR, use `<label for="">` or `aria-labelledby` to designate visible text as the label;
+ * OR, use an input embedded in a `<label>` (e.g. `<label><input type="checkbox" accesskey="A"/>foo</label>`);
+ * OR, if the element does not have a visible label, provide a label using the `aria-label` attribute (e.g. `aria-label="Activities"`).
+
+</Column>
+<Column colLg={5} colMd={3} colSm={4} className="toolLeft">
+
+### About this requirement
+
+[IBM 3.3.2 Labels and Instructions](https://www.ibm.com/able/requirements/requirements/#3_3_2)
+
+### Who does this affect?
+
+ * Blind people using screen readers
+ * People who physically cannot use a pointing device
+ * People with dexterity impairment using voice control
+
+</Column>
+</Row>
+</div>
+
+export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)

rule-server/src/static/archives/2021.04.27/doc/HAAC_ActiveDescendantCheck.mdx

@@ -0,0 +1,64 @@
+---
+title: "Accessibility Checker Rule Help: HAAC_ActiveDescendantCheck"
+---
+import "../../../styles/ToolHelp.scss"
+import { CodeSnippet, Tag } from "carbon-components-react";
+
+<div className="toolHelp">
+<Row>
+<Column colLg={16} colMd={8} colSm={4} className="toolHead">
+
+### The `aria-activedescendant` property of the component does not reference the `id` of a valid child element.
+
+<div id="locLevel"></div>
+
+The `aria-activedescendant` property must reference the `id` of a non-empty, non-hidden active child element.
+
+</Column>
+</Row>
+<Row>
+<Column colLg={11} colMd={5} colSm={4} className="toolMain">
+
+### Why is this important?
+
+In a composite component where the child elements are not normally able to take keyboard focus, the `aria-activedescendant` attribute can be used to identify the child element that currently has focus. This enables proper keyboard control of the component, and allows assistive technologies to gather information about the component and its state.
+
+<div id="locSnippet"></div>
+
+### What to do
+
+* Verify that the `aria-activedescendant` attribute value is the `id` of the currently active child element;
+* AND, verify that the child element is not hidden;
+* AND, verify that the child element is either a descendant of this element, or is owned by this element (indicated by using the aria-owns attribute on this element).
+
+The following example* shows a radio group using `aria-activedescendant` to indicate the active radio button, which is coded as a DOM descendant:
+
+<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).
+
+</Column>
+<Column colLg={5} colMd={3} colSm={4} className="toolLeft">
+
+### About this requirement
+
+[IBM 4.1.2 Name, Role, Value](https://www.ibm.com/able/requirements/requirements/#4_1_2)
+[WAI-ARIA v1.2: Managing Focus in Composites Using aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.2/#kbd_focus_activedescendant)
+
+### Who does this affect?
+
+* Blind people using screen readers
+* People with low vision using screen readers
+
+</Column>
+</Row>
+</div>
+
+export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)

rule-server/src/static/archives/2021.04.27/doc/HAAC_Application_Role_Text.mdx

@@ -0,0 +1,53 @@
+---
+title: "Accessibility Checker Rule Help: HAAC_Application_Role_Text"
+---
+import "../../../styles/ToolHelp.scss"
+import { CodeSnippet, Tag } from "carbon-components-react";
+
+<div className="toolHelp">
+<Row>
+<Column colLg={16} colMd={8} colSm={4} className="toolHead">
+
+### Verify that non-decorative static text or image content within the element with role of `"application"` is accessible
+
+<div id="locLevel"></div>
+
+Non-decorative static text and image content within an element with role of `"application"` must be accessible
+
+</Column>
+</Row>
+<Row>
+<Column colLg={11} colMd={5} colSm={4} className="toolMain">
+
+### Why is this important?
+
+Within an element with the role `"application"`, only focusable elements are accessible to users of some assistive technologies by default. Therefore, to ensure access to any non-decorative static text or image content that does not receive focus by default, it must be implemented in an accessible way.
+
+<div id="locSnippet"></div>
+
+### What to do
+
+* Verify that the content is decorative;
+* OR, associate the content with a focusable element using the `aria-labelledby` or `aria-describedby` attribute;
+* OR, place the content in a focusable element that has role `"document"` or `"article"`;
+* OR, manage the focus of descendants as described in [Managing Focus](https://www.w3.org/TR/wai-aria-1.2/#managingfocus) by updating the value of `aria-activedescendant` to reference the element containing the focused content.
+
+</Column>
+<Column colLg={5} colMd={3} colSm={4} className="toolLeft">
+
+### About this requirement
+
+[IBM 4.1.2 Name, Role, Value](https://www.ibm.com/able/requirements/requirements/#4_1_2)
+[WAI ARIA 1.2: Application Role](https://www.w3.org/TR/wai-aria-1.2/#application)
+
+### Who does this affect?
+
+* Blind people using screen readers
+* People with low vision who have trouble finding or tracking a pointer indicator on the screen
+* People who physically cannot use a pointing device
+
+</Column>
+</Row>
+</div>
+
+export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)

rule-server/src/static/archives/2021.04.27/doc/HAAC_Aria_ErrorMessage.mdx

@@ -0,0 +1,63 @@
+---
+title: "Accessibility Checker Rule Help: HAAC_Aria_ErrorMessage"
+---
+import "../../../styles/ToolHelp.scss"
+import { CodeSnippet, Tag } from "carbon-components-react";
+
+<div className="toolHelp">
+<Row>
+<Column colLg={16} colMd={8} colSm={4} className="toolHead">
+
+### Custom error message has invalid reference `id`
+
+<div id="locLevel"></div>
+
+A custom error message must reference a valid `id` and when triggered the message must be appropriately exposed
+
+</Column>
+</Row>
+<Row>
+<Column colLg={11} colMd={5} colSm={4} className="toolMain">
+
+### Why is this important?
+
+When a user input is detected as invalid, users expect to be informed about the error. Using a custom error message and making the content of the error message available and exposed programmatically makes the error message accessible through audio or other channels.
+
+<div id="locSnippet"></div>
+
+### What to do
+* If the `aria-errormessage` attribute does not reference a valid `id`, update the value to reference a valid `id`;
+* OR, if the `aria-errormessage` attribute references a valid `id`, verify the content is in a container that is not hidden when the message is triggered.
+
+Example:
+
+<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)
+
+</Column>
+<Column colLg={5} colMd={3} colSm={4} className="toolLeft">
+
+### About this requirement
+
+[IBM 3.3.1 Error Identification](https://www.ibm.com/able/requirements/requirements/#3_3_3)
+[WCAG 2.1 technique G85](https://www.w3.org/WAI/WCAG21/Techniques/general/G84)
+
+### Who does this affect?
+
+* Blind people using screen readers
+
+</Column>
+</Row>
+</div>
+
+export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)

rule-server/src/static/archives/2021.04.27/doc/HAAC_Aria_ImgAlt.mdx

@@ -0,0 +1,57 @@
+---
+title: "Accessibility Checker Rule Help: HAAC_Aria_ImgAlt"
+---
+import "../../../styles/ToolHelp.scss"
+import { CodeSnippet, Tag } from "carbon-components-react";
+
+<div className="toolHelp">
+<Row>
+<Column colLg={16} colMd={8} colSm={4} className="toolHead">
+
+### WAI-ARIA widget with an `"img"` role has no label or an empty label
+
+<div id="locLevel"></div>
+
+Element with an `"img"` role must have a non-empty label
+
+</Column>
+</Row>
+<Row>
+<Column colLg={11} colMd={5} colSm={4} className="toolMain">
+
+### Why is this important?
+
+A component with an `"img"` role can contain important information as well as multiple image files. When viewed together, these elements give the impression of a single image. Providing a text alternative makes the same information accessible through audio or other channels.
+
+<div id="locSnippet"></div>
+
+### What to do
+
+* Add an `aria-labelledby` attribute to the element with a `role="img"`. It must point to visible text on the page that is meaningful as a label;
+* OR, add an `aria-label` attribute to the element with a `role="img"`;
+* OR, only if the design cannot have a visible label, use the `title` attribute to provide a label
+
+Example:
+
+<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>
+<Column colLg={5} colMd={3} colSm={4} className="toolLeft">
+
+### About this requirement
+
+[IBM 4.1.2 Name, Role, Value](https://www.ibm.com/able/requirements/requirements/#4_1_2)
+[WCAG 2.1 technique ARIA16](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA16)
+[WCAG 2.1 technique ARIA6](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA6)
+
+### Who does this affect?
+
+* Blind people using screen readers
+* People who turn off image-loading on their web browsers
+* People using text-based browsers (e.g., Lynx) or audio interfaces
+
+</Column>
+</Row>
+</div>
+
+export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)

rule-server/src/static/archives/2021.04.27/doc/HAAC_Aria_Native_Host_Sematics.mdx

@@ -0,0 +1,50 @@
+---
+title: "Accessibility Checker Rule Help: HAAC_Aria_Native_Host_Sematics"
+---
+import "../../../styles/ToolHelp.scss"
+import { CodeSnippet, Tag } from "carbon-components-react";
+
+<div className="toolHelp">
+<Row>
+<Column colLg={16} colMd={8} colSm={4} className="toolHead">
+
+### The WAI-ARIA role or attribute `{0}` is not valid for the element `<{1}>` 
+
+<div id="locLevel"></div>
+
+WAI-ARIA roles and attributes must be valid for the element they are assigned to
+
+</Column>
+</Row>
+<Row>
+<Column colLg={11} colMd={5} colSm={4} className="toolMain">
+
+### Why is this important?
+
+Some HTML elements or attributes have native semantics that map, by default, to implied WAI-ARIA semantics. For predictable interaction and behavior of UI controls, these implicit semantics should only be overridden as defined in the [W3C ARIA in HTML Document conformance requirements for use of ARIA attributes in HTML](https://www.w3.org/TR/html-aria/#docconformance) specification.
+
+<div id="locSnippet"></div>
+
+### What to do
+
+* If a native HTML element fits the intended behavior, use that instead of adding ARIA markup;
+* OR, update the role and/or attributes on the element using the guidance in the [Document conformance requirements for use of "ARIA" attributes in HTML](https://www.w3.org/TR/html-aria/#docconformance) section of the W3C ARIA in HTML specification. This reference provides details of valid ARIA markup on native HTML elements.
+
+</Column>
+<Column colLg={5} colMd={3} colSm={4} className="toolLeft">
+
+### About this requirement
+
+[IBM 4.1.2 Name, Role, Value](https://www.ibm.com/able/requirements/requirements/#4_1_2)
+[W3C ARIA in HTML Document conformance requirements for use of ARIA attributes in HTML](https://www.w3.org/TR/html-aria/#docconformance)
+
+### Who does this affect?
+
+* Blind people using screen readers
+* People with low vision using screen readers
+
+</Column>
+</Row>
+</div>
+
+export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)