diff --git a/elm.json b/elm.json index 08fb1fa8..501ff8d4 100644 --- a/elm.json +++ b/elm.json @@ -3,7 +3,7 @@ "name": "NoRedInk/noredink-ui", "summary": "UI Widgets we use at NRI", "license": "BSD-3-Clause", - "version": "7.0.0", + "version": "7.1.0", "exposed-modules": [ "Nri.Ui.Alert.V2", "Nri.Ui.Alert.V3", @@ -104,4 +104,4 @@ "test-dependencies": { "elm-explorations/test": "1.2.0 <= v < 2.0.0" } -} +} \ No newline at end of file diff --git a/test b/test new file mode 100644 index 00000000..75ccfa26 --- /dev/null +++ b/test @@ -0,0 +1,606 @@ +script/run-axe.sh > tests/axe-report.json +script/format-axe-report.sh tests/axe-report.json +Tested http://localhost:8000/ with axe-core 3.3.0 at 2019-08-20T19:57:04.786Z + +Agent information: + + userAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/77.0.3844.0 Safari/537.36 + windowWidth: 800 + windowHeight: 600 + orientationAngle: 0 + orientationType: portrait-primary + +Summary: 34 passes | 98 violations | 8 incomplete | 36 inapplicable + +Violations: + + aria-allowed-attr: critical violation with 2 instances. + + Elements must only use allowed ARIA attributes (https://dequeuniversity.com/rules/axe/3.3/aria-allowed-attr?application=axeAPI) + + at #First\ tab: + + Fix any of the following: + ARIA attribute is not allowed: aria-selected="true" + + at #Second\ tab: + + Fix any of the following: + ARIA attribute is not allowed: aria-selected="false" + + aria-valid-attr-value: critical violation with 7 instances. + + ARIA attributes must conform to valid values (https://dequeuniversity.com/rules/axe/3.3/aria-valid-attr-value?application=axeAPI) + + at #premium-checkbox-Identify\ Adjectives\ 2\ \(Premium\)-container > ._79e9d02.checkbox-V5__Unchecked.checkbox-V5__Label: + + Fix all of the following: + Invalid ARIA attribute value: aria-controls="premium-checkbox-Identify Adjectives 2 (Premium)" + + at #premium-checkbox-Identify\ Adjectives\ 2\ \(Free\)-container > ._79e9d02.checkbox-V5__Unchecked.checkbox-V5__Label: + + Fix all of the following: + Invalid ARIA attribute value: aria-controls="premium-checkbox-Identify Adjectives 2 (Free)" + + at #premium-checkbox-Revising\ Wordy\ Phrases\ 2\ \(Premium\,\ Disabled\)-container > ._8e10dc9c.checkbox-V5__Unchecked.checkbox-V5__Label: + + Fix all of the following: + Invalid ARIA attribute value: aria-controls="premium-checkbox-Revising Wordy Phrases 2 (Premium, Disabled)" + + at #Nri-Ui-SegmentedControl-Tab-Option-B: + + Fix all of the following: + Invalid ARIA attribute value: aria-controls="Nri-Ui-SegmentedControl-Panel-Option-B" + + at #Nri-Ui-SegmentedControl-Tab-Option-C: + + Fix all of the following: + Invalid ARIA attribute value: aria-controls="Nri-Ui-SegmentedControl-Panel-Option-C" + + at #First\ tab: + + Fix all of the following: + Invalid ARIA attribute value: aria-controls="tab-body-First tab" + + at #tab-body-First\ tab: + + Fix all of the following: + Invalid ARIA attribute value: aria-labelledby="First tab" + + color-contrast: serious violation with 16 instances. + + Elements must have sufficient color contrast (https://dequeuniversity.com/rules/axe/3.3/color-contrast?application=axeAPI) + + at a[href$="\#category\/Messaging"]: + + Fix any of the following: + Element has insufficient color contrast of 3.88 (foreground color: #146aff, background color: #ebebeb, font size: 12.0pt, font weight: normal). Expected contrast ratio of 4.5:1 + + at a[href$="\#category\/Animations"]: + + Fix any of the following: + Element has insufficient color contrast of 3.88 (foreground color: #146aff, background color: #ebebeb, font size: 12.0pt, font weight: normal). Expected contrast ratio of 4.5:1 + + at a[href$="\#category\/Buttons"]: + + Fix any of the following: + Element has insufficient color contrast of 3.88 (foreground color: #146aff, background color: #ebebeb, font size: 12.0pt, font weight: normal). Expected contrast ratio of 4.5:1 + + at a[href$="\#category\/Colors"]: + + Fix any of the following: + Element has insufficient color contrast of 3.88 (foreground color: #146aff, background color: #ebebeb, font size: 12.0pt, font weight: normal). Expected contrast ratio of 4.5:1 + + at a[href$="\#category\/Pages"]: + + Fix any of the following: + Element has insufficient color contrast of 3.88 (foreground color: #146aff, background color: #ebebeb, font size: 12.0pt, font weight: normal). Expected contrast ratio of 4.5:1 + + at a[href$="\#category\/Icons"]: + + Fix any of the following: + Element has insufficient color contrast of 3.88 (foreground color: #146aff, background color: #ebebeb, font size: 12.0pt, font weight: normal). Expected contrast ratio of 4.5:1 + + at a[href$="\#category\/Inputs"]: + + Fix any of the following: + Element has insufficient color contrast of 3.88 (foreground color: #146aff, background color: #ebebeb, font size: 12.0pt, font weight: normal). Expected contrast ratio of 4.5:1 + + at a[href$="\#category\/Modals"]: + + Fix any of the following: + Element has insufficient color contrast of 3.88 (foreground color: #146aff, background color: #ebebeb, font size: 12.0pt, font weight: normal). Expected contrast ratio of 4.5:1 + + at a[href$="\#category\/Tables"]: + + Fix any of the following: + Element has insufficient color contrast of 3.88 (foreground color: #146aff, background color: #ebebeb, font size: 12.0pt, font weight: normal). Expected contrast ratio of 4.5:1 + + at a[href$="\#category\/Text"]: + + Fix any of the following: + Element has insufficient color contrast of 3.88 (foreground color: #146aff, background color: #ebebeb, font size: 12.0pt, font weight: normal). Expected contrast ratio of 4.5:1 + + at ._e7f19e85:nth-child(12) > a[href$="\#category\/Widgets"]: + + Fix any of the following: + Element has insufficient color contrast of 3.88 (foreground color: #146aff, background color: #ebebeb, font size: 12.0pt, font weight: normal). Expected contrast ratio of 4.5:1 + + at ._47ae50c > p: + + Fix any of the following: + Element has insufficient color contrast of 3.81 (foreground color: #f3336c, background color: #ffffff, font size: 9.8pt, font weight: normal). Expected contrast ratio of 4.5:1 + + at ._47ae50c > p > strong: + + Fix any of the following: + Element has insufficient color contrast of 3.81 (foreground color: #f3336c, background color: #ffffff, font size: 9.8pt, font weight: bold). Expected contrast ratio of 4.5:1 + + at ._5a54416e > ._2d7e3c06[data-nri-description="button-label-span"]: + + Fix any of the following: + Element has insufficient color contrast of 3.81 (foreground color: #ffffff, background color: #f3336c, font size: 11.3pt, font weight: bold). Expected contrast ratio of 4.5:1 + + at ._9485cbb5 > ._2d7e3c06[data-nri-description="button-label-span"]: + + Fix any of the following: + Element has insufficient color contrast of 3.81 (foreground color: #ffffff, background color: #f3336c, font size: 12.8pt, font weight: bold). Expected contrast ratio of 4.5:1 + + at ._d2d80624: + + Fix any of the following: + Element has insufficient color contrast of 3.81 (foreground color: #f3336c, background color: #ffffff, font size: 12.0pt, font weight: normal). Expected contrast ratio of 4.5:1 + + duplicate-id-aria: critical violation with 2 instances. + + IDs used in ARIA and labels must be unique (https://dequeuniversity.com/rules/axe/3.3/duplicate-id-aria?application=axeAPI) + + at ._b3e1bdd7:nth-child(2) > input[value="fake"][type="checkbox"]: + + Fix any of the following: + Document has multiple elements referenced with ARIA with the same id attribute: fake + + at ._3c5c7879:nth-child(1) > ._815bb940[placeholder="For\ example\,\ \"Something\!\!\""][type="text"]: + + Fix any of the following: + Document has multiple elements referenced with ARIA with the same id attribute: Nri-Ui-TextInput-Criterion + + duplicate-id: minor violation with 34 instances. + + id attribute value must be unique (https://dequeuniversity.com/rules/axe/3.3/duplicate-id?application=axeAPI) + + at ._89b38333 > svg[version="\31 \.1"][x="\30 px"][y="\30 px"]: + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at ._89b38333 > svg[version="\31 \.1"][x="\30 px"][y="\30 px"] > g: + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at ._89b38333 > svg[version="\31 \.1"][x="\30 px"][y="\30 px"] > g > g: + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at ._89b38333 > svg[version="\31 \.1"][x="\30 px"][y="\30 px"] > g > g > g: + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at ._89b38333 > svg[version="\31 \.1"][x="\30 px"][y="\30 px"] > g > g > g > g[transform="translate\(0\.859754\,\ 0\.051946\)"]: + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at ._89b38333 > svg[version="\31 \.1"][x="\30 px"][y="\30 px"] > g > g > g > g[transform="translate\(0\.859754\,\ 0\.051946\)"] > g[transform="translate\(0\.461538\,\ 0\.000000\)"]: + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at ._89b38333 > svg[version="\31 \.1"][x="\30 px"][y="\30 px"] > g > g > g > g[transform="translate\(0\.859754\,\ 0\.051946\)"] > g[transform="translate\(0\.461538\,\ 0\.000000\)"] > .blub-st0:nth-child(1): + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at ._89b38333 > svg[version="\31 \.1"][x="\30 px"][y="\30 px"] > g > g > g > g[transform="translate\(0\.859754\,\ 0\.051946\)"] > g[transform="translate\(0\.461538\,\ 0\.000000\)"] > .blub-st0:nth-child(2): + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at ._89b38333 > svg[version="\31 \.1"][x="\30 px"][y="\30 px"] > g > g > g > g[transform="translate\(0\.859754\,\ 0\.051946\)"] > g[transform="translate\(0\.461538\,\ 0\.000000\)"] > .blub-st0:nth-child(3): + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at ._89b38333 > svg[version="\31 \.1"][x="\30 px"][y="\30 px"] > g > g > g > g[transform="translate\(0\.859754\,\ 0\.051946\)"] > g[transform="translate\(0\.461538\,\ 0\.000000\)"] > .blub-st0:nth-child(4): + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at ._89b38333 > svg[version="\31 \.1"][x="\30 px"][y="\30 px"] > g > g > g > g[transform="translate\(0\.859754\,\ 0\.051946\)"] > g[transform="translate\(0\.461538\,\ 0\.000000\)"] > .blub-st0:nth-child(5): + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at ._89b38333 > svg[version="\31 \.1"][x="\30 px"][y="\30 px"] > g > g > g > g[transform="translate\(0\.859754\,\ 0\.051946\)"] > g[transform="translate\(0\.461538\,\ 0\.000000\)"] > .blub-st0:nth-child(6): + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at ._89b38333 > svg[version="\31 \.1"][x="\30 px"][y="\30 px"] > g > g > g > g[transform="translate\(0\.859754\,\ 0\.051946\)"] > g[transform="translate\(0\.461538\,\ 0\.000000\)"] > .blub-st0:nth-child(7): + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at ._89b38333 > svg[version="\31 \.1"][x="\30 px"][y="\30 px"] > g > g > g > g[transform="translate\(0\.859754\,\ 0\.051946\)"] > g[transform="translate\(0\.461538\,\ 0\.000000\)"] > .blub-st0:nth-child(8): + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at ._89b38333 > svg[version="\31 \.1"][x="\30 px"][y="\30 px"] > g > g > g > g[transform="translate\(0\.859754\,\ 0\.051946\)"] > g[transform="translate\(0\.461538\,\ 0\.000000\)"] > .blub-st0:nth-child(9): + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at ._89b38333 > svg[version="\31 \.1"][x="\30 px"][y="\30 px"] > g > g > g > g[transform="translate\(0\.859754\,\ 0\.051946\)"] > g[transform="translate\(0\.461538\,\ 0\.000000\)"] > .blub-st0:nth-child(10): + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at ._89b38333 > svg[version="\31 \.1"][x="\30 px"][y="\30 px"] > g > g > g > g[transform="translate\(0\.859754\,\ 0\.051946\)"] > g[transform="translate\(0\.461538\,\ 0\.000000\)"] > .blub-st0:nth-child(11): + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at ._89b38333 > svg[version="\31 \.1"][x="\30 px"][y="\30 px"] > g > g > g > g[transform="translate\(0\.859754\,\ 0\.051946\)"] > g[transform="translate\(0\.461538\,\ 0\.000000\)"] > .blub-st0:nth-child(12): + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at ._a158cf8f > svg[viewBox="\30 \ 0\ 21\.7\ 17\.1"][x="\30 px"][y="\30 px"] > path[fill="currentcolor"]: + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at #styleguide-checkbox-interactable-container > ._79e9d02.checkbox-V5__Unchecked.checkbox-V5__Label > ._da521288 > svg[width="\32 7px"][height="\32 7px"][viewBox="\30 \ 0\ 27\ 27"] > defs > rect[x="\30 "][y="\30 "][width="\32 7"]: + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at #styleguide-checkbox-interactable-container > ._79e9d02.checkbox-V5__Unchecked.checkbox-V5__Label > ._da521288 > svg[width="\32 7px"][height="\32 7px"][viewBox="\30 \ 0\ 27\ 27"] > defs > filter: + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at #styleguide-checkbox-interactable-container > ._79e9d02.checkbox-V5__Unchecked.checkbox-V5__Label > ._da521288 > svg[width="\32 7px"][height="\32 7px"][viewBox="\30 \ 0\ 27\ 27"] > g[stroke="none"][stroke-width="\31 "][fill="none"]: + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at #styleguide-checkbox-interactable-container > ._79e9d02.checkbox-V5__Unchecked.checkbox-V5__Label > ._da521288 > svg[width="\32 7px"][height="\32 7px"][viewBox="\30 \ 0\ 27\ 27"] > g[stroke="none"][stroke-width="\31 "][fill="none"] > g: + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at #styleguide-checkbox-indeterminate-container > .checkbox-V5__Indeterminate._8e10dc9c.checkbox-V5__Label > ._db090d21 > svg[width="\32 7px"][height="\32 7px"][viewBox="\30 \ 0\ 27\ 27"] > g[stroke="none"][stroke-width="\31 "][fill="none"] > g: + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at #styleguide-checkbox-indeterminate-container > .checkbox-V5__Indeterminate._8e10dc9c.checkbox-V5__Label > ._db090d21 > svg[width="\32 7px"][height="\32 7px"][viewBox="\30 \ 0\ 27\ 27"] > g[stroke="none"][stroke-width="\31 "][fill="none"] > g > g: + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at #styleguide-checkbox-indeterminate-container > .checkbox-V5__Indeterminate._8e10dc9c.checkbox-V5__Label > ._db090d21 > svg[width="\32 7px"][height="\32 7px"][viewBox="\30 \ 0\ 27\ 27"] > g[stroke="none"][stroke-width="\31 "][fill="none"] > g > path[fill="\#146AFF"]: + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at #styleguide-locked-on-inside-checkbox-container > ._8e10dc9c.checkbox-V5__Unchecked.checkbox-V5__Label > ._db090d21 > svg[width="\32 7px"][height="\32 7px"][viewBox="\30 \ 0\ 27\ 27"] > g[stroke="none"][stroke-width="\31 "][fill="none"] > g: + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at #styleguide-locked-on-inside-checkbox-container > ._8e10dc9c.checkbox-V5__Unchecked.checkbox-V5__Label > ._db090d21 > svg[width="\32 7px"][height="\32 7px"][viewBox="\30 \ 0\ 27\ 27"] > g[stroke="none"][stroke-width="\31 "][fill="none"] > g > g[transform="translate\(4\.050000\,\ 4\.050000\)"]: + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at #styleguide-locked-on-inside-checkbox-container > ._8e10dc9c.checkbox-V5__Unchecked.checkbox-V5__Label > ._db090d21 > svg[width="\32 7px"][height="\32 7px"][viewBox="\30 \ 0\ 27\ 27"] > g[stroke="none"][stroke-width="\31 "][fill="none"] > g > g[transform="translate\(4\.050000\,\ 4\.050000\)"] > g[transform="translate\(3\.040000\,\ 0\.271429\)"]: + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at #styleguide-locked-on-inside-checkbox-container > ._8e10dc9c.checkbox-V5__Unchecked.checkbox-V5__Label > ._db090d21 > svg[width="\32 7px"][height="\32 7px"][viewBox="\30 \ 0\ 27\ 27"] > g[stroke="none"][stroke-width="\31 "][fill="none"] > g > g[transform="translate\(4\.050000\,\ 4\.050000\)"] > g[transform="translate\(3\.040000\,\ 0\.271429\)"] > path[fill="\#E68900"]: + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at #styleguide-locked-on-inside-checkbox-container > ._8e10dc9c.checkbox-V5__Unchecked.checkbox-V5__Label > ._db090d21 > svg[width="\32 7px"][height="\32 7px"][viewBox="\30 \ 0\ 27\ 27"] > g[stroke="none"][stroke-width="\31 "][fill="none"] > g > g[transform="translate\(4\.050000\,\ 4\.050000\)"] > g[transform="translate\(3\.040000\,\ 0\.271429\)"] > rect[fill="\#FFFFFF"][x="\30 \.922857143"][y="\31 0\.1514286"]: + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at ._99119484 > ._b3e1bdd7:nth-child(2): + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at ._439ca2dd:nth-child(1) > svg[width="\32 5"][height="\31 9"][viewBox="\30 \ 0\ 25\ 19"] > g > g[transform="translate\(0\.000000\,\ -3\.000000\)"]: + + Fix any of the following: + Document has multiple static elements with the same id attribute + + at ._439ca2dd:nth-child(1) > svg[width="\32 5"][height="\31 9"][viewBox="\30 \ 0\ 25\ 19"] > g > g[transform="translate\(0\.000000\,\ -3\.000000\)"] > g[transform="translate\(0\.000000\,\ 3\.750000\)"] > .premium-flag-st1: + + Fix any of the following: + Document has multiple static elements with the same id attribute + + form-field-multiple-labels: moderate violation with 3 instances. + + Form field must not have multiple label elements (https://dequeuniversity.com/rules/axe/3.3/form-field-multiple-labels?application=axeAPI) + + at ._3c5c7879:nth-child(1) > ._815bb940[placeholder="For\ example\,\ \"Something\!\!\""][type="text"]: + + Fix all of the following: + Multiple label elements is not widely supported in assistive technologies + + at ._3c5c7879:nth-child(9) > ._815bb940[placeholder="For\ example\,\ \"Something\!\!\""][type="text"]: + + Fix all of the following: + Multiple label elements is not widely supported in assistive technologies + + at input[placeholder="Everything\ you\ type\ is\ wrong\!"]: + + Fix all of the following: + Multiple label elements is not widely supported in assistive technologies + + heading-order: moderate violation with 6 instances. + + Heading levels should only increase by one (https://dequeuniversity.com/rules/axe/3.3/heading-order?application=axeAPI) + + at .module-example__Nri-Ui-Alert-V4 > ._f5bea88b > h4:nth-child(1): + + Fix any of the following: + Heading order invalid + + at ._927f3e74:nth-child(2): + + Fix any of the following: + Heading order invalid + + at .module-example__Nri-Ui-Page-V3 > ._f5bea88b > ._927f3e74:nth-child(4): + + Fix any of the following: + Heading order invalid + + at ._927f3e74:nth-child(6): + + Fix any of the following: + Heading order invalid + + at ._f5bea88b > ._927f3e74:nth-child(1): + + Fix any of the following: + Heading order invalid + + at .module-example__Nri-Ui-SortableTable-V1 > ._f5bea88b > h4:nth-child(1): + + Fix any of the following: + Heading order invalid + + html-has-lang: serious violation with 1 instances. + + element must have a lang attribute (https://dequeuniversity.com/rules/axe/3.3/html-has-lang?application=axeAPI) + + at html: + + Fix any of the following: + The element does not have a lang attribute + + label: critical violation with 12 instances. + + Form elements must have labels (https://dequeuniversity.com/rules/axe/3.3/label?application=axeAPI) + + at .module-example__Nri-Ui-Button-V9 > ._f5bea88b > div > div:nth-child(1) > table > tr:nth-child(2) > td:nth-child(4) > input: + + Fix any of the following: + aria-label attribute does not exist or is empty + aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty + Form element does not have an implicit (wrapped)