Skip to content

Commit

Permalink
Merge pull request #6 from cidilabs/chuck/UDOIT3-297-accessibility
Browse files Browse the repository at this point in the history 
Accessibility issues addressed
  • Loading branch information
@atarisafari
atarisafari authored Jun 11, 2021
2 parents 60b5b7d + 38e42e7 commit 94051ef
Show file tree
Hide file tree
Showing 11 changed files with 2,403 additions and 3,863 deletions.
60 changes: 31 additions & 29 deletions assets/js/Components/Admin/AdminHeader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,37 +16,39 @@ class AdminHeader extends React.Component {

render() {
return (
<AppNav
screenReaderLabel={this.props.t('menu.udoit')}
margin="small 0"
renderBeforeItems={
<View padding="0 medium 0 0">
<img className={`${Classes.logo}`} src={Logo}></img>
<View display="inline-block" padding="x-small">
<Text size="large" letterSpacing="expanded">{this.props.t('label.admin.logo')}</Text>
<header role="banner">
<AppNav
screenReaderLabel={this.props.t('menu.udoit')}
margin="small 0"
renderBeforeItems={
<View padding="0 medium 0 0" margin="0" as="h1">
<img className={`${Classes.logo}`} alt="UDOIT logo" src={Logo}></img>
<View display="inline-block" padding="x-small">
<Text size="large" letterSpacing="expanded">{this.props.t('label.admin.logo')}</Text>
</View>
</View>
</View>
}
visibleItemsCount={3}
>
<AppNav.Item
renderLabel={this.props.t('label.admin.courses')}
isSelected={('courses' === this.props.navigation)}
onClick={() => this.props.handleNavigation('courses')} />
<AppNav.Item
renderLabel={this.props.t('label.admin.reports')}
isSelected={('reports' === this.props.navigation)}
onClick={() => this.props.handleNavigation('reports')} />
<AppNav.Item
renderLabel={this.props.t('label.admin.users')}
isSelected={('users' === this.props.navigation)}
onClick={() => this.props.handleNavigation('users')} />
{/* <AppNav.Item
renderLabel={this.props.t('label.admin.settings')}
isSelected={('settings' === this.props.navigation)}
onClick={() => this.props.handleNavigation('settings')} /> */}
}
visibleItemsCount={3}
>
<AppNav.Item
renderLabel={this.props.t('label.admin.courses')}
isSelected={('courses' === this.props.navigation)}
onClick={() => this.props.handleNavigation('courses')} />
<AppNav.Item
renderLabel={this.props.t('label.admin.reports')}
isSelected={('reports' === this.props.navigation)}
onClick={() => this.props.handleNavigation('reports')} />
<AppNav.Item
renderLabel={this.props.t('label.admin.users')}
isSelected={('users' === this.props.navigation)}
onClick={() => this.props.handleNavigation('users')} />
{/* <AppNav.Item
renderLabel={this.props.t('label.admin.settings')}
isSelected={('settings' === this.props.navigation)}
onClick={() => this.props.handleNavigation('settings')} /> */}

</AppNav>
</AppNav>
</header>
)
}
}
Expand Down
89 changes: 46 additions & 43 deletions assets/js/Components/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,49 +61,52 @@ class App extends React.Component {

<MessageTray messages={this.messages} t={this.t} clearMessages={this.clearMessages} hasNewReport={this.state.syncComplete} />

{('welcome' === this.state.navigation) &&
<WelcomePage
handleNavigation={this.handleNavigation}
t={this.t}
settings={this.settings}
hasNewReport={this.state.hasNewReport} />
}
{('summary' === this.state.navigation) &&
<SummaryPage
report={this.state.report}
settings={this.settings}
handleAppFilters={this.handleAppFilters}
handleNavigation={this.handleNavigation}
t={this.t} />
}
{('content' === this.state.navigation) &&
<ContentPage
report={this.state.report}
settings={this.settings}
appFilters={this.appFilters}
handleAppFilters={this.handleAppFilters}
handleNavigation={this.handleNavigation}
handleIssueSave={this.handleIssueSave}
handleIssueUpdate={this.handleIssueUpdate}
disableReview={this.disableReview()}
t={this.t} />
}
{('files' === this.state.navigation) &&
<FilesPage
report={this.state.report}
settings={this.settings}
handleNavigation={this.handleNavigation}
handleFileSave={this.handleFileSave}
t={this.t} />
}
{('reports' === this.state.navigation) &&
<ReportsPage
t={this.t}
settings={this.settings}
report={this.state.report}
handleNavigation={this.handleNavigation}
/>
}
<main role="main">
{('welcome' === this.state.navigation) &&
<WelcomePage
handleNavigation={this.handleNavigation}
t={this.t}
settings={this.settings}
hasNewReport={this.state.hasNewReport} />
}
{('summary' === this.state.navigation) &&
<SummaryPage
report={this.state.report}
settings={this.settings}
handleAppFilters={this.handleAppFilters}
handleNavigation={this.handleNavigation}
t={this.t} />
}
{('content' === this.state.navigation) &&
<ContentPage
report={this.state.report}
settings={this.settings}
appFilters={this.appFilters}
handleAppFilters={this.handleAppFilters}
handleNavigation={this.handleNavigation}
handleIssueSave={this.handleIssueSave}
handleIssueUpdate={this.handleIssueUpdate}
disableReview={this.disableReview()}
t={this.t} />
}
{('files' === this.state.navigation) &&
<FilesPage
report={this.state.report}
settings={this.settings}
handleNavigation={this.handleNavigation}
handleFileSave={this.handleFileSave}
t={this.t} />
}
{('reports' === this.state.navigation) &&
<ReportsPage
t={this.t}
settings={this.settings}
report={this.state.report}
handleNavigation={this.handleNavigation}
/>
}
</main>

{('about' === this.state.modal) &&
<AboutModal t={this.t}
settings={this.settings}
Expand Down
1 change: 1 addition & 0 deletions assets/js/Components/ContentPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,6 +239,7 @@ class ContentPage extends React.Component {
disabled={!this.props.disableReview}
>
{this.props.t('label.review')}
<ScreenReaderContent>{this.props.t(`rule.label.${issue.scanRuleId}`)}</ScreenReaderContent>
</Button>
),
onClick: () => this.handleReviewClick(issue),
Expand Down
4 changes: 2 additions & 2 deletions assets/js/Components/FilesPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,12 +139,12 @@ class FilesPage extends React.Component {
let status
if (file.reviewed) {
status = <>
<ScreenReaderContent>{this.props.t('table.suggestion')}</ScreenReaderContent>
<ScreenReaderContent>{this.props.t('label.file.reviewed')}</ScreenReaderContent>
<IconCheckLine color="success" />
</>
} else {
status = <>
<ScreenReaderContent>{this.props.t('table.error')}</ScreenReaderContent>
<ScreenReaderContent>{this.props.t('label.file.needs_review')}</ScreenReaderContent>
<IconEyeLine color="alert" />
</>
}
Expand Down
105 changes: 66 additions & 39 deletions assets/js/Components/Forms/ContrastForm.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import React from 'react'
import { Alert } from '@instructure/ui-alerts'
import { Button } from '@instructure/ui-buttons'
import { Spinner } from '@instructure/ui-spinner'
import { Flex } from '@instructure/ui-flex'
import { View } from '@instructure/ui-view'
import { Text } from '@instructure/ui-text'
import { TextInput } from '@instructure/ui-text-input'
import { Checkbox } from '@instructure/ui-checkbox'
import { IconButton } from '@instructure/ui-buttons'
Expand All @@ -18,6 +21,8 @@ export default class ContrastForm extends React.Component {
textColor: this.getTextColor(),
useBold: this.isBold(),
useItalics: this.isItalicized(),
contrastRatio: null,
contrastIsValid: false,
textInputErrors: []
}

Expand Down Expand Up @@ -129,21 +134,30 @@ export default class ContrastForm extends React.Component {
render() {
const pending = (this.props.activeIssue && (this.props.activeIssue.pending == '1'))
const buttonLabel = (pending) ? 'form.processing' : 'form.submit'
const ratioColor = (this.state.ratioIsValid) ? 'success' : 'danger'

return (
<View as="div" padding="0 x-small">
<div id="flash-messages" role="alert"></div>
<Alert
screenReaderOnly
liveRegion={() => document.getElementById('flash-messages')}
liveRegionPoliteness="polite"
>
{this.props.t('form.contrast_ratio')}: {this.state.contrastRatio}
</Alert>
<View as="div" padding="x-small 0">
<TextInput
renderLabel={this.props.t('form.contrast.replace_background')}
placeholder={this.state.backgroundColor}
value={this.state.backgroundColor}
onChange={this.handleInputBackground}
renderBeforeInput={
<div style={{ boxShadow: '0 0 5px 0 #CCC', backgroundColor: this.state.backgroundColor, width: '20px', height: '20px', opacity: 1.0 }}></div>
<span style={{ boxShadow: '0 0 5px 0 #CCC', backgroundColor: this.state.backgroundColor, width: '20px', height: '20px', opacity: 1.0, display: 'inline-block' }}></span>
}
renderAfterInput={
<View>
<IconButton withBackground={false} withBorder={false}
<IconButton withBackground={false} withBorder={false}
onClick={this.handleDarkenBackground}
screenReaderLabel={this.props.t('form.contrast.darken')}>
<IconArrowOpenDownSolid color="primary" size="x-small" />
Expand All @@ -152,7 +166,7 @@ export default class ContrastForm extends React.Component {
onClick={this.handleLightenBackground}
screenReaderLabel={this.props.t('form.contrast.lighten')}>
<IconArrowOpenUpSolid color="primary" size="x-small" />
</IconButton>
</IconButton>
</View>
}
/>
Expand Down Expand Up @@ -183,33 +197,53 @@ export default class ContrastForm extends React.Component {
}
/>
</View>
<View as="div" margin="small 0">
<Checkbox label={this.props.t('form.contrast.bolden_text')}
checked={this.state.useBold}
onChange={this.handleBoldToggle}>
</Checkbox>
</View>
<Flex>
<Flex.Item shouldGrow shouldShrink>
<View as="div" margin="small 0">
<Checkbox label={this.props.t('form.contrast.bolden_text')}
checked={this.state.useBold}
onChange={this.handleBoldToggle}>
</Checkbox>
</View>

<View as="div" margin="small 0">
<Checkbox label={this.props.t('form.contrast.italicize_text')}
checked={this.state.useItalics}
onChange={this.handleItalicsToggle}>
</Checkbox>
</View>
<View as="div" margin="small 0">
<Checkbox label={this.props.t('form.contrast.italicize_text')}
checked={this.state.useItalics}
onChange={this.handleItalicsToggle}>
</Checkbox>
</View>

<View as="div" margin="medium 0">
<Button color="primary" onClick={this.handleSubmit} interaction={(!pending) ? 'enabled' : 'disabled'}>
{('1' == pending) && <Spinner size="x-small" renderTitle={buttonLabel} />}
{this.props.t(buttonLabel)}
</Button>
{this.props.activeIssue.recentlyUpdated &&
<View margin="0 small">
<IconCheckMarkLine color="success" />
<View margin="0 x-small">{this.props.t('label.fixed')}</View>
<View as="div" margin="medium 0">
<Button color="primary" onClick={this.handleSubmit} interaction={(!pending) ? 'enabled' : 'disabled'}>
{('1' == pending) && <Spinner size="x-small" renderTitle={buttonLabel} />}
{this.props.t(buttonLabel)}
</Button>
{this.props.activeIssue.recentlyUpdated &&
<View margin="0 small">
<IconCheckMarkLine color="success" />
<View margin="0 x-small">{this.props.t('label.fixed')}</View>
</View>
}
</View>
}
</View>

</Flex.Item>
<Flex.Item>
<View as="div" padding="x-small 0">
<Text weight="bold">{this.props.t('form.contrast_ratio')}</Text>
<View as="div" width="120px" margin="x-small 0" textAlign="center" padding="small 0" borderColor={ratioColor} borderWidth="small">
<Text color={ratioColor} as="div" size="x-large">{this.state.contrastRatio}</Text>
{(this.state.ratioIsValid) ?
<View as="div" padding="x-small 0">
<Text size="x-small" color={ratioColor}>{this.props.t('form.contrast.valid')}</Text>
</View>
:
<View as="div" padding="x-small 0">
<Text size="x-small" color={ratioColor}>{this.props.t('form.contrast.invalid')}</Text>
</View>
}
</View>
</View>
</Flex.Item>
</Flex>
</View>
);
}
Expand All @@ -229,25 +263,18 @@ export default class ContrastForm extends React.Component {
updatePreview() {
let issue = this.props.activeIssue
const html = Html.getIssueHtml(this.props.activeIssue)
let ratio = Contrast.contrastRatio(this.state.backgroundColor, this.state.textColor)
let contrastRatio = Contrast.contrastRatio(this.state.backgroundColor, this.state.textColor)
let tagName = Html.toElement(html).tagName
let largeTextTags = this.props.t('form.contrast.large_text_tags')

this.formErrors = []
let ratioIsValid = this.state.ratioIsValid

if(largeTextTags.includes(tagName)) {
if(ratio < 3) {
//push errors
this.formErrors.push({ text: `${this.props.t('form.contrast.invalid')}: ${ratio}` , type: 'error' })
}
ratioIsValid = (contrastRatio >= 3)
} else {
if(ratio < 4.5) {
//push errors
this.formErrors.push({ text: `${this.props.t('form.contrast.invalid')}: ${ratio}` , type: 'error' })
}
ratioIsValid = (contrastRatio >= 4.5)
}

this.setState({ textInputErrors: this.formErrors })
this.setState({ contrastRatio, ratioIsValid })

issue.newHtml = this.processHtml(html)
this.props.handleActiveIssue(issue)
Expand Down
Loading

0 comments on commit 94051ef

Please sign in to comment.