Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: add corrected text for color contrast tests #3399

Merged
merged 4 commits into from
Sep 25, 2020
Merged

fix: add corrected text for color contrast tests #3399

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8b40277
fix typo and update snapshot
shanisebarona Sep 23, 2020
aa3aae9
add corrected text and update snapshot
shanisebarona Sep 23, 2020
8ab2974
add corrected text
shanisebarona Sep 24, 2020
e59b411
update styling to be consistent
shanisebarona Sep 25, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions src/assessments/adaptable-content/test-steps/contrast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,15 @@ const contrastHowToTest: JSX.Element = (
<TestAutomaticallyPassedNotice />
<ol>
<li>
Examine each instance in the target page to identify an area where the text and
background are most likely to have a low contrast ratio (e.g., white text on a light
gray background).
Examine each instance in the target page to determine whether it is text. (Because
icons are assessed in
<Markup.Term> Contrast {'>'} Graphics </Markup.Term>, they can be marked as{' '}
<Markup.Term> Pass </Markup.Term> in this test.)
</li>
<li>
Examine each text instance to identify an area where the text and background are
most likely to have a low contrast ratio (e.g., white text on a light gray
background).
</li>
<li>
Use <WindowsContrastCheckerAppLink /> to test the contrast at that area. (If you are
Expand Down
14 changes: 8 additions & 6 deletions src/common/components/cards/how-to-check-text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { NewTabLink } from 'common/components/new-tab-link';
import { NamedFC } from 'common/react/named-fc';
import * as React from 'react';
import * as styles from './how-to-check-text.scss';
import * as Markup from '../../../assessments/markup';

export interface HowToCheckTextProps {
id: string;
Expand All @@ -31,13 +32,14 @@ export const HowToCheckText = NamedFC<HowToCheckTextProps>('HowToCheckText', pro
}
case 'color-contrast': {
checkText = (
<div classname={styles.combinationLists}>
<div className={styles.combinationLists}>
<ul className={styles.multiLineTextYesBullet}>
<li list-style-type="disc">
If the text is intended to be invisible, it passes.
If the instance is an icon or other non-text content, ignore it. This
rule applies only to text.
</li>
<li list-style-type="disc">
If the text is intended to be visible, use{' '}
If the instance is text, use{' '}
<NewTabLink href="https://go.microsoft.com/fwlink/?linkid=2075365">
Accessibility Insights for Windows
</NewTabLink>{' '}
Expand All @@ -53,9 +55,9 @@ export const HowToCheckText = NamedFC<HowToCheckTextProps>('HowToCheckText', pro
<ul className={styles.multiLineTextNoBullet}>
<li>
For detailed test instructions, see{' '}
<b>
Assessment {'>'} Text legibility {'>'} Contrast
</b>
<Markup.Term>
Assessment {'>'} Adaptable content {'>'} Contrast
</Markup.Term>
.
</li>
</ul>
Expand Down
12 changes: 6 additions & 6 deletions src/tests/unit/tests/common/components/cards/__snapshots__/how-to-check-text.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,20 +25,20 @@ exports[`HowToCheckWebText renders with id=bogus-name 1`] = `null`;

exports[`HowToCheckWebText renders with id=color-contrast 1`] = `
<div
classname="combinationLists"
className="combinationLists"
>
<ul
className="multiLineTextYesBullet"
>
<li
list-style-type="disc"
>
If the text is intended to be invisible, it passes.
If the instance is an icon or other non-text content, ignore it. This rule applies only to text.
</li>
<li
list-style-type="disc"
>
If the text is intended to be visible, use
If the instance is text, use

<NewTabLink
href="https://go.microsoft.com/fwlink/?linkid=2075365"
Expand All @@ -63,13 +63,13 @@ exports[`HowToCheckWebText renders with id=color-contrast 1`] = `
<li>
For detailed test instructions, see

<b>
<Term>
Assessment
&gt;
Text legibility
Adaptable content
&gt;
Contrast
</b>
</Term>
.
</li>
</ul>
Expand Down