зеркало из https://github.com/github/docs.git
A11y 2024 survey (#52012)
This commit is contained in:
Kevin Heis
GitHub
Родитель
36316dc837
Коммит
bd2542988e
|
|
@ -63,7 +63,6 @@ survey:
|
|||
additional_feedback: Can you tell us more about your rating? (Optional)
|
||||
optional: Optional
|
||||
required: Required
|
||||
email_placeholder: 'Example: email@example.com'
|
||||
email_label: Leave your email if we can contact you. (Optional)
|
||||
email_validation: Please enter a valid email address
|
||||
send: Send
|
||||
|
|
|
|||
|
|
@ -3,13 +3,8 @@
|
|||
margin: -0.4em;
|
||||
}
|
||||
|
||||
.customRadio + label:before {
|
||||
content: "X";
|
||||
color: transparent;
|
||||
margin: 0px -33px 0px -17px;
|
||||
padding: 7px 20px 7px 20px;
|
||||
}
|
||||
|
||||
.customRadio:focus + label:before {
|
||||
outline: 1px auto -webkit-focus-ring-color;
|
||||
.customRadio:focus + label {
|
||||
outline: 2px auto Highlight; // for firefox
|
||||
outline: 2px auto -webkit-focus-ring-color;
|
||||
// var(--fgColor-accent, var(--color-accent-fg))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ export const Survey = () => {
|
|||
// readers won't read the error message) so we need to do manual validation
|
||||
// ourselves.
|
||||
useEffect(() => {
|
||||
const emailRegex = /[^@\s.][^@\s]*@\[?[a-z0-9.-]+\]?/i
|
||||
const emailRegex = /[^@\s.][^@\s]*@\[?[a-z0-9.-]+\]?\.\[?[a-z0-9.-]+\]?/i
|
||||
if (!email.trim() || emailRegex.test(email)) {
|
||||
setIsEmailError(false)
|
||||
} else {
|
||||
|
|
@ -120,8 +120,8 @@ export const Survey = () => {
|
|||
onChange={(event) => setToken(event.target.value)}
|
||||
/>
|
||||
|
||||
{voteState === null && (
|
||||
<div className="radio-group mb-2" role="radiogroup" aria-labelledby="survey-title">
|
||||
{state !== ViewState.END && (
|
||||
<div className="mb-2" role="radiogroup" aria-labelledby="survey-title">
|
||||
<input
|
||||
className={cx(styles.visuallyHidden, styles.customRadio)}
|
||||
id="survey-yes"
|
||||
|
|
@ -134,16 +134,16 @@ export const Survey = () => {
|
|||
/>
|
||||
<label
|
||||
className={cx(
|
||||
'btn mr-1 color-border-accent-emphasis',
|
||||
voteState === VoteState.YES && 'color-bg-accent-emphasis',
|
||||
'btn mr-1',
|
||||
voteState === VoteState.YES && 'color-fg-on-emphasis color-bg-success-emphasis',
|
||||
)}
|
||||
htmlFor="survey-yes"
|
||||
>
|
||||
<span className="mr-2">{t`yes`}</span>
|
||||
<ThumbsupIcon
|
||||
size={16}
|
||||
className={voteState === VoteState.YES ? '' : 'color-fg-muted'}
|
||||
/>
|
||||
className={voteState === VoteState.YES ? 'color-fg-on-emphasis' : 'color-fg-muted'}
|
||||
/>{' '}
|
||||
{t`yes`}
|
||||
</label>
|
||||
<input
|
||||
className={cx(styles.visuallyHidden, styles.customRadio)}
|
||||
|
|
@ -157,16 +157,16 @@ export const Survey = () => {
|
|||
/>
|
||||
<label
|
||||
className={cx(
|
||||
'btn color-border-accent-emphasis',
|
||||
voteState === VoteState.NO && 'color-bg-danger-emphasis',
|
||||
'btn',
|
||||
voteState === VoteState.NO && 'color-fg-on-emphasis color-bg-danger-emphasis',
|
||||
)}
|
||||
htmlFor="survey-no"
|
||||
>
|
||||
<span className="mr-2">{t`no`}</span>
|
||||
<ThumbsdownIcon
|
||||
size={16}
|
||||
className={voteState === VoteState.NO ? '' : 'color-fg-muted'}
|
||||
/>
|
||||
className={voteState === VoteState.NO ? 'color-fg-on-emphasis' : 'color-fg-muted'}
|
||||
/>{' '}
|
||||
{t`no`}
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -194,23 +194,21 @@ export const Survey = () => {
|
|||
></textarea>
|
||||
</p>
|
||||
|
||||
<div className={cx('form-group', isEmailError ? 'warn' : '')}>
|
||||
<div className={cx('form-group', isEmailError && email.trim().length > 3 ? 'warn' : '')}>
|
||||
<label className="d-block mb-1 f6" htmlFor="survey-email">
|
||||
{t`email_label`}
|
||||
{/* <p className="text-normal color-fg-muted">{t`email_placeholder`}</p> */}
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
className="form-control input-sm width-full"
|
||||
name="survey-email"
|
||||
id="survey-email"
|
||||
placeholder={t`email_placeholder`}
|
||||
value={email}
|
||||
onChange={(event) => setEmail(event.target.value)}
|
||||
aria-invalid={isEmailError}
|
||||
{...(isEmailError ? { 'aria-describedby': 'email-input-validation' } : {})}
|
||||
/>
|
||||
{isEmailError && (
|
||||
{isEmailError && email.trim().length > 3 && (
|
||||
<p className="note warning" id="email-input-validation">
|
||||
{t`email_validation`}
|
||||
</p>
|
||||
|
|
@ -231,11 +229,7 @@ export const Survey = () => {
|
|||
>
|
||||
{t`cancel`}
|
||||
</button>
|
||||
<button
|
||||
disabled={isEmailError}
|
||||
type="submit"
|
||||
className="btn btn-sm color-border-accent-emphasis"
|
||||
>
|
||||
<button disabled={isEmailError} type="submit" className="btn btn-sm">
|
||||
{t`send`}
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -63,7 +63,6 @@ survey:
|
|||
additional_feedback: Can you tell us more about your rating? (Optional)
|
||||
optional: Optional
|
||||
required: Required
|
||||
email_placeholder: 'Example: email@example.com'
|
||||
email_label: Leave your email if we can contact you. (Optional)
|
||||
email_validation: Please enter a valid email address
|
||||
send: Send
|
||||
|
|
|
|||
|
|
@ -55,7 +55,6 @@ survey:
|
|||
comment_no_label: 改善の方法をお知らせください
|
||||
optional: オプション
|
||||
required: 必須
|
||||
email_placeholder: email@example.com
|
||||
email_label: さらにお尋ねするためにご連絡してもよろしければ、メール アドレスを入力してください
|
||||
email_validation: 有効な電子メール アドレスを入力してください
|
||||
send: Send
|
||||
|
|
|
|||
|
|
@ -523,8 +523,8 @@ test.describe('survey', () => {
|
|||
|
||||
await page.locator('[for=survey-comment]').click()
|
||||
await page.locator('[for=survey-comment]').fill('This is a comment')
|
||||
await page.getByPlaceholder('email@example.com').click()
|
||||
await page.getByPlaceholder('email@example.com').fill('test@example.com')
|
||||
await page.locator('[name=survey-email]').click()
|
||||
await page.locator('[name=survey-email]').fill('test@example.com')
|
||||
await page.getByRole('button', { name: 'Send' }).click()
|
||||
// One for the page view event, one for the thumbs up click, one for
|
||||
// the submission.
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export const Contribution = () => {
|
|||
<div className="f5 contribution">
|
||||
<h3 className="f4 mb-3">{t`title`}</h3>
|
||||
<p className="max-w-xs color-fg-muted mb-3">{t`body`}</p>
|
||||
<a className="btn color-border-accent-emphasis" href={contributionHref}>
|
||||
<a className="btn" href={contributionHref}>
|
||||
<GitPullRequestIcon size="small" className="octicon mr-1" />
|
||||
{t`button`}
|
||||
</a>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче