Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: missing label for textarea on a11y issues #308

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

askiebaby
Copy link

我在我的部落格有使用 gitalk 作為評論的工具,發現留言區塊的 <textarea>a11y(訪問性) 的問題,缺少了 <label for...>,希望可以加上去,所以增加了螢幕閱讀器可見的 CSS 與 <label>,但因為對 React 不熟悉,麻煩看看這樣有沒有問題,可以的話再幫我 Merge,有怪怪的地方請指出我的問題點,謝謝您。

@coveralls
Copy link

Coverage Status

Coverage remained the same at 99.065% when pulling 778416b on askiebaby:fix/a11y into 71db14c on gitalk:master.

Copy link
Collaborator

@booxood booxood left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

另外, dist 目录不要提交

/>

<div className="gt-comment-content">
<div className="gt-comment-header">
<div className={`gt-comment-block-${user ? '2' : '1'}`} />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里增加一个 div 是什么用途呀?

<a className="gt-avatar-github" onMouseDown={this.handleLogin}>
<Svg className="gt-ico-github" name="github"/>
</a>
}
<div className="gt-header-comment">
<label for="gt-header-textarea" class="gt-header-label">{this.i18n.t('leave-a-comment')}</label>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里需要调整下,React 里是 for -> htmlFor、 class -> className

<label htmlFor="gt-header-textarea" className="gt-header-label">{this.i18n.t('leave-a-comment')}</label>

@@ -26,6 +26,18 @@ clearfix() {
}
&:after { clear: both; }
}
visibility-hidden(){
border: 0 !important;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

缩减

Copy link

@ghost ghost left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants