Automattic / Automattic/jetpack

Comments: Focus styles for form elements

Open
#5,243 1 comment 0 reactions 0 assignees View on GitHub
[Feature] Comments [Focus] Accessibility [Pri] Normal Bug
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

Raised by @davidakennedy:

> :focus styles on the form elements and button could be better because it’s hard to know what field you’re focused on.
#### Steps to reproduce the issue
- Open any post/page on which Jetpack's comment form is enabled.
- Tab to the comment form using only your keyboard and enter a comment into the main form.
- Continue to tab through each form element.
#### What I expected

As I tabbed through each form element, I expected some form of styling to indicate that it was the focus of my keyboard.
#### What happened instead

The below screencast shows that there was little/no styling to indicate focus as I tabbed through each form element:

![comments2](https://cloud.githubusercontent.com/assets/2998162/19023537/6b054bae-88e8-11e6-92b1-725a4238c1c2.gif)

Contributor guide

Open the contributing guide

Research direction

Open a post or page with Jetpack's comment form and reproduce the keyboard-only tab sequence described in the issue. Inspect the comment form and button styles, then verify that every form element visibly indicates keyboard focus when tabbing through the form.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.