From 2c507a474dcf8ca9257d2375a8a696950b31363b Mon Sep 17 00:00:00 2001 From: Dessalines Date: Tue, 9 Feb 2021 11:21:24 -0500 Subject: [PATCH 1/3] Adding more aria labels based on tota11y recs. #170 --- src/shared/components/comment-node.tsx | 69 +++++++++++++++++++-- src/shared/components/communities.tsx | 4 ++ src/shared/components/community.tsx | 2 +- src/shared/components/inbox.tsx | 2 +- src/shared/components/main.tsx | 2 +- src/shared/components/markdown-textarea.tsx | 6 ++ src/shared/components/navbar.tsx | 19 +++++- src/shared/components/post-form.tsx | 4 +- src/shared/components/post-listing.tsx | 65 +++++++++++++++++-- src/shared/components/search.tsx | 6 +- src/shared/components/user.tsx | 2 +- 11 files changed, 159 insertions(+), 22 deletions(-) diff --git a/src/shared/components/comment-node.tsx b/src/shared/components/comment-node.tsx index bf57a59d..33e719e2 100644 --- a/src/shared/components/comment-node.tsx +++ b/src/shared/components/comment-node.tsx @@ -204,7 +204,14 @@ export class CommentNode extends Component { onClick={linkEvent(node, this.handleCommentUpvote)} data-tippy-content={this.pointsTippy} > - {this.state.score} + + {this.state.score} + • @@ -424,6 +431,7 @@ export class CommentNode extends Component { this, this.handleModRemoveShow )} + aria-label={i18n.t('remove')} > {i18n.t('remove')} @@ -434,6 +442,7 @@ export class CommentNode extends Component { this, this.handleModRemoveSubmit )} + aria-label={i18n.t('restore')} > {i18n.t('restore')} @@ -451,6 +460,7 @@ export class CommentNode extends Component { this, this.handleModBanFromCommunityShow )} + aria-label={i18n.t('ban')} > {i18n.t('ban')} @@ -461,6 +471,7 @@ export class CommentNode extends Component { this, this.handleModBanFromCommunitySubmit )} + aria-label={i18n.t('unban')} > {i18n.t('unban')} @@ -474,6 +485,11 @@ export class CommentNode extends Component { this, this.handleShowConfirmAppointAsMod )} + aria-label={ + this.isMod + ? i18n.t('remove_as_mod') + : i18n.t('appoint_as_mod') + } > {this.isMod ? i18n.t('remove_as_mod') @@ -481,7 +497,10 @@ export class CommentNode extends Component { ) : ( <> - @@ -499,6 +519,7 @@ export class CommentNode extends Component { this, this.handleCancelConfirmAppointAsMod )} + aria-label={i18n.t('no')} > {i18n.t('no')} @@ -517,12 +538,16 @@ export class CommentNode extends Component { this, this.handleShowConfirmTransferCommunity )} + aria-label={i18n.t('transfer_community')} > {i18n.t('transfer_community')} ) : ( <> - @@ -541,6 +567,7 @@ export class CommentNode extends Component { this .handleCancelShowConfirmTransferCommunity )} + aria-label={i18n.t('no')} > {i18n.t('no')} @@ -557,6 +584,7 @@ export class CommentNode extends Component { this, this.handleModBanShow )} + aria-label={i18n.t('ban_from_site')} > {i18n.t('ban_from_site')} @@ -567,6 +595,7 @@ export class CommentNode extends Component { this, this.handleModBanSubmit )} + aria-label={i18n.t('unban_from_site')} > {i18n.t('unban_from_site')} @@ -580,6 +609,11 @@ export class CommentNode extends Component { this, this.handleShowConfirmAppointAsAdmin )} + aria-label={ + this.isAdmin + ? i18n.t('remove_as_admin') + : i18n.t('appoint_as_admin') + } > {this.isAdmin ? i18n.t('remove_as_admin') @@ -596,6 +630,7 @@ export class CommentNode extends Component { this, this.handleAddAdmin )} + aria-label={i18n.t('yes')} > {i18n.t('yes')} @@ -605,6 +640,7 @@ export class CommentNode extends Component { this, this.handleCancelConfirmAppointAsAdmin )} + aria-label={i18n.t('no')} > {i18n.t('no')} @@ -623,12 +659,16 @@ export class CommentNode extends Component { this, this.handleShowConfirmTransferSite )} + aria-label={i18n.t('transfer_site')} > {i18n.t('transfer_site')} ) : ( <> - @@ -646,6 +687,7 @@ export class CommentNode extends Component { this, this.handleCancelShowConfirmTransferSite )} + aria-label={i18n.t('no')} > {i18n.t('no')} @@ -667,14 +709,25 @@ export class CommentNode extends Component { class="form-inline" onSubmit={linkEvent(this, this.handleModRemoveSubmit)} > + - @@ -717,7 +770,11 @@ export class CommentNode extends Component { {/* */} {/* */}
-
diff --git a/src/shared/components/communities.tsx b/src/shared/components/communities.tsx index e90c09de..62814b7e 100644 --- a/src/shared/components/communities.tsx +++ b/src/shared/components/communities.tsx @@ -199,6 +199,7 @@ export class Communities extends Component { > { required minLength={3} /> + diff --git a/src/shared/components/community.tsx b/src/shared/components/community.tsx index 86ac243a..c16b1434 100644 --- a/src/shared/components/community.tsx +++ b/src/shared/components/community.tsx @@ -351,7 +351,7 @@ export class Community extends Component { rel="noopener" > - # + diff --git a/src/shared/components/inbox.tsx b/src/shared/components/inbox.tsx index ab0c312e..e9f52e13 100644 --- a/src/shared/components/inbox.tsx +++ b/src/shared/components/inbox.tsx @@ -158,7 +158,7 @@ export class Inbox extends Component { rel="noopener" > - # + diff --git a/src/shared/components/main.tsx b/src/shared/components/main.tsx index 2d4b7d78..de7bc4f4 100644 --- a/src/shared/components/main.tsx +++ b/src/shared/components/main.tsx @@ -602,7 +602,7 @@ export class Main extends Component { title="RSS" > - # + )} diff --git a/src/shared/components/markdown-textarea.tsx b/src/shared/components/markdown-textarea.tsx index cffc4322..fe34b205 100644 --- a/src/shared/components/markdown-textarea.tsx +++ b/src/shared/components/markdown-textarea.tsx @@ -138,6 +138,9 @@ export class MarkdownTextArea extends Component< /> )} +
@@ -180,6 +183,7 @@ export class MarkdownTextArea extends Component<
- +
{ class="btn btn-link btn-animate text-muted py-0" onClick={linkEvent(this, this.handleEditClick)} data-tippy-content={i18n.t('edit')} + aria-label={i18n.t('edit')} > @@ -692,6 +693,9 @@ export class PostListing extends Component { data-tippy-content={ !post_view.post.deleted ? i18n.t('delete') : i18n.t('restore') } + aria-label={ + !post_view.post.deleted ? i18n.t('delete') : i18n.t('restore') + } > { class="btn btn-link btn-animate text-muted py-0" onClick={linkEvent(this, this.handleViewSource)} data-tippy-content={i18n.t('view_source')} + aria-label={i18n.t('view_source')} > { data-tippy-content={ post_view.post.locked ? i18n.t('unlock') : i18n.t('lock') } + aria-label={ + post_view.post.locked ? i18n.t('unlock') : i18n.t('lock') + } > { ? i18n.t('unsticky') : i18n.t('sticky') } + aria-label={ + post_view.post.stickied + ? i18n.t('unsticky') + : i18n.t('sticky') + } > { @@ -781,6 +795,7 @@ export class PostListing extends Component { @@ -795,6 +810,7 @@ export class PostListing extends Component { this, this.handleModBanFromCommunityShow )} + aria-label={i18n.t('ban')} > {i18n.t('ban')} @@ -805,6 +821,7 @@ export class PostListing extends Component { this, this.handleModBanFromCommunitySubmit )} + aria-label={i18n.t('unban')} > {i18n.t('unban')} @@ -814,6 +831,11 @@ export class PostListing extends Component { ) : ( <> -
-
*/}
-
diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx index 1b61e3bf..448b5175 100644 --- a/src/shared/components/search.tsx +++ b/src/shared/components/search.tsx @@ -214,7 +214,11 @@ export class Search extends Component { required minLength={3} /> -
From ae18b912927251f5c150710592a283e88490178f Mon Sep 17 00:00:00 2001 From: Dessalines Date: Tue, 9 Feb 2021 11:54:41 -0500 Subject: [PATCH 2/3] Adding accessibility tests script. --- accessibility_tests.sh | 18 ++++++++++++++++++ src/shared/components/login.tsx | 1 + 2 files changed, 19 insertions(+) create mode 100755 accessibility_tests.sh diff --git a/accessibility_tests.sh b/accessibility_tests.sh new file mode 100755 index 00000000..0161e6d5 --- /dev/null +++ b/accessibility_tests.sh @@ -0,0 +1,18 @@ +#!/bin/bash + +ignores="WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail" +base_url="http://192.168.50.60:1234" + +test_urls=( + $base_url + $base_url/communities + $base_url/login + $base_url/search + $base_url/c/announcements + $base_url/u/dessalines + $base_url/post/34286 +) + +for i in "${test_urls[@]}"; do + pa11y --ignore="$ignores" "$i" +done diff --git a/src/shared/components/login.tsx b/src/shared/components/login.tsx index 7006ae71..4a75e453 100644 --- a/src/shared/components/login.tsx +++ b/src/shared/components/login.tsx @@ -260,6 +260,7 @@ export class Login extends Component { type="button" class="btn btn-secondary" onClick={linkEvent(this, this.handleRegenCaptcha)} + aria-label={i18n.t('captcha')} > From 2cbdcba47b7142bf49583eea5621507ac86c5575 Mon Sep 17 00:00:00 2001 From: Dessalines Date: Tue, 9 Feb 2021 12:01:36 -0500 Subject: [PATCH 3/3] Fixing lint --- src/shared/components/post-form.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/shared/components/post-form.tsx b/src/shared/components/post-form.tsx index 4435f29f..d25b455a 100644 --- a/src/shared/components/post-form.tsx +++ b/src/shared/components/post-form.tsx @@ -26,7 +26,6 @@ import { debounce, isImage, toast, - randomStr, setupTippy, hostname, pictrsDeleteToast, @@ -71,7 +70,6 @@ interface PostFormState { } export class PostForm extends Component { - private id = `post-form-${randomStr()}`; private subscription: Subscription; private choices: any; private emptyState: PostFormState = {