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

6
js/app.js
View file

@ -201,7 +201,8 @@ var App = React.createClass({
<Header onOpenDrawer={this.openDrawer} onSearch={this.onSearch} links={headerLinks} viewingPage={this.state.viewingPage} /> <Header onOpenDrawer={this.openDrawer} onSearch={this.onSearch} links={headerLinks} viewingPage={this.state.viewingPage} />
{mainContent} {mainContent}
</div> </div>
<Modal isOpen={this.state.modal == 'upgrade'} type="confirm" confirmButtonLabel="Upgrade" abortButtonLabel="Skip" <Modal isOpen={this.state.modal == 'upgrade'} contentLabel="Update available"
type="confirm" confirmButtonLabel="Upgrade" abortButtonLabel="Skip"
onConfirmed={this.handleUpgradeClicked} onAborted={this.handleSkipClicked}> onConfirmed={this.handleUpgradeClicked} onAborted={this.handleSkipClicked}>
<p>Your version of LBRY is out of date and may be unreliable or insecure.</p> <p>Your version of LBRY is out of date and may be unreliable or insecure.</p>
{this.state.isOldOSX {this.state.isOldOSX
@ -209,7 +210,8 @@ var App = React.createClass({
: null} : null}
</Modal> </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> <h3 className="modal__header">Error</h3>
<div className="error-modal__content"> <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"> <span className="button-container">
<Link button={this.props.button} hidden={this.props.hidden} style={this.props.style} <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} /> 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> <p>Downloading to:</p>
<div className="download-started-modal__file-path">{this.state.filePath}</div> <div className="download-started-modal__file-path">{this.state.filePath}</div>
</Modal> </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. You don't have enough LBRY credits to pay for this stream.
</Modal> </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>. LBRY was unable to download the stream <strong>lbry://{this.props.streamName}</strong>.
</Modal> </Modal>
</span> </span>
@ -208,7 +211,8 @@ export let WatchLink = React.createClass({
<Link button={this.props.button} hidden={this.props.hidden} style={this.props.style} <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} disabled={this.state.loading} label={this.props.label} icon={this.props.icon}
onClick={this.handleClick} /> 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. You don't have enough LBRY credits to pay for this stream.
</Modal> </Modal>
</span> </span>

18
js/page/claim_code.js
View file

@ -119,16 +119,20 @@ var ClaimCodePage = React.createClass({
</section> </section>
</div> </div>
</form> </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." Please enter an invitation code or choose "Skip."
</Modal> </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." Please enter an email address or choose "Skip."
</Modal> </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} {this.state.failureReason}
</Modal> </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. Your invite code has been redeemed.
{this.state.referralCredits > 0 {this.state.referralCredits > 0
? `You have also earned ${referralCredits} credits from referrals. A total of ${activationCredits + referralCredits} ? `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.` ? `${this.state.activationCredits} credits will be added to your balance shortly.`
: 'The credits will be added to your balance shortly.')} : 'The credits will be added to your balance shortly.')}
</Modal> </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. Welcome to LBRY! You can visit the Wallet page to redeem an invite code at any time.
</Modal> </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> <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. If you continue to have problems, you can still browse LBRY and visit the Settings page to redeem your code later.
</Modal> </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" /> <MenuItem onClick={this.handleDeleteClicked} label="Remove and delete file" />
</section> </section>
</Menu> </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}> 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 ' : ''} 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. permanently remove the file from your system.

6
js/page/publish.js
View file

@ -493,11 +493,13 @@ var PublishPage = React.createClass({
</div> </div>
</form> </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> <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." 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>
<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} The following error occurred when attempting to publish your file: {this.state.errorMessage}
</Modal> </Modal>
</main> </main>

9
js/page/referral.js
View file

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

3
js/page/report.js
View file

@ -49,7 +49,8 @@ var ReportPage = React.createClass({
<h3>Developer?</h3> <h3>Developer?</h3>
You can also <Link href="https://github.com/lbryio/lbry/issues" label="submit an issue on GitHub"/>. You can also <Link href="https://github.com/lbryio/lbry/issues" label="submit an issue on GitHub"/>.
</section> </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. Your bug report has been submitted! Thank you for your feedback.
</Modal> </Modal>
</main> </main>

3
js/page/wallet.js
View file

@ -151,7 +151,8 @@ var SendToAddressSection = React.createClass({
: '' : ''
} }
</form> </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. Insufficient balance: after this transaction you would have less than 1 LBC in your wallet.
</Modal> </Modal>
</section> </section>