Details
-
Story
-
Resolution: Done
-
Minor
-
None
-
None
-
None
-
ShibUI - MVP2 - Sprint 2, SHIB UI - Sprint 3
Description
Closed a prior ticket (SHIBUI-12) as this ticket contains more detail.
Tested in QA-11 Build (1.0.1-SNAPSHOT-01ad718)
Description
aXe A11y testing tool revealed "Elements must have sufficient color contrast"
Steps
- Log into UI
- Click to 'Add new provider
- Use aXe Tool on all pages in create and edit flow
aXe Error
Reference page: (https://dequeuniversity.com/rules/axe/2.6/color-contrast?application=AxeChrome
Issue description: Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds
Impact: serious
Example Page: Add a new metadata provider (similar sections on other pages need fixing as well)
| Element location | Element Source | Related node |
|---|---|---|
| div > span.display-6 | <span _ngcontent-c5="" class="display-6"> | section > div:nth-child(1) |
| .display-6 > span.pull-right | <span _ngcontent-c5="" class="pull-right"> (<!---->Step 2 of 10) </span> | section > div:nth-child(1) |
| button > span.label.pull-left | <span class="label pull-left"> | html > body > app-root > provider-page > wizard-page > .container-fluid.p-3 > section > div:nth-child(2) > wizard-nav > nav > ul > li:nth-child(2) > button |
| .label.pull-left > i18n-text | <i18n-text ng-reflect-key="metadata-ui"> | html > body > app-root > provider-page > wizard-page > .container-fluid.p-3 > section > div:nth-child(2) > wizard-nav > nav > ul > li:nth-child(2) > button |
| button > span.direction.pull-right | <span class="direction pull-right"> <i class="fa fa-arrow-circle-right d-block fa-2x"></i> <!---->Next </span> | html > body > app-root > provider-page > wizard-page > .container-fluid.p-3 > section > div:nth-child(2) > wizard-nav > nav > ul > li:nth-child(2) > button |
| html > body > app-root > provider-page > wizard-page > .container-fluid.p-3 > section > div:nth-child(2) > .py-4 > org-info-form > form > .row > fieldset:nth-child(2) > p > button | <button aria-label="Add logout contact to accordion group" class="btn btn-success btn-sm">Add Contact</button> | html > body > app-root > provider-page > wizard-page > .container-fluid.p-3 > section > div:nth-child(2) > .py-4 > org-info-form > form > .row > fieldset:nth-child(2) > p > button |
| #name | <input class="form-control ng-untouched ng-pristine ng-valid" formcontrolname="name" id="name" placeholder="" type="text" ng-reflect-name="name" maxlength="255" style="background-image: url("data:image/png;base64,iVB[shortened]YII="); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;"> | #name |
Example Page: User Interface/MDUI INfo (similar sections on other pages need fixing as well)
| Element location | Element Source | Related node |
|---|---|---|
| items listed above | see above chart | look up there^ |
| html > body > app-root > provider-page > wizard-page > .container-fluid.p-3 > section > div:nth-child(2) > .py-4 > metadata-ui-form > form > .row.ng-pristine > fieldset:nth-child(1) > div:nth-child(3) > small.form-text.text-muted | <small class="form-text text-muted"> <!----> 0 / 255 </small> | section > div:nth-child(2) |
| html > body > app-root > provider-page > wizard-page > .container-fluid.p-3 > section > div:nth-child(2) > .py-4 > metadata-ui-form > form > .row.ng-pristine > fieldset:nth-child(2) > .row > div:nth-child(1) > .form-group > small.form-text.text-muted | <small class="form-text text-muted">Must be an integer equal to or greater than 0</small> | section > div:nth-child(2) |
| <small class="form-text text-muted">Must be an integer equal to or greater than 0</small> | section > div:nth-child(2) | |
| html > body > app-root > provider-page > wizard-page > .container-fluid.p-3 > section > div:nth-child(2) > .py-4 > metadata-ui-form > form > .row.ng-pristine > fieldset:nth-child(2) > .row > div:nth-child(2) > .form-group > small.form-text.text-muted | <small class="form-text text-muted">Must be an integer equal to or greater than 0</small> | section > div:nth-child(2) |
NOTE: on the Relying Party Overrides page, after the user checks a box, the text changes colors to green. This also fails the color contrast test. See screenshot.
