Skip to content

Commit b46bc12

Browse files
heiskrheiskr
authored
A11y: scroll top all the things (github#39736)
1 parent 26584e2 commit b46bc12

File tree

9 files changed

+15
-35
lines changed

9 files changed

+15
-35
lines changed

‎components/release-notes/GHAEReleaseNotePatch.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,18 @@
11
import { useRef } from 'react'
22
import dayjs from 'dayjs'
3-
import cx from 'classnames'
43

54
import { useTranslation } from 'components/hooks/useTranslation'
65
import { PatchNotes } from './PatchNotes'
76
import { CurrentVersion, ReleaseNotePatch } from './types'
87

9-
import styles from './PatchNotes.module.scss'
10-
118
type Props = { patch: ReleaseNotePatch; currentVersion: CurrentVersion }
129
export function GHAEReleaseNotePatch({ patch, currentVersion }: Props) {
1310
const { t } = useTranslation('release_notes')
1411
const containerRef = useRef<HTMLDivElement>(null)
1512
const bannerText = t('banner_text')
1613

1714
return (
18-
<div ref={containerRef} className={cx(styles.sectionHeading, 'mb-10 pb-6')} id={patch.release}>
15+
<div ref={containerRef} className="mb-10 pb-6" id={patch.release}>
1916
<header
2017
style={{ zIndex: 1, marginTop: -1 }}
2118
className="container-xl border-top border-bottom px-3 pt-4 pb-2"

‎components/release-notes/GHESReleaseNotePatch.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
11
import { useRef } from 'react'
22
import dayjs from 'dayjs'
3-
import cx from 'classnames'
43

54
import { useTranslation } from 'components/hooks/useTranslation'
65
import { PatchNotes } from './PatchNotes'
76
import { Link } from 'components/Link'
87
import { CurrentVersion, ReleaseNotePatch, GHESMessage } from './types'
98

10-
import styles from './PatchNotes.module.scss'
11-
129
type Props = {
1310
patch: ReleaseNotePatch
1411
currentVersion: CurrentVersion
@@ -27,7 +24,7 @@ export function GHESReleaseNotePatch({
2724
const containerRef = useRef<HTMLDivElement>(null)
2825

2926
return (
30-
<div ref={containerRef} className={cx(styles.sectionHeading, 'mb-10 pb-6')} id={patch.version}>
27+
<div ref={containerRef} className="mb-10 pb-6" id={patch.version}>
3128
<header
3229
style={{ zIndex: 1, marginTop: -1 }}
3330
className="container-xl border-top border-bottom px-3 pt-4 pb-2"

‎components/release-notes/PatchNotes.module.scss‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,5 @@
11
@import "@primer/css/support/index.scss";
22

3-
.sectionHeading {
4-
scroll-margin-top: 105px !important; // 88 + 8 + 8 + 1
5-
6-
@include breakpoint(xl) {
7-
scroll-margin-top: 65px !important; // 48 + 8 + 8 + 1
8-
}
9-
}
10-
113
.aside {
124
@include breakpoint(md) {
135
width: 8rem;

‎components/release-notes/PatchNotes.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ import { slug } from 'github-slugger'
33
import { ReleaseNotePatch } from './types'
44
import { HeadingLink } from 'components/article/HeadingLink'
55

6-
import styles from './PatchNotes.module.scss'
7-
86
const SectionToLabelMap: Record<string, string> = {
97
features: 'Features',
108
bugs: 'Bug fixes',
@@ -40,7 +38,7 @@ export function PatchNotes({ patch }: Props) {
4038
const headingSlug = item.heading ? slug(item.heading) : `heading${i}`
4139
return (
4240
<li key={headingSlug}>
43-
<h4 id={headingSlug} className={cx(styles.sectionHeading)}>
41+
<h4 id={headingSlug}>
4442
<a href={`#${headingSlug}`}>{item.heading}</a>
4543
</h4>
4644
<ul>

‎src/learning-track/components/guides/LearningTrack.module.scss‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,3 @@
55
.removeHoverEvents {
66
pointer-events: none;
77
}
8-
9-
/* Because of the sticky header */
10-
.hashAnchor {
11-
&:target {
12-
scroll-margin-top: 75px;
13-
}
14-
}

‎src/learning-track/components/guides/LearningTrack.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,7 @@ export const LearningTrack = ({ track }: Props) => {
2828
<div className="Box-header color-bg-subtle p-4 d-flex flex-1 flex-items-start flex-wrap">
2929
<div className="d-flex flex-auto flex-items-start col-7 col-md-7 col-xl-7">
3030
<div className="my-xl-0 mr-xl-3">
31-
<h3
32-
id={titleSlug}
33-
className={cx('mb-3 color-text f3 text-semibold', styles.hashAnchor)}
34-
>
31+
<h3 id={titleSlug} className="mb-3 color-text f3 text-semibold">
3532
<a className="color-unset" href={`#${titleSlug}`}>
3633
{track?.title}
3734
</a>

‎stylesheets/headings.scss‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,4 @@ h6 {
88
color: unset;
99
text-decoration: none;
1010
}
11-
12-
// Lower because of the sticky header
13-
&:target {
14-
scroll-margin-top: 75px;
15-
}
1611
}

‎stylesheets/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
@import "headings.scss";
1515
@import "markdown-overrides.scss";
1616
@import "images.scss";
17+
@import "scroll-top.scss";
1718

1819
// Components
1920
@import "heading-links.scss";

‎stylesheets/scroll-top.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// https://tetralogical.com/blog/2023/06/08/focus-in-view/
2+
3+
html,
4+
body {
5+
scroll-padding-top: 105px !important; // 88 + 8 + 8 + 1
6+
7+
@include breakpoint(xl) {
8+
scroll-padding-top: 65px !important; // 48 + 8 + 8 + 1
9+
}
10+
}

0 commit comments

Comments
 (0)