Automattic / Automattic/happychat-client
Ticket Submission Form: FAQ links have no border
- Dominant language
- JavaScript
- Stars
- 13
- Forks
- 5
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug
When submitting a ticket from https://woocommerce.test/my-account/create-a-ticket/, if the Tab is used to go from the `What are you trying to do?` field to the `Website URL:` field, the FAQ links listed in `Do any of these Frequently Asked Questions help?` do not have an accessible indication (large purple border)
### To Reproduce
Steps to reproduce the behavior:
1. Go to[ '...'](https://woocommerce.test/my-account/create-a-ticket/,)
2. Type "test" in `What are you trying to do?`
3. Use the Tab to navigate in the links listed
4. See there's no border on those links
### Expected behavior
We would expect the links to have a border to show their on focus
### Scope / Impact
List [user/stakeholder flows](https://alphamattic.wordpress.com/handbook/critical-flows/) that are potentially affected by this issue. Bonus: summarise the level of risk/impact.
Should we add/extend automated (e2e) tests to catch this issue?
### Screenshots

while we would expect something like this instead

### Potential fix
The following code should fix the issue:
```
.sibyl--suggestion-card:focus-within {
outline: 2px solid #7f54b3;
outline-offset: -3px;
transition: none;
}
```
To be added to https://github.com/Automattic/woocommerce.com/blob/dcc96e4ad9de363f7ee5c5f64a313f9307536cd0/themes/woo/js/lib/sibyl/sibyl.scss
Contributor guide
No contributing guide indexed for this repository
Research direction
Reproduce the keyboard navigation on the ticket submission form and inspect the referenced themes/woo/js/lib/sibyl/sibyl.scss file in the linked WooCommerce.com revision. Check the FAQ suggestion-card focus state and verify that keyboard focus has a visible purple indication matching the expected screenshot.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- scss
- Domain
- accessibility
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100