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

va-process-list: accessibility updates (staging review) #924

Merged
merged 4 commits into from
Oct 27, 2023
Merged

va-process-list: accessibility updates (staging review) #924

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
02301df
va-process-list: add sr-only text for statuses, choose darker color f…
powellkerry Oct 25, 2023
7b2aa71
4.46.2
powellkerry Oct 26, 2023
022217a
Fix issue with checkmark not showing in FF and Safari
powellkerry Oct 27, 2023
4f6be0e
4.46.3
powellkerry Oct 27, 2023
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
6 changes: 3 additions & 3 deletions packages/storybook/stories/va-process-list-uswds.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,14 +70,14 @@ const Template = ({uswds}) => {
const StatusTemplate = ({uswds}) => {
return (
<va-process-list uswds={uswds}>
<va-process-list-item checked header='Checkmark Icon'>
<p>Add the prop <code>checked</code> to the list icon a checkmark.</p>
<va-process-list-item checkmark header='Checkmark Icon'>
<p>Add the prop <code>checkmark</code> to make the list icon a checkmark.</p>
</va-process-list-item>
<va-process-list-item active header='Active Icon'>
<p>Add the prop <code>active</code> to make the list icon and header blue.</p>
</va-process-list-item>
<va-process-list-item pending header='Pending Icon'>
<p>Add the prop <code>pending</code> list item and icon grayed out.</p>
<p>Add the prop <code>pending</code> to make the list item and icon grayed out.</p>
</va-process-list-item>
<va-process-list-item header='Default Icon' />
</va-process-list>
Expand Down
36 changes: 36 additions & 0 deletions packages/web-components/src/components/va-process-list/test/va-process-list-item.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,5 +65,41 @@ describe('va-process-list-item', () => {

await axeCheck(page);
});
it('includes sr-only span for checkmark status', async () => {
const page = await newE2EPage();
await page.setContent(`
<ol>
<va-process-list-item header="Heading" checkmark>
<p>Some content</p>
</va-process-list>
</ol>
`);
const element = await page.find('va-process-list-item .sr-only');
expect(element.innerText).toEqual('Completed:');
})
it('includes sr-only span for pending status', async () => {
const page = await newE2EPage();
await page.setContent(`
<ol>
<va-process-list-item header="Heading" pending>
<p>Some content</p>
</va-process-list>
</ol>
`);
const element = await page.find('va-process-list-item .sr-only');
expect(element.innerText).toEqual('Pending:');
})
it('includes sr-only span for active status', async () => {
const page = await newE2EPage();
await page.setContent(`
<ol>
<va-process-list-item header="Heading" active>
<p>Some content</p>
</va-process-list>
</ol>
`);
const element = await page.find('va-process-list-item .sr-only');
expect(element.innerText).toEqual('Current Step:');
})
})

2 changes: 1 addition & 1 deletion packages/web-components/src/components/va-process-list/va-process-list-item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
display: list-item;
}
va-process-list-item[pending='true'] .usa-process-list__heading {
color: var(--color-gray-light);
color: var(--color-gray-medium);
}
va-process-list-item[active='true'] .usa-process-list__heading {
color: var(--color-primary);
Expand Down
7 changes: 6 additions & 1 deletion packages/web-components/src/components/va-process-list/va-process-list-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,17 @@ export class VaProcessListItem {
@Prop() checkmark?: boolean = false;

render() {
const {header, level} = this;
const {header, level, checkmark, active, pending} = this;
// eslint-disable-next-line i18next/no-literal-string
const HeaderTag = `h${level}`;

return (
<Host role="listitem" class='usa-process-list__item'>
{
checkmark || active || pending ?
<span class='sr-only'>{checkmark ? 'Completed:' : active ? 'Current Step:' : pending ? 'Pending:' : null}</span>
: null
}
{header ? <HeaderTag class='usa-process-list__heading'>{header}</HeaderTag> : null}
<slot/>
</Host>
Expand Down
10 changes: 5 additions & 5 deletions packages/web-components/src/components/va-process-list/va-process-list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@
counter-reset: usa-numbered-list;
}

::slotted(va-process-list-item[checked='true']):before {
::slotted(va-process-list-item[checkmark='true']):before {
color: var(--color-green) !important;
border-color: var(--color-green) !important;
content: url(../../assets/green-check.svg) !important;
content: url(../../assets/green-check.svg) / "Completed" !important;
}

::slotted(va-process-list-item[active='true']):before {
Expand All @@ -21,12 +21,12 @@
}

::slotted(va-process-list-item[pending='true']):before {
color: var(--color-gray-light) !important;
border-color: var(--color-gray-light) !important;
color: var(--color-gray-medium) !important;
border-color: var(--color-gray-medium) !important;
}

::slotted(va-process-list-item[pending='true']) {
color: var(--color-gray-light) !important;
color: var(--color-gray-medium) !important;
}

::slotted(va-process-list-item) {
Expand Down
Loading