Skip to content

Commit f6b10ba

Browse files
ruibabyruibaby
committed
Add accessibility improvements to comment widget
1 parent 67746b2 commit f6b10ba

14 files changed

Lines changed: 53 additions & 23 deletions

File tree

‎packages/comment-widget/src/base-form.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -272,7 +272,7 @@ export class BaseForm extends LitElement {
272272
${
273273
this.submitting
274274
? html`<icon-loading></icon-loading>`
275-
: html`<i class="i-mingcute-send-line size-5"></i>`
275+
: html`<i class="i-mingcute-send-line size-5" aria-hidden="true"></i>`
276276
}
277277
${msg('Submit')}
278278
</button>

‎packages/comment-widget/src/comment-editor.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,7 @@ export class CommentEditor extends LitElement {
194194
role="button"
195195
class="size-7 hover:bg-muted-3 active:bg-muted-2 ${isActive ? 'bg-muted-3 text-text-1' : 'text-text-3 hover:text-text-1'} rounded-base flex items-center justify-center cursor-pointer transition-all"
196196
>
197-
<i class="size-5 ${item.icon}"></i>
197+
<i class="size-5 ${item.icon}" aria-hidden="true"></i>
198198
</div>
199199
</li>
200200
`;

‎packages/comment-widget/src/comment-item.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -121,12 +121,12 @@ export class CommentItem extends LitElement {
121121
.userWebsite=${this.comment?.spec.owner.annotations?.website}
122122
.ua=${this.comment?.spec.userAgent}
123123
>
124-
<button slot="action" class="icon-button group -ml-2" type="button" @click="${this.handleUpvote}">
124+
<button slot="action" class="icon-button group -ml-2" type="button" @click="${this.handleUpvote}" aria-label=${msg('Upvote')}>
125125
<div class="icon-button-icon">
126126
${
127127
this.upvoted
128-
? html`<i slot="icon" class="i-mingcute-heart-fill size-4 text-red-500"></i>`
129-
: html`<i slot="icon" class="i-mingcute-heart-line size-4"></i>`
128+
? html`<i slot="icon" class="i-mingcute-heart-fill size-4 text-red-500" aria-hidden="true"></i>`
129+
: html`<i slot="icon" class="i-mingcute-heart-line size-4" aria-hidden="true"></i>`
130130
}
131131
</div>
132132
<span class="icon-button-text">${`${this.upvoteCount || 0}`}</span>
@@ -137,19 +137,19 @@ export class CommentItem extends LitElement {
137137
this.comment?.status?.visibleReplyCount === 0
138138
? ''
139139
: html`
140-
<button slot="action" class="icon-button group" type="button" @click="${this.handleShowReplies}">
140+
<button slot="action" class="icon-button group" type="button" @click="${this.handleShowReplies}" aria-label=${msg('Show replies')}>
141141
<div class="icon-button-icon ">
142-
<i slot="icon" class="i-tabler:message-circle size-4"></i>
142+
<i slot="icon" class="i-tabler:message-circle size-4" aria-hidden="true"></i>
143143
</div>
144144
<span class="icon-button-text">${this.comment?.status?.visibleReplyCount || 0}</span>
145145
</button>`
146146
}
147147
${
148148
this.configMapData?.basic.withReplies
149149
? html`
150-
<button slot="action" class="icon-button group" type="button" @click="${this.handleToggleReplyForm}">
150+
<button slot="action" class="icon-button group" type="button" @click="${this.handleToggleReplyForm}" aria-label=${this.showReplyForm ? msg('Cancel reply') : msg('Add reply')}>
151151
<div class="icon-button-icon ">
152-
<i slot="icon" class="i-tabler:message-circle-plus size-4"></i>
152+
<i slot="icon" class="i-tabler:message-circle-plus size-4" aria-hidden="true"></i>
153153
</div>
154154
<span class="icon-button-text">${this.showReplyForm ? msg('Cancel reply') : msg('Add reply')}</span>
155155
</button>`

‎packages/comment-widget/src/comment-pagination.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export class CommentPagination extends LitElement {
5555
return pageNumbers.map((number) => {
5656
if (number === '...') {
5757
return html`<li class="px-3.5 inline-flex items-center justify-center">
58-
<i class="i-tabler:dots size-4"></i>
58+
<i class="i-tabler:dots size-4" aria-hidden="true"></i>
5959
</li>`;
6060
} else {
6161
return html`<li>
@@ -90,7 +90,7 @@ export class CommentPagination extends LitElement {
9090
@click=${() => this.gotoPage(this.page - 1)} ?disabled=${this.page === 1}
9191
class="pagination-button"
9292
>
93-
<i class="i-tabler:chevron-left size-4"></i>
93+
<i class="i-tabler:chevron-left size-4" aria-hidden="true"></i>
9494
${msg('Previous')}
9595
</button>
9696
</li>
@@ -105,7 +105,7 @@ export class CommentPagination extends LitElement {
105105
class="pagination-button"
106106
>
107107
${msg('Next')}
108-
<i class="i-tabler:chevron-right size-4"></i>
108+
<i class="i-tabler:chevron-right size-4" aria-hidden="true"></i>
109109
</button>
110110
</li>
111111
</ul>

‎packages/comment-widget/src/commenter-ua-bar.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ export class CommenterUABar extends LitElement {
8484
os
8585
? html`
8686
<div class="inline-flex items-center gap-1 bg-muted-3 rounded-base px-1.5 py-1">
87-
${osIcon ? html`<i class="${osIcon} opacity-90 size-3"></i>` : ''}
87+
${osIcon ? html`<i class="${osIcon} opacity-90 size-3" aria-hidden="true"></i>` : ''}
8888
<span class="text-xs text-text-3">${[os.name, os.version].filter(Boolean).join(' ')}</span>
8989
</div>
9090
`
@@ -94,7 +94,7 @@ export class CommenterUABar extends LitElement {
9494
browser
9595
? html`
9696
<div class="inline-flex items-center gap-1 bg-muted-3 rounded-base px-1.5 py-1">
97-
${browserIcon ? html`<i class="${browserIcon} opacity-90 size-3"></i>` : ''}
97+
${browserIcon ? html`<i class="${browserIcon} opacity-90 size-3" aria-hidden="true"></i>` : ''}
9898
<span class="text-xs text-text-3">${[browser.name, browser.major].filter(Boolean).join(' ')}</span>
9999
</div>
100100
`

‎packages/comment-widget/src/generated/locales/es.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
's98a5f7789c49dd3f': `En revisión`,
3434
's9f2ed66340f019c6': `Escribir un comentario`,
3535
'sa10fbe3fcd6ae148': `Agregar respuesta`,
36+
'sa82fbb7f361c6f44': `Mostrar respuestas`,
3637
'sa8dddacbaa66f8e0': `Por favor, inicie sesión primero`,
3738
'sb206d700d26b14ff': `Subrayado`,
3839
'sb3d4f79d9d8b71e5': `Enviar comentario`,
@@ -44,5 +45,6 @@
4445
'sf3ff78cc329d3528': `Anterior`,
4546
'sf77128b082955d42': `(O iniciar sesión)`,
4647
'sf7c0eba7c822e3d6': `Negrita`,
48+
'sf9709983d4da2c54': `Me gusta`,
4749
};
4850

‎packages/comment-widget/src/generated/locales/zh-CN.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
's98a5f7789c49dd3f': `审核中`,
3434
's9f2ed66340f019c6': `编写评论`,
3535
'sa10fbe3fcd6ae148': `加入回复`,
36+
'sa82fbb7f361c6f44': `显示回复`,
3637
'sa8dddacbaa66f8e0': `请先登录`,
3738
'sb206d700d26b14ff': `下划线`,
3839
'sb3d4f79d9d8b71e5': `提交评论`,
@@ -44,5 +45,6 @@
4445
'sf3ff78cc329d3528': `上一页`,
4546
'sf77128b082955d42': `（或登录账号）`,
4647
'sf7c0eba7c822e3d6': `粗体`,
48+
'sf9709983d4da2c54': `点赞`,
4749
};
4850

‎packages/comment-widget/src/generated/locales/zh-TW.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
's98a5f7789c49dd3f': `審核中`,
3434
's9f2ed66340f019c6': `撰寫評論`,
3535
'sa10fbe3fcd6ae148': `新增回覆`,
36+
'sa82fbb7f361c6f44': `顯示回覆`,
3637
'sa8dddacbaa66f8e0': `請先登入`,
3738
'sb206d700d26b14ff': `底線`,
3839
'sb3d4f79d9d8b71e5': `提交評論`,
@@ -44,5 +45,6 @@
4445
'sf3ff78cc329d3528': `上一頁`,
4546
'sf77128b082955d42': `（或登入帳號）`,
4647
'sf7c0eba7c822e3d6': `粗體`,
48+
'sf9709983d4da2c54': `讚`,
4749
};
4850

‎packages/comment-widget/src/lit-toast.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ export class LitToast extends LitElement {
2323
>
2424
${
2525
this.type === 'success'
26-
? html`<i class="i-tabler:circle-check size-4 text-white"></i>`
27-
: html`<i class="i-tabler:alert-circle size-4 text-white"></i>`
26+
? html`<i class="i-tabler:circle-check size-4 text-white" aria-hidden="true"></i>`
27+
: html`<i class="i-tabler:alert-circle size-4 text-white" aria-hidden="true"></i>`
2828
} <span>${this.message}</span>
2929
</div>`;
3030
}

‎packages/comment-widget/src/reply-item.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -124,19 +124,19 @@ export class ReplyItem extends LitElement {
124124
.userWebsite=${this.reply?.spec.owner.annotations?.website}
125125
.ua=${this.reply?.spec.userAgent}
126126
>
127-
<button slot="action" class="icon-button group -ml-2" type="button" @click="${this.handleUpvote}">
127+
<button slot="action" class="icon-button group -ml-2" type="button" @click="${this.handleUpvote}" aria-label=${msg('Upvote')}>
128128
<div class="icon-button-icon ">
129129
${
130130
this.upvoted
131-
? html`<i slot="icon" class="i-mingcute-heart-fill size-4 text-red-500"></i>`
132-
: html`<i slot="icon" class="i-mingcute-heart-line size-4"></i>`
131+
? html`<i slot="icon" class="i-mingcute-heart-fill size-4 text-red-500" aria-hidden="true"></i>`
132+
: html`<i slot="icon" class="i-mingcute-heart-line size-4" aria-hidden="true"></i>`
133133
}
134134
</div>
135135
<span class="icon-button-text">${`${this.upvoteCount || 0}`}</span>
136136
</button>
137-
<button slot="action" class="icon-button group" type="button" @click="${this.handleToggleReplyForm}">
137+
<button slot="action" class="icon-button group" type="button" @click="${this.handleToggleReplyForm}" aria-label=${this.showReplyForm ? msg('Cancel reply') : msg('Reply')}>
138138
<div class="icon-button-icon ">
139-
<i slot="icon" class="i-tabler:message-circle-plus size-4"></i>
139+
<i slot="icon" class="i-tabler:message-circle-plus size-4" aria-hidden="true"></i>
140140
</div>
141141
<span class="icon-button-text">${this.showReplyForm ? msg('Cancel reply') : msg('Reply')}</span>
142142
</button>
@@ -160,7 +160,7 @@ export class ReplyItem extends LitElement {
160160
@mouseenter=${() => this.handleSetActiveQuoteReply(this.quoteReply)}
161161
@mouseleave=${() => this.handleSetActiveQuoteReply()}
162162
class="quote-badge cursor-pointer inline-flex items-center gap-1 px-2 py-1.5 rounded-base bg-muted-3 text-text-2 hover:-translate-y-0.5 hover:text-text-1 hover:bg-muted-2 transition-all text-sm font-medium"
163-
><i class="i-ic:round-reply"></i><span>${this.quoteReply?.owner.displayName}</span>
163+
><i class="i-ic:round-reply" aria-hidden="true"></i><span>${this.quoteReply?.owner.displayName}</span>
164164
</span>
165165
<br slot="pre-content" />`
166166
: ''

0 commit comments

Comments
 (0)