Skip to main content link #1857
Conversation
Coverage report
This PR does not seem to contain any modification to coverable code. |
github-actions
bot
added
deployment-dev
| @@ -44,7 +44,7 @@ | |||
| {% endif %} | |||
| <header role="banner" id="header"> | |||
| <a id="skip-to-content" href="#main-content" class="d-block w-100"> | |||
| <div class="container">{% translate "Skip to Main Content" %}</div> | |||
| <div class="container"><span>{% translate "Skip to main content" %}</span></div> | |||
There was a problem hiding this comment.
Added this span here for semantic-ness.
There was a problem hiding this comment.
Can you elaborate a bit? Both <div> and <span> carry no semantic meaning on their own, the difference being denoting either block-level or inline content. Text content is allowed inside both of them...
If there is an accessibility issue here with semantics, wouldn't a <p> be more appropriate?
There was a problem hiding this comment.
Semantic was the wrong word here. Though I'm not sure what the right would be. Having a border (for the focus) around a p or any block element (like p or div) would make it look like this, with the yellow border around the entire div:
But a span is an inline-display element, so the same CSS renders the focus like this instead:
So it's not semantic-ness but more like....... the native HTML element's inherit default block-or-inline-layout-ness.
benefits/static/css/styles.css
Outdated
| border: 2px solid var(--focus-color); | ||
| border-radius: calc(4rem / 16); |
There was a problem hiding this comment.
Need to clear up one thing: https://www.figma.com/file/SeSd3LaLd6WkbEYhmtKpO3?node-id=438:1160&mode=dev#673932531
@indexing @segacy1 The standard yellow focus ring style has a border-radius of 2px and a border of 3px. This one is 1px off for both. Is that okay, or should I use the standard yellow focus ring style?
There was a problem hiding this comment.
Let's stick with what's standard! I updated Figma to match. ty!
There was a problem hiding this comment.
Now matches the other link focus ring style.
closes #1852
What this PR does
A11y testing this branch versus test:
