Automattic / Automattic/happychat-client

Ticket Submission Form: FAQ links have no border

Open
#377 0 comments 0 reactions 0 assignees View on GitHub
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

image

while we would expect something like this instead

image

### 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.