LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Merge pull request #131 from lbryio/add-modal-labels

Browse source 
Add ARIA labels for all modals
This commit is contained in:
Jeremy Kauffman 2017-01-13 17:53:45 -05:00 committed by GitHub
commit f334770a8a
8 changed files with 40 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
js/app.js
View file

@ -201,15 +201,17 @@ var App = React.createClass({
<Header onOpenDrawer={this.openDrawer} onSearch={this.onSearch} links={headerLinks} viewingPage={this.state.viewingPage} />
{mainContent}
</div>
<Modal isOpen={this.state.modal == 'upgrade'} type="confirm" confirmButtonLabel="Upgrade" abortButtonLabel="Skip"
onConfirmed={this.handleUpgradeClicked} onAborted={this.handleSkipClicked} >
<Modal isOpen={this.state.modal == 'upgrade'} contentLabel="Update available"
type="confirm" confirmButtonLabel="Upgrade" abortButtonLabel="Skip"
onConfirmed={this.handleUpgradeClicked} onAborted={this.handleSkipClicked}>
<p>Your version of LBRY is out of date and may be unreliable or insecure.</p>
{this.state.isOldOSX
? <p>Before installing the new version, make sure to exit LBRY. If you started the app, click the LBRY icon in your status bar and choose "Quit."</p>
: null}
</Modal>
<Modal isOpen={this.state.modal == 'error'} type="custom" className="error-modal" overlayClassName="error-modal-overlay" >
<Modal isOpen={this.state.modal == 'error'} contentLabel="Error" type="custom"
className="error-modal" overlayClassName="error-modal-overlay" >
<h3 className="modal__header">Error</h3>
<div className="error-modal__content">

12
js/component/link.js
View file

@ -144,14 +144,17 @@ export let DownloadLink = React.createClass({
<span className="button-container">
<Link button={this.props.button} hidden={this.props.hidden} style={this.props.style}
disabled={this.state.downloading} label={label} icon={this.props.icon} onClick={this.handleClick} />
<Modal className="download-started-modal" isOpen={this.state.modal == 'downloadStarted'} onConfirmed={this.closeModal}>
<Modal className="download-started-modal" isOpen={this.state.modal == 'downloadStarted'}
contentLabel="Download started" onConfirmed={this.closeModal}>
<p>Downloading to:</p>
<div className="download-started-modal__file-path">{this.state.filePath}</div>
</Modal>
<Modal isOpen={this.state.modal == 'notEnoughCredits'} onConfirmed={this.closeModal}>
<Modal isOpen={this.state.modal == 'notEnoughCredits'} contentLabel="Not enough credits"
onConfirmed={this.closeModal}>
You don't have enough LBRY credits to pay for this stream.
</Modal>
<Modal isOpen={this.state.modal == 'timedOut'} onConfirmed={this.closeModal}>
<Modal isOpen={this.state.modal == 'timedOut'} contentLabel="Download failed"
onConfirmed={this.closeModal}>
LBRY was unable to download the stream <strong>lbry://{this.props.streamName}</strong>.
</Modal>
</span>
@ -208,7 +211,8 @@ export let WatchLink = React.createClass({
<Link button={this.props.button} hidden={this.props.hidden} style={this.props.style}
disabled={this.state.loading} label={this.props.label} icon={this.props.icon}
onClick={this.handleClick} />
<Modal isOpen={this.state.modal == 'notEnoughCredits'} onConfirmed={this.closeModal}>
<Modal isOpen={this.state.modal == 'notEnoughCredits'} contentLabel="Not enough credits"
onConfirmed={this.closeModal}>
You don't have enough LBRY credits to pay for this stream.
</Modal>
</span>

18
js/page/claim_code.js
View file

@ -119,16 +119,20 @@ var ClaimCodePage = React.createClass({
</section>
</div>
</form>
<Modal isOpen={this.state.modal == 'missingCode'} onConfirmed={this.closeModal}>
<Modal isOpen={this.state.modal == 'missingCode'} contentLabel="Invitation code required"
onConfirmed={this.closeModal}>
Please enter an invitation code or choose "Skip."
</Modal>
<Modal isOpen={this.state.modal == 'missingEmail'} onConfirmed={this.closeModal}>
<Modal isOpen={this.state.modal == 'missingEmail'} contentLabel="Email required"
onConfirmed={this.closeModal}>
Please enter an email address or choose "Skip."
</Modal>
<Modal isOpen={this.state.modal == 'codeRedeemFailed'} onConfirmed={this.closeModal}>
<Modal isOpen={this.state.modal == 'codeRedeemFailed'} contentLabel="Failed to redeem code"
onConfirmed={this.closeModal}>
{this.state.failureReason}
</Modal>
<Modal isOpen={this.state.modal == 'codeRedeemed'} onConfirmed={this.handleFinished}>
<Modal isOpen={this.state.modal == 'codeRedeemed'} contentLabel="Code redeemed"
onConfirmed={this.handleFinished}>
Your invite code has been redeemed.
{this.state.referralCredits > 0
? `You have also earned ${referralCredits} credits from referrals. A total of ${activationCredits + referralCredits}
@ -137,10 +141,12 @@ var ClaimCodePage = React.createClass({
? `${this.state.activationCredits} credits will be added to your balance shortly.`
: 'The credits will be added to your balance shortly.')}
</Modal>
<Modal isOpen={this.state.modal == 'skipped'} onConfirmed={this.handleFinished}>
<Modal isOpen={this.state.modal == 'skipped'} contentLabel="Welcome to LBRY"
onConfirmed={this.handleFinished}>
Welcome to LBRY! You can visit the Wallet page to redeem an invite code at any time.
</Modal>
<Modal isOpen={this.state.modal == 'couldNotConnect'} onConfirmed={this.closeModal}>
<Modal isOpen={this.state.modal == 'couldNotConnect'} contentLabel="Could not connect"
onConfirmed={this.closeModal}>
<p>LBRY couldn't connect to our servers to confirm your invitation code. Please check your internet connection.</p>
If you continue to have problems, you can still browse LBRY and visit the Settings page to redeem your code later.
</Modal>

2
js/page/my_files.js
View file

@ -56,7 +56,7 @@ var MyFilesRowMoreMenu = React.createClass({
<MenuItem onClick={this.handleDeleteClicked} label="Remove and delete file" />
</section>
</Menu>
<Modal isOpen={this.state.modal == 'confirmDelete'} type="confirm" confirmButtonLabel="Delete File"
<Modal isOpen={this.state.modal == 'confirmDelete'} contentLabel="Confirm delete" type="confirm" confirmButtonLabel="Delete File"
onConfirmed={this.handleDeleteConfirmed} onAborted={this.closeModal}>
Are you sure you'd like to delete <cite>{this.props.title}</cite>? This will {this.props.completed ? ' stop the download and ' : ''}
permanently remove the file from your system.

6
js/page/publish.js
View file

@ -493,11 +493,13 @@ var PublishPage = React.createClass({
</div>
</form>
<Modal isOpen={this.state.modal == 'publishStarted'} onConfirmed={this.handlePublishStartedConfirmed}>
<Modal isOpen={this.state.modal == 'publishStarted'} contentLabel="File published"
onConfirmed={this.handlePublishStartedConfirmed}>
<p>Your file has been published to LBRY at the address <code>lbry://{this.state.name}</code>!</p>
You will now be taken to your My Files page, where your newly published file will be listed. The file will take a few minutes to appear for other LBRY users; until then it will be listed as "pending."
</Modal>
<Modal isOpen={this.state.modal == 'error'} onConfirmed={this.closeModal}>
<Modal isOpen={this.state.modal == 'error'} contentLabel="Error publishing file"
onConfirmed={this.closeModal}>
The following error occurred when attempting to publish your file: {this.state.errorMessage}
</Modal>
</main>

9
js/page/referral.js
View file

@ -108,15 +108,18 @@ var ReferralPage = React.createClass({
</section>
</div>
</form>
<Modal isOpen={this.state.modal == 'referralInfo'} onConfirmed={this.handleFinished}>
<Modal isOpen={this.state.modal == 'referralInfo'} contentLabel="Credit earnings"
onConfirmed={this.handleFinished}>
{this.state.referralCredits > 0
? `You have earned ${response.referralCredits} credits from referrals. We will credit your account shortly. Thanks!`
: 'You have not earned any new referral credits since the last time you checked. Please check back in a week or two.'}
</Modal>
<Modal isOpen={this.state.modal == 'lookupFailed'} onConfirmed={this.closeModal}>
<Modal isOpen={this.state.modal == 'lookupFailed'} contentLabel={failureReason}
onConfirmed={this.closeModal}>
{this.state.failureReason}
</Modal>
<Modal isOpen={this.state.modal == 'couldNotConnect'} onConfirmed={this.closeModal}>
<Modal isOpen={this.state.modal == 'couldNotConnect'} contentLabel="Couldn't confirm referral code"
onConfirmed={this.closeModal}>
LBRY couldn't connect to our servers to confirm your referral code. Please check your internet connection.
</Modal>
</main>

3
js/page/report.js
View file

@ -49,7 +49,8 @@ var ReportPage = React.createClass({
<h3>Developer?</h3>
You can also <Link href="https://github.com/lbryio/lbry/issues" label="submit an issue on GitHub"/>.
</section>
<Modal isOpen={this.state.modal == 'submitted'} onConfirmed={this.closeModal}>
<Modal isOpen={this.state.modal == 'submitted'} contentLabel="Bug report submitted"
onConfirmed={this.closeModal}>
Your bug report has been submitted! Thank you for your feedback.
</Modal>
</main>

3
js/page/wallet.js
View file

@ -151,7 +151,8 @@ var SendToAddressSection = React.createClass({
: ''
}
</form>
<Modal isOpen={this.state.modal === 'insufficientBalance'} onConfirmed={this.closeModal}>
<Modal isOpen={this.state.modal === 'insufficientBalance'} contentLabel="Insufficient balance"
onConfirmed={this.closeModal}>
Insufficient balance: after this transaction you would have less than 1 LBC in your wallet.
</Modal>
</section>