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

Jump to bottom

screenreader now capable of reading checkbox group #12559

Merged
merged 5 commits into from
Nov 4, 2019
Merged

screenreader now capable of reading checkbox group #12559

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
69b61d0
screenreader now capable of reading checkbox group
ajspotts Nov 1, 2019
aad5556
disabled prettier to pass eslint failures
ajspotts Nov 1, 2019
704c67e
fieldset inline style relocated to dispatch.scss
ajspotts Nov 4, 2019
a980100
Merge branch 'master' into 12123-Dispatch-Special-Issues-checkboxes
ajspotts Nov 4, 2019
ada6341
Merge branch 'master' into 12123-Dispatch-Special-Issues-checkboxes
Nov 4, 2019
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
162 changes: 89 additions & 73 deletions client/app/containers/EstablishClaimPage/EstablishClaimDecision.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export class EstablishClaimDecision extends React.Component {
this.setState({
endProductButtonText: `Route claim for Decision ${tabNumber + 1}`
});
}
};

hasMultipleDecisions() {
return this.props.task.appeal.decisions.length > 1;
Expand All @@ -61,8 +61,11 @@ export class EstablishClaimDecision extends React.Component {
{
header: 'VACOLS Issue(s)',
valueFunction: (issue, index) => {
return issue.description.map((descriptor) =>
<div key={`${descriptor}-${index}`}>{descriptor}</div>, null
return issue.description.map(
(descriptor) => (
<div key={`${descriptor}-${index}`}>{descriptor}</div>
),
null
);
}
},
Expand All @@ -81,15 +84,18 @@ export class EstablishClaimDecision extends React.Component {
format(dateFormatString);

// Sort in reverse chronological order
let decisions = task.appeal.decisions.sort((decision1, decision2) =>
new Date(decision2.received_at) - new Date(decision1.received_at));
let decisions = task.appeal.decisions.sort(
(decision1, decision2) =>
new Date(decision2.received_at) - new Date(decision1.received_at)
);

let tabs = decisions.map((decision, index) => {
let tab = {};

tab.disable = false;

tab.label = `Decision ${(index + 1)} ` +
tab.label =
`Decision ${index + 1} ` +
`(${moment(decision.received_at).format(dateFormatString)})`;

/* This link is here for 508 compliance, and shouldn't be visible to sighted
Expand All @@ -99,83 +105,88 @@ export class EstablishClaimDecision extends React.Component {
affecting its placement in tab order, thus making it invisible onscreen
but read out by screen readers. */

tab.page = <div>
<a
className="usa-sr-only"
id="sr-download-link"
href={`${pdfLink}&decision_number=${index}`}
download
target="_blank"
rel="noopener noreferrer"
>
The PDF viewer in your browser may not be accessible. Click to download
the Decision PDF so you can preview it in a reader with accessibility features
such as Adobe Acrobat.
</a>
<a className="usa-sr-only" href="#establish-claim-buttons">
If you are using a screen reader and have downloaded and verified the Decision
PDF, click this link to skip past the browser PDF viewer to the
establish-claim buttons.
</a>
tab.page = (
<div>
<LoadingContainer color={LOGO_COLORS.DISPATCH.ACCENT}>
<iframe
aria-label="The PDF embedded here is not accessible. Please use the above
<a
className="usa-sr-only"
id="sr-download-link"
href={`${pdfLink}&decision_number=${index}`}
download
target="_blank"
rel="noopener noreferrer"
>
The PDF viewer in your browser may not be accessible. Click to
download the Decision PDF so you can preview it in a reader with
accessibility features such as Adobe Acrobat.
</a>
<a className="usa-sr-only" href="#establish-claim-buttons">
If you are using a screen reader and have downloaded and verified
the Decision PDF, click this link to skip past the browser PDF
viewer to the establish-claim buttons.
</a>
<div>
<LoadingContainer color={LOGO_COLORS.DISPATCH.ACCENT}>
<iframe
aria-label="The PDF embedded here is not accessible. Please use the above
link to download the PDF and view it in a PDF reader. Then use the
buttons below to go back and make edits or upload and certify
the document."
className="cf-iframe-with-loading"
title="Form8 PDF"
src={`${pdfjsLink}&decision_number=${index}`}>
</iframe>
</LoadingContainer>
className="cf-iframe-with-loading"
title="Form8 PDF"
src={`${pdfjsLink}&decision_number=${index}`}
/>
</LoadingContainer>
</div>
</div>
</div>;
);

return tab;
});

return (
<div>
<div id="review-decision-heading" className="cf-app-segment cf-app-segment--alt">
<div
id="review-decision-heading"
className="cf-app-segment cf-app-segment--alt"
>
<h1>Review Decision</h1>
Review the final decision from VBMS below to determine the next step.
{this.hasMultipleDecisions() && <Alert
title="Multiple Decision Documents"
type="warning">
We found more than one decision document for the dispatch date
range {decisionDateStart} - {decisionDateEnd}.
Please review the decisions in the tabs below and select the document
that best fits the decision criteria for this case.
</Alert>}
{this.hasMultipleDecisions() && (
<Alert title="Multiple Decision Documents" type="warning">
We found more than one decision document for the dispatch date
range {decisionDateStart} - {decisionDateEnd}. Please review the
decisions in the tabs below and select the document that best fits
the decision criteria for this case.
</Alert>
)}
</div>
{this.hasMultipleDecisions() &&
{this.hasMultipleDecisions() && (
<div className="cf-app-segment cf-app-segment--alt">
<h3>VACOLS Decision Criteria</h3>
<Table
columns={issueColumns}
rowObjects={task.appeal.issues}
summary="VACOLS decision criteria issues"
/>
</div>}
{

/* This link is here for 508 compliance, and shouldn't be visible to sighted
</div>
)}
{/* This link is here for 508 compliance, and shouldn't be visible to sighted
users. We need to allow non-sighted users to preview the Decision. Adobe Acrobat
is the accessibility standard and is used across gov't, so we'll recommend it
for now. The usa-sr-only class will place an element off screen without
affecting its placement in tab order, thus making it invisible onscreen
but read out by screen readers. */
}
but read out by screen readers. */}
<div className="cf-app-segment cf-app-segment--alt">
{this.hasMultipleDecisions() && <div>
<h2>Select a Decision Document</h2>
<p>Use the tabs to review the decision documents below and
select the decision that best fits the VACOLS Decision Criteria.</p>
<TabWindow
tabs={tabs}
onChange={this.onTabSelected} />
</div>}
{this.hasMultipleDecisions() && (
<div>
<h2>Select a Decision Document</h2>
<p>
Use the tabs to review the decision documents below and select
the decision that best fits the VACOLS Decision Criteria.
</p>
<TabWindow tabs={tabs} onChange={this.onTabSelected} />
</div>
)}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is everything above this line just formatting? Was having a hard time seeing any other differences.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, had to re-formate after initial commit to undo changes from Prettier extension hence all the changes. Sorry for the confusion!

{!this.hasMultipleDecisions() && tabs.length > 0 && tabs[0].page}

<div className="usa-width-one-half">
Expand All @@ -187,22 +198,27 @@ export class EstablishClaimDecision extends React.Component {
/>
</div>

<label><b>Select Special Issue(s)</b></label>
<div className="cf-multiple-columns">
{
SPECIAL_ISSUES.map((issue, index) => {

return <Checkbox
id={issue.specialIssue}
label={issue.node || issue.display}
name={issue.specialIssue}
onChange={handleSpecialIssueFieldChange(issue.specialIssue)}
key={index}
value={specialIssues[issue.specialIssue]}
/>;
})
}
</div>
<fieldset className="fieldset">
<legend>
<label>
<b>Select Special Issues</b>
</label>
</legend>
<div className="cf-multiple-columns">
{SPECIAL_ISSUES.map((issue, index) => {
return (
<Checkbox
id={issue.specialIssue}
label={issue.node || issue.display}
name={issue.specialIssue}
onChange={handleSpecialIssueFieldChange(issue.specialIssue)}
key={index}
value={specialIssues[issue.specialIssue]}
/>
);
})}
</div>
</fieldset>
</div>
<div className="cf-app-segment" id="establish-claim-buttons">
<div className="cf-push-right">
Expand Down
4 changes: 4 additions & 0 deletions client/app/styles/dispatch/_dispatch.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,3 +91,7 @@
.cf-secondary-disabled {
opacity: .25;
}

.fieldset {
width: 100%;
}