FP-1408: (Frontera) Fix Clickable Area of Article List Link

[wesleyboar]

Overview

Make sure clickable area of article list link always opens new page.

Issues

• FP-1408

Changes

Prevent clickable area from changing shape while link is actively being clicked i.e. during :active state.

Screenshots

FP-1408.Prod.vs.Local.mov

🆕 Bug is now not reproducible on prod (cuz of snippet-based fix) nor pre-prod (cuz the fix is now deployed).

Testing

local: setup instructions — recreating page takes too long
remote (sans fix)¹: pprd.frontera-portal.tacc.utexas.edu
remote (with fix) (via build): dev.fronteraweb.tacc.utexas.edu(build,deploy)
remote (with fix) (via snippet): frontera-portal.tacc.utexas.edu(snippet)

On Frontera home page, under "User Guides" (near bottom of page):

1. Hover over document link.
   • Document title should be underlined (solid line).
   • Outline should appear around document.
2. Click and hold a document link.
   • Document title should be underlined (dotted line).
   • Outline should remain around document.
   • Document (whole list item and item outline) should move down by one pixel.²
3. Release click on document link.
   • Page should open.

Notes

Breakdown of Problem & Solution

Situation
There are four list items (html <li>) on theFrontera home page. Each list item is a document with a description and a link (html <a>) (the title of the document). That link/title has a pseudo element (css a::before). That pseudo element is stretched to be the same size as the list item, so that when that list item is hovered or clicked, it triggers the link being hovered/clicked.

What is Working? What is Broken?
✓ As list item is hovered, link is hovered.
⨂ As list item is clicked, link isnotclicked.

Problem
The pseudo element (which increases the size of the clickable link) changes shape when link is clicked. Thus, wherever was clicked, after it is clicked, is not longer a clickable area. So when mouse click is released, browser does not register click in the area.

Why Does this Happen?
Upon click, offending code changes the link's position to relative(so it can move the link up or down). If link is relative, then the pseudo element stretches to fill the link (which is just the text area) instead of the whole link. Further detail requiresunderstanding CSS position: absolute and its relationship to position: relative.

Solution
Disable the offending code for article list links (untilFP-1249 changes article list markup to support the disabled code).

Footnotes

1. 🆕 The fix got added during pprd deploy to test v3.15.0. ↩

2. This fix removes a (broken) feature, which is okay. The feature was that the link title would move down by one pixel on click. The whole list item (and item outline) should move down, not just the title. FP-1249 will make it all move appropriately. There is a comment for this in the changed code in this PR. ↩

[edmondsgarrett]

LGTM, works as described.

[wesleyboar]

This fixed was migrated to https://github.com/TACC/Core-Styles/, but just got removed in TACC/Core-Styles@53a3a6c because the other change there (new request from design) prevents the bug from ever occurring.