-
Notifications
You must be signed in to change notification settings - Fork 9
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Skip to main content link #1857
Changes from 3 commits
7a8fcf8
cd64efc
ed5d213
807277d
d6b5410
754b615
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -284,16 +284,24 @@ main { | |
left: unset !important; | ||
transform: none; | ||
overflow: hidden; | ||
background: var(--focus-color); | ||
font-size: var(--font-size-15px); | ||
line-height: var(--bs-body-line-height); | ||
letter-spacing: calc(var(--font-size-15px) * var(--letter-spacing-5)); | ||
} | ||
|
||
#skip-to-content:focus { | ||
height: 21px !important; | ||
height: auto; | ||
outline: none !important; | ||
box-shadow: none; | ||
padding: 1rem 0; | ||
background: var(--bs-white); | ||
} | ||
|
||
#skip-to-content:focus span { | ||
border: 2px solid var(--focus-color); | ||
border-radius: calc(4rem / 16); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Let's stick with what's standard! I updated Figma to match. ty! There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
font-size: var(--bs-body-font-size); | ||
font-weight: var(--bold-font-weight); | ||
letter-spacing: var(--letter-spacing-5); | ||
line-height: var(--bs-body-line-height); | ||
padding: 0 calc(4rem / 16); | ||
} | ||
|
||
/* Footer */ | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Added this
span
here for semantic-ness.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 (likep
ordiv
) 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.