Give priority to document.title over h1 when announcing page change #31147

KittyGiraudel · 2021-11-08T13:11:33Z

Improvement

This pull-request should address #24021, improving the page change announcement for assistive technologies by giving priority to document.title over h1. Interestingly, it would also improve a potential performance bottleneck by skipping calls to innerText on the main h1 raised in this comment.

shuding

Thanks a lot!

KittyGiraudel · 2021-11-08T13:59:35Z

@shuding I realized I left a linting error. I just addressed it by rebasing my commit. Sorry about this. 🙇‍♀️

shuding · 2021-11-08T14:14:26Z

No worries!

ijjk · 2021-11-08T14:31:33Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	KittyGiraudel/next.js document-title-announcer	Change
buildDuration	19.2s	18.9s	-230ms
buildDurationCached	4s	3.9s	-62ms
nodeModulesSize	332 MB	332 MB	⚠️ +154 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	KittyGiraudel/next.js document-title-announcer	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.211	3.113	-0.1
/ avg req/sec	778.57	802.97	+24.4
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.433	1.415	-0.02
/error-in-render avg req/sec	1744.94	1766.97	+22.03

Client Bundles (main, webpack, commons) Overall increase ⚠️

	vercel/next.js canary	KittyGiraudel/next.js document-title-announcer	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	28 kB	28 kB	⚠️ +3 B
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	71.9 kB	71.9 kB	⚠️ +3 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	KittyGiraudel/next.js document-title-announcer	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	KittyGiraudel/next.js document-title-announcer	Change
_app-HASH.js gzip	1.23 kB	1.23 kB	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	2.38 kB	2.38 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	635 B	635 B	✓
image-HASH.js gzip	4.44 kB	4.44 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.87 kB	1.87 kB	✓
routerDirect..HASH.js gzip	321 B	321 B	✓
script-HASH.js gzip	383 B	383 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
334f979574ae..6f4.css gzip	106 B	106 B	✓
Overall change	13.1 kB	13.1 kB	✓

Client Build Manifests

	vercel/next.js canary	KittyGiraudel/next.js document-title-announcer	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes Overall decrease ✓

	vercel/next.js canary	KittyGiraudel/next.js document-title-announcer	Change
index.html gzip	522 B	521 B	-1 B
link.html gzip	535 B	533 B	-2 B
withRouter.html gzip	515 B	515 B	✓
Overall change	1.57 kB	1.57 kB	-3 B

Diffs

Diff for main-HASH.js

@@ -1842,14 +1842,17 @@
       }
       function RouteAnnouncer() {
         var asPath = (0, _router).useRouter().asPath;
-        var ref = _slicedToArray(_react.default.useState(""), 2),
-          routeAnnouncement = ref[0],
-          setRouteAnnouncement = ref[1];
-        // Only announce the path change, but not for the first load because screen reader will do that automatically.
+        var ref1 = _slicedToArray(_react.default.useState(""), 2),
+          routeAnnouncement = ref1[0],
+          setRouteAnnouncement = ref1[1];
+        // Only announce the path change, but not for the first load because screen
+        // reader will do that automatically.
         var initialPathLoaded = _react.default.useRef(false);
-        // Every time the path changes, announce the route change. The announcement will be prioritized by h1, then title
-        // (from metadata), and finally if those don't exist, then the pathName that is in the URL. This methodology is
-        // inspired by Marcy Sutton's accessible client routing user testing. More information can be found here:
+        // Every time the path changes, announce the new page’s title following this
+        // priority: first the document title (from head), otherwise the first h1, or
+        // if none of these exist, then the pathname from the URL. This methodology is
+        // inspired by Marcy Sutton’s accessible client routing user testing. More
+        // information can be found here:
         // https://www.gatsbyjs.com/blog/2019-07-11-user-testing-accessible-client-routing/
         _react.default.useEffect(
           function() {
@@ -1857,20 +1860,22 @@
               initialPathLoaded.current = true;
               return;
             }
-            var newRouteAnnouncement;
-            var pageHeader = document.querySelector("h1");
-            if (pageHeader) {
-              newRouteAnnouncement =
-                pageHeader.innerText || pageHeader.textContent;
-            }
-            if (!newRouteAnnouncement) {
-              if (document.title) {
-                newRouteAnnouncement = document.title;
-              } else {
-                newRouteAnnouncement = asPath;
-              }
+            if (document.title) {
+              setRouteAnnouncement(document.title);
+            } else {
+              var pageHeader = document.querySelector("h1");
+              var ref;
+              var content =
+                (ref =
+                  pageHeader === null || pageHeader === void 0
+                    ? void 0
+                    : pageHeader.innerText) !== null && ref !== void 0
+                  ? ref
+                  : pageHeader === null || pageHeader === void 0
+                  ? void 0
+                  : pageHeader.textContent;
+              setRouteAnnouncement(content || asPath);
             }
-            setRouteAnnouncement(newRouteAnnouncement);
           },
           [asPath]
         );

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-8b1326231534a220.js"
+      src="/_next/static/chunks/main-fea44d09f0f9fe3f.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-8b1326231534a220.js"
+      src="/_next/static/chunks/main-fea44d09f0f9fe3f.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-8b1326231534a220.js"
+      src="/_next/static/chunks/main-fea44d09f0f9fe3f.js"
       defer=""
     ></script>
     <script

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	KittyGiraudel/next.js document-title-announcer	Change
buildDuration	20.9s	20.1s	-818ms
buildDurationCached	3.9s	3.8s	-125ms
nodeModulesSize	332 MB	332 MB	⚠️ +154 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	KittyGiraudel/next.js document-title-announcer	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.156	3.15	-0.01
/ avg req/sec	792.02	793.58	+1.56
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.451	1.483	⚠️ +0.03
/error-in-render avg req/sec	1723.42	1685.68	⚠️ -37.74

Client Bundles (main, webpack, commons) Overall increase ⚠️

	vercel/next.js canary	KittyGiraudel/next.js document-title-announcer	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	28.2 kB	28.2 kB	⚠️ +8 B
webpack-HASH.js gzip	1.43 kB	1.43 kB	✓
Overall change	72.1 kB	72.1 kB	⚠️ +8 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	KittyGiraudel/next.js document-title-announcer	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	KittyGiraudel/next.js document-title-announcer	Change
_app-HASH.js gzip	1.22 kB	1.22 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	305 B	305 B	✓
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.38 kB	2.38 kB	✓
head-HASH.js gzip	342 B	342 B	✓
hooks-HASH.js gzip	622 B	622 B	✓
image-HASH.js gzip	4.46 kB	4.46 kB	✓
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	1.91 kB	1.91 kB	✓
routerDirect..HASH.js gzip	314 B	314 B	✓
script-HASH.js gzip	375 B	375 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
334f979574ae..6f4.css gzip	106 B	106 B	✓
Overall change	13.1 kB	13.1 kB	✓

Client Build Manifests

	vercel/next.js canary	KittyGiraudel/next.js document-title-announcer	Change
_buildManifest.js gzip	460 B	460 B	✓
Overall change	460 B	460 B	✓

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	KittyGiraudel/next.js document-title-announcer	Change
index.html gzip	521 B	522 B	⚠️ +1 B
link.html gzip	534 B	535 B	⚠️ +1 B
withRouter.html gzip	515 B	515 B	✓
Overall change	1.57 kB	1.57 kB	⚠️ +2 B

Diffs

Diff for main-HASH.js

@@ -1842,14 +1842,17 @@
       }
       function RouteAnnouncer() {
         var asPath = (0, _router).useRouter().asPath;
-        var ref = _slicedToArray(_react.default.useState(""), 2),
-          routeAnnouncement = ref[0],
-          setRouteAnnouncement = ref[1];
-        // Only announce the path change, but not for the first load because screen reader will do that automatically.
+        var ref1 = _slicedToArray(_react.default.useState(""), 2),
+          routeAnnouncement = ref1[0],
+          setRouteAnnouncement = ref1[1];
+        // Only announce the path change, but not for the first load because screen
+        // reader will do that automatically.
         var initialPathLoaded = _react.default.useRef(false);
-        // Every time the path changes, announce the route change. The announcement will be prioritized by h1, then title
-        // (from metadata), and finally if those don't exist, then the pathName that is in the URL. This methodology is
-        // inspired by Marcy Sutton's accessible client routing user testing. More information can be found here:
+        // Every time the path changes, announce the new page’s title following this
+        // priority: first the document title (from head), otherwise the first h1, or
+        // if none of these exist, then the pathname from the URL. This methodology is
+        // inspired by Marcy Sutton’s accessible client routing user testing. More
+        // information can be found here:
         // https://www.gatsbyjs.com/blog/2019-07-11-user-testing-accessible-client-routing/
         _react.default.useEffect(
           function() {
@@ -1857,20 +1860,22 @@
               initialPathLoaded.current = true;
               return;
             }
-            var newRouteAnnouncement;
-            var pageHeader = document.querySelector("h1");
-            if (pageHeader) {
-              newRouteAnnouncement =
-                pageHeader.innerText || pageHeader.textContent;
-            }
-            if (!newRouteAnnouncement) {
-              if (document.title) {
-                newRouteAnnouncement = document.title;
-              } else {
-                newRouteAnnouncement = asPath;
-              }
+            if (document.title) {
+              setRouteAnnouncement(document.title);
+            } else {
+              var pageHeader = document.querySelector("h1");
+              var ref;
+              var content =
+                (ref =
+                  pageHeader === null || pageHeader === void 0
+                    ? void 0
+                    : pageHeader.innerText) !== null && ref !== void 0
+                  ? ref
+                  : pageHeader === null || pageHeader === void 0
+                  ? void 0
+                  : pageHeader.textContent;
+              setRouteAnnouncement(content || asPath);
             }
-            setRouteAnnouncement(newRouteAnnouncement);
           },
           [asPath]
         );

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-8b1326231534a220.js"
+      src="/_next/static/chunks/main-fea44d09f0f9fe3f.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-8b1326231534a220.js"
+      src="/_next/static/chunks/main-fea44d09f0f9fe3f.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-8b1326231534a220.js"
+      src="/_next/static/chunks/main-fea44d09f0f9fe3f.js"
       defer=""
     ></script>
     <script

Commit: 91623ee

Give priority to document.title over h1 when announcing page change

afdb89f

KittyGiraudel requested review from huozhi, ijjk, shuding and timneutkens as code owners November 8, 2021 13:11

ijjk added the type: next label Nov 8, 2021

shuding previously approved these changes Nov 8, 2021

View reviewed changes

Merge branch 'canary' into document-title-announcer

09b582b

This comment has been minimized.

Sign in to view

Give priority to document.title over h1 when announcing page change

91623ee

KittyGiraudel dismissed shuding’s stale review via 91623ee November 8, 2021 13:58

shuding approved these changes Nov 8, 2021

View reviewed changes

kodiakhq bot merged commit 3ceb9c5 into vercel:canary Nov 8, 2021

KittyGiraudel deleted the document-title-announcer branch November 8, 2021 16:02

thebuilder mentioned this pull request Dec 15, 2021

Docs: next-route-announcer and page transitions #32551

Closed

vercel locked as resolved and limited conversation to collaborators Jan 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Give priority to document.title over h1 when announcing page change #31147

Give priority to document.title over h1 when announcing page change #31147

KittyGiraudel commented Nov 8, 2021

shuding left a comment

This comment has been minimized.

KittyGiraudel commented Nov 8, 2021

shuding commented Nov 8, 2021

ijjk commented Nov 8, 2021

Diffs

Diffs

Give priority to document.title over h1 when announcing page change #31147

Give priority to document.title over h1 when announcing page change #31147

Conversation

KittyGiraudel commented Nov 8, 2021

Improvement

shuding left a comment

Choose a reason for hiding this comment

This comment has been minimized.

KittyGiraudel commented Nov 8, 2021

shuding commented Nov 8, 2021

ijjk commented Nov 8, 2021

Stats from current PR

Diffs

Diffs