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

EDSC-3073: Fix 508 compliance 'form control has no name' #1396

Closed
wants to merge 12 commits into from
Closed

EDSC-3073: Fix 508 compliance 'form control has no name' #1396

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
e10469d
Merge pull request #1 from nasa/master
Chauncy-S Apr 30, 2021
f2fa312
Merge pull request #2 from nasa/master
Chauncy-S May 5, 2021
989d7ee
Update body.html
Chauncy-S May 6, 2021
296dfa0
Merge branch 'nasa:master' into master
Chauncy-S May 10, 2021
a06e6a3
Merge branch 'nasa:master' into master
Chauncy-S May 13, 2021
7743d72
Merge branch 'nasa:master' into master
Chauncy-S May 14, 2021
9591a5c
Merge branch 'nasa:master' into master
Chauncy-S May 17, 2021
f877681
EDSC-3073: Fixed the height of the Legend element
Chauncy-S May 18, 2021
21b2402
EDSC-3073: Added Label element to fix form control for DownloadHistor…
Chauncy-S May 18, 2021
ce0a64e
EDSC-3073: Added Label element to fix form control for SavedProjects.…
Chauncy-S May 18, 2021
8873a02
EDSC-3073: Added Label element to fix form control for SubscriptionsL…
Chauncy-S May 18, 2021
f2af2a7
EDSC-3073: Added newline to the end of DownloadHistory.scss, Preferen…
Chauncy-S May 18, 2021
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
4 changes: 1 addition & 3 deletions static/src/js/components/ContactInfo/ContactInfo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,7 @@ class ContactInfo extends Component {

return (
<fieldset className="contact-info-form">
<legend>
<h3>View Contact Information</h3>
</legend>
<legend className="contact-info-form__legend"><h3>View Contact Information</h3></legend>
<ul className="contact-info-form__list">
<li className="contact-info-form__item">
<span className="contact-info-form__label">First Name</span>
Expand Down
4 changes: 4 additions & 0 deletions static/src/js/components/ContactInfo/ContactInfo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,8 @@
min-width: 200px;
font-weight: bold;
}

&__legend {
height: 0px;
}
}
3 changes: 2 additions & 1 deletion static/src/js/components/DownloadHistory/DownloadHistory.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,10 +78,11 @@ export class DownloadHistory extends Component {
/>
)
}
<label htmlFor="download-status-history" className="visually-hide-label">Download history</label>
{
retrievalHistoryLoaded && (
retrievalHistory.length > 0 ? (
<Table className="download-history-table">
<Table className="download-history-table" id="download-status-history">
<thead>
<tr>
<th className="download-history-table__contents-heading">Contents</th>
Expand Down
13 changes: 13 additions & 0 deletions static/src/js/components/DownloadHistory/DownloadHistory.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,3 +50,16 @@
}

}

// Provided from https://www.w3.org/WAI/tutorials/forms/labels/#note-on-hiding-elements
//- it is a common approach used to hide information visually but keep them available to screen readers
.visually-hide-label {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
2 changes: 2 additions & 0 deletions static/src/js/components/Preferences/PreferencesForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,9 @@ const PreferencesForm = (props) => {

return (
<div className="preferences-form">
<label htmlFor="preferences-form-label" className="visually-hide-label">Preferences Title</label>
<Form
id="preferences-form-label"
fields={fields}
formData={formData}
liveValidate
Expand Down
13 changes: 13 additions & 0 deletions static/src/js/components/Preferences/PreferencesForm.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,16 @@ ul.error-detail {
list-style: none;
padding-left: 0rem;
}

// Provided from https://www.w3.org/WAI/tutorials/forms/labels/#note-on-hiding-elements
//- it is a common approach used to hide information visually but keep them available to screen readers
.visually-hide-label {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
3 changes: 2 additions & 1 deletion static/src/js/components/SavedProjects/SavedProjects.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,10 +83,11 @@ export class SavedProjects extends Component {
/>
)
}
<label htmlFor="saved-projects-label" className="visually-hide-label">Saved Projects</label>
{
savedProjectsIsLoaded && (
savedProjects.length > 0 ? (
<Table className="saved-projects-table">
<Table className="saved-projects-table" id="saved-projects-label">
<thead>
<tr>
<th className="saved-projects-table__project-name-heading">Project Name</th>
Expand Down
12 changes: 12 additions & 0 deletions static/src/js/components/SavedProjects/SavedProjects.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,3 +56,15 @@
}
}

// Provided from https://www.w3.org/WAI/tutorials/forms/labels/#note-on-hiding-elements
//- it is a common approach used to hide information visually but keep them available to screen readers
.visually-hide-label {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
4 changes: 2 additions & 2 deletions static/src/js/components/SubscriptionsList/SubscriptionsList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,11 +57,11 @@ export const SubscriptionsList = ({
/>
)
}

<label htmlFor="subscriptions-label" className="visually-hide-label">Subscriptions</label>
{
isLoaded && (
subscriptionsMetadata.length > 0 ? (
<Table className="subscriptions-list__table" responsive>
<Table className="subscriptions-list__table" id="subscriptions-label" responsive>
<thead>
<tr>
<th className="subscriptions-list-table__name-heading">Name</th>
Expand Down
13 changes: 13 additions & 0 deletions static/src/js/components/SubscriptionsList/SubscriptionsList.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,3 +109,16 @@
white-space: nowrap;
}
}

// Provided from https://www.w3.org/WAI/tutorials/forms/labels/#note-on-hiding-elements
//- it is a common approach used to hide information visually but keep them available to screen readers
.visually-hide-label {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}