Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Hidden-until-focus skip link becomes visible: core/button projection drops the source rule's opacity and position

Aperta
  • Qualcosa non va?
#2,843 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
45/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
css, html, php, wordpress
Ambito
frontend

Direzione di ricerca

Start by reproducing the neutral fixture in the issue: a button with class skip whose source rule sets opacity 0 and absolute position, plus a :focus override. Compare the source computed style with the imported core/button output to see which declarations are dropped. The issue asks for a projected rule that targets the focusable link, and a regression test that fails on trunk. Done when the button is hidden at rest, visible on :focus, and still an editable core/button.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Problem

A skip link that is hidden until focus renders as visible text after import. The source hides it with author CSS on the element itself and reveals it with :focus:

.skip{pointer-events:none;opacity:0;position:absolute;top:60px;left:50%;width:0;height:0;padding:0 24px;color:#116dff;background:#fff;border-radius:24px;font-size:14px}
.skip:focus{opacity:1;pointer-events:auto;width:auto;height:40px}

<button class="skip">Skip to Main Content</button>

The <button> becomes core/button. The source class moves to the .wp-block-button wrapper, and the representable declarations (color, background, padding, radius, font) move to the inner link's inline style. The hiding declarations (opacity:0, position:absolute, pointer-events:none) don't reach the rendered button. Computed style is opacity:1; position:static, and the text overflows a 0-height box as a vertical column. On a captured Wix mobile document it overlays the header and pushes the menu toggle down. Desktop is affected the same way but masked by layout.

Evidence: a 49-route import of a Wix site, compared with the frozen capture on the mobile profile. Source computed style is opacity:0; position:absolute; the import is opacity:1; position:static. The :focus reveal must keep working on the element that receives focus.

Expected

The element that receives focus keeps the source's resting and focus states. When a source rule is split between a block wrapper and its inner link, declarations the block can't express (opacity, position, pointer-events, offsets) are kept by a projected rule that targets the same element as the source. The :focus variant targets the focusable link.

Acceptance

  • A neutral fixture (above) renders the button hidden at rest (opacity 0, out of flow) and visible on :focus. The button stays an editable core/button.
  • A regression test fails on trunk.

AI assistance: investigation and drafting by Claude (Anthropic) via Pi in Franklin's workspace, from a live Studio import plus a Playwright computed-style comparison against the frozen capture.

Lingua principale
PHP
Stelle
22
Fork
2
Merge medio
7h 59m
PR unite (30g)
675

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di Automattic/blocks-engine

Tutte le issue di Automattic/blocks-engine

Issue simili

Altre issue su PHP

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.