Accessibility focus ring issues in Firefox - tabs and related products on product page

[jacoswan]

EXPLANATION OF THE ISSUE

Discovered while doing eCom training. In Firefox with Storefront active.

What I Expected

Nice link-boxes around elements.

What happened instead

Around certain products elements, link boxes misbehave by either extending beyond boundary to the left, or creating artefacts adjacent to intended position.

In Firefox, Chrome & Opera, link-boxes are also missing left-margins, not sure if this is intentional.

Missing left-margin

Box extends off to the left

Cart page on two different sites

STEPS TO REPRODUCE THIS ISSUE

With Storefront active and using Firefox

Scenario 1:

Navigate to Single Product Page select Descriptions Tab (box has no left margin) Select Review Tab (box has no left margin) Click on any star to leave a Star rating (box extends off to the left)

Scenario 2:

Add a product to the cart; Navigate to the check out page; Click on the product image (box plus artefacts to its left appears)

PLUGINS & VERSION

Plugins: Akismet (4.1.1), Jetpack (7.2.1), WooCommerce (3.5.8) Theme: Storefront (2.4.5)

Affected: Firefox 6.0.2 (64-bit), also persisted after update to 66.0.3 (64-bit)

Only left-margin on tabs: Chrome 73.0.3683.86 (Official Build) (64-bit) - boxes are present, but behaves Opera 58.0.3135.127 - boxes are present, but behaves

Unaffected Safari 12.1 (14607.1.40.1.4) - boxes not present at all

@tiagonoronha @warrendholmes

[ben72]

+1 I've also seen similar issue on Firefox 66.0.2 (64-bit) on Ubuntu.

[tiagonoronha]

Thanks for this! It appears to be a Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=687311

We can fix a few of them, others are a bit more complicated. I'll see what I can do :)

[EtiennePoolman]

Just adding here that I am seeing it in Chrome as well on the Related Products images;

Screenshot direct link: https://cld.wthms.co/jG2MqT

[lancewillett]

Hi @jacoswan Is this issue still present in latest version of Storefront?

Due to lack of activity and low priority, might be worth closing this now.

[haszari]

Howdy @jacoswan - thanks reporting this.

We recently improved some focus ring issues in Firefox in #1318.

This isn't released yet - it's in 2.5.6 which will be released soon.

If you want to test 2.5.6 to see if this issue is still present, you can download from here: https://github.com/woocommerce/storefront/releases/tag/version%2F2.5.6-rc.1

[jacoswan]

Thanks for the ping. 2.5.6-rc.1 seems to solve all but the first (edit: and the related products' images), minor issue below, where the product tabs are still missing the left margin (both in Firefox and Chrome).

The other elements now appear nice and neat, @haszari

Issue persists

Missing left margin from product tabs and related product images below products:

Solved

Star rating box:

Product in Cart:

[haszari]

Great - thank you for retesting @jacoswan. 🙇

I'll update the title to focus this issue on the remaining quirks.