gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(client): Improve client validation accessibility (#37459)

Browse Source
This commit is contained in:
Kishore Devaraj 2019-11-06 14:13:58 +00:00 committed by mrugesh
parent 699ffc5593
commit 06277c8436
1 changed files with 26 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
client/src/components/settings/Internet.js
View File

@ -1,5 +1,7 @@
import React, { Fragment, Component } from 'react'; import React, { Fragment, Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCheck } from '@fortawesome/free-solid-svg-icons';
import { import {
HelpBlock, HelpBlock,
FormControl, FormControl,
@ -139,6 +141,18 @@ class InternetSettings extends Component {
return null; return null;
}; };
renderHelpBlock = validationMessage =>
validationMessage ? <HelpBlock>{validationMessage}</HelpBlock> : null;
renderCheck = (url, validation) =>
url && validation === 'success' ? (
<FormControl.Feedback>
<span>
<FontAwesomeIcon icon={faCheck} size='1x' />
</span>
</FormControl.Feedback>
) : null;
render() { render() {
const { const {
formValues: { githubProfile, linkedin, twitter, website } formValues: { githubProfile, linkedin, twitter, website }
@ -176,12 +190,12 @@ class InternetSettings extends Component {
<ControlLabel>GitHub</ControlLabel> <ControlLabel>GitHub</ControlLabel>
<FormControl <FormControl
onChange={this.createHandleChange('githubProfile')} onChange={this.createHandleChange('githubProfile')}
placeholder='https://github.com/user-name'
type='url' type='url'
value={githubProfile} value={githubProfile}
/> />
{githubProfileValidationMessage ? ( {this.renderCheck(githubProfile, githubProfileValidation)}
<HelpBlock>{githubProfileValidationMessage}</HelpBlock> {this.renderHelpBlock(githubProfileValidationMessage)}
) : null}
</FormGroup> </FormGroup>
<FormGroup <FormGroup
controlId='internet-linkedin' controlId='internet-linkedin'
@ -190,12 +204,12 @@ class InternetSettings extends Component {
<ControlLabel>LinkedIn</ControlLabel> <ControlLabel>LinkedIn</ControlLabel>
<FormControl <FormControl
onChange={this.createHandleChange('linkedin')} onChange={this.createHandleChange('linkedin')}
placeholder='https://www.linkedin.com/in/user-name'
type='url' type='url'
value={linkedin} value={linkedin}
/> />
{linkedinValidationMessage ? ( {this.renderCheck(linkedin, linkedinValidation)}
<HelpBlock>{linkedinValidationMessage}</HelpBlock> {this.renderHelpBlock(linkedinValidationMessage)}
) : null}
</FormGroup> </FormGroup>
<FormGroup <FormGroup
controlId='internet-picture' controlId='internet-picture'
@ -204,12 +218,12 @@ class InternetSettings extends Component {
<ControlLabel>Twitter</ControlLabel> <ControlLabel>Twitter</ControlLabel>
<FormControl <FormControl
onChange={this.createHandleChange('twitter')} onChange={this.createHandleChange('twitter')}
placeholder='https://twitter.com/user-name'
type='url' type='url'
value={twitter} value={twitter}
/> />
{twitterValidationMessage ? ( {this.renderCheck(twitter, twitterValidation)}
<HelpBlock>{twitterValidationMessage}</HelpBlock> {this.renderHelpBlock(twitterValidationMessage)}
) : null}
</FormGroup> </FormGroup>
<FormGroup <FormGroup
controlId='internet-website' controlId='internet-website'
@ -218,12 +232,12 @@ class InternetSettings extends Component {
<ControlLabel>Personal Website</ControlLabel> <ControlLabel>Personal Website</ControlLabel>
<FormControl <FormControl
onChange={this.createHandleChange('website')} onChange={this.createHandleChange('website')}
placeholder='https://example.com'
type='url' type='url'
value={website} value={website}
/> />
{websiteValidationMessage ? ( {this.renderCheck(website, websiteValidation)}
<HelpBlock>{websiteValidationMessage}</HelpBlock> {this.renderHelpBlock(websiteValidationMessage)}
) : null}
</FormGroup> </FormGroup>
<BlockSaveButton <BlockSaveButton
disabled={this.isFormPristine() || !this.isFormValid()} disabled={this.isFormPristine() || !this.isFormValid()}