Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[a11y] Route Announcements #23086

Merged
merged 2 commits into from
Mar 15, 2021
Merged

[a11y] Route Announcements #23086

merged 2 commits into from
Mar 15, 2021

Conversation

shuding
Copy link
Member

@shuding shuding commented Mar 15, 2021

Reverts #23082

ijjk
ijjk previously approved these changes Mar 15, 2021
View reviewed changes
@ijjk

This comment has been minimized.

Sign in to view
@ijjk

This comment has been minimized.

Sign in to view
@ijjk
Copy link
Member

ijjk commented Mar 15, 2021

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary vercel/next.js revert-23082-revert-20428-client-nav-a11y Change
buildDuration 13.5s 13.5s -41ms
nodeModulesSize 42.8 MB 42.8 MB ⚠️ +8.22 kB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary vercel/next.js revert-23082-revert-20428-client-nav-a11y Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.389 2.483 ⚠️ +0.09
/ avg req/sec 1046.5 1007.01 ⚠️ -39.49
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.601 1.563 -0.04
/error-in-render avg req/sec 1561.54 1599.38 +37.84
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary vercel/next.js revert-23082-revert-20428-client-nav-a11y Change
677f882d2ed8..a2e7.js gzip 13.4 kB 13.4 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-HASH.js gzip 6.67 kB 7.13 kB ⚠️ +465 B
webpack-HASH.js gzip 751 B 751 B ✓
Overall change 59.8 kB 60.3 kB ⚠️ +465 B
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js revert-23082-revert-20428-client-nav-a11y Change
polyfills-HASH.js gzip 31.3 kB 31.3 kB ✓
Overall change 31.3 kB 31.3 kB ✓
Client Pages Overall decrease ✓
vercel/next.js canary vercel/next.js revert-23082-revert-20428-client-nav-a11y Change
_app-fde3324..9dd1.js gzip 1.28 kB 1.28 kB ✓
_error-af59f..582f.js gzip 3.46 kB 3.46 kB ✓
amp-9716187d..0aa8.js gzip 536 B 536 B ✓
hooks-107e90..74c7.js gzip 888 B 888 B ✓
index-ac435c..ecf2.js gzip 227 B 227 B ✓
link-c0d2c96..de48.js gzip 1.67 kB 1.64 kB -24 B
routerDirect..dc9d.js gzip 303 B 303 B ✓
withRouter-6..0e02.js gzip 302 B 302 B ✓
Overall change 8.66 kB 8.64 kB -24 B
Client Build Manifests Overall decrease ✓
vercel/next.js canary vercel/next.js revert-23082-revert-20428-client-nav-a11y Change
_buildManifest.js gzip 347 B 346 B -1 B
Overall change 347 B 346 B -1 B
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary vercel/next.js revert-23082-revert-20428-client-nav-a11y Change
index.html gzip 613 B 613 B ✓
link.html gzip 619 B 621 B ⚠️ +2 B
withRouter.html gzip 608 B 609 B ⚠️ +1 B
Overall change 1.84 kB 1.84 kB ⚠️ +3 B

Diffs

Diff for _buildManifest.js 
@@ -8,7 +8,7 @@ self.__BUILD_MANIFEST = {
   "/hooks": [
     "static\u002Fchunks\u002Fpages\u002Fhooks-1c83fdb5c77614f18817.js"
   ],
-  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-3d75e6578a827afdc3f9.js"],
+  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-e82300e7287385add1b5.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-d1f18fd0349b020a8f6c.js"
   ],
Diff for link-3d75e65..27afdc3f9.js 
@@ -145,13 +145,6 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           shallow: shallow,
           locale: locale,
           scroll: scroll
-        }).then(function(success) {
-          if (!success) return;
-
-          if (scroll) {
-            // FIXME: proper route announcing at Router level, not Link:
-            document.body.focus();
-          }
         });
       }
Diff for main-HASH.js 
@@ -83,6 +83,55 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
       /***/
     },
 
+    /***/ CQWR: /***/ function(module, exports, __webpack_require__) {
+      "use strict";
+
+      var _slicedToArray = __webpack_require__("J4zp");
+
+      var _interopRequireWildcard = __webpack_require__("284h");
+
+      exports.__esModule = true;
+      exports.Portal = void 0;
+
+      var React = _interopRequireWildcard(__webpack_require__("q1tI"));
+
+      var _reactDom = __webpack_require__("i8i4");
+
+      var Portal = function Portal(_ref) {
+        var children = _ref.children,
+          type = _ref.type;
+        var portalNode = React.useRef(null);
+
+        var _React$useState = React.useState(),
+          _React$useState2 = _slicedToArray(_React$useState, 2),
+          forceUpdate = _React$useState2[1];
+
+        React.useEffect(
+          function() {
+            portalNode.current = document.createElement(type);
+            document.body.appendChild(portalNode.current);
+            forceUpdate({});
+            return function() {
+              if (portalNode.current) {
+                document.body.removeChild(portalNode.current);
+              }
+            };
+          },
+          [type]
+        );
+        return portalNode.current
+          ? /*#__PURE__*/ (0, _reactDom.createPortal)(
+              children,
+              portalNode.current
+            )
+          : null;
+      };
+
+      exports.Portal = Portal;
+
+      /***/
+    },
+
     /***/ DqTX: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
@@ -340,6 +389,8 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
 
       var _utils = __webpack_require__("g/15");
 
+      var _portal = __webpack_require__("CQWR");
+
       var _headManager = _interopRequireDefault(__webpack_require__("DqTX"));
 
       var _pageLoader = _interopRequireDefault(__webpack_require__("zmvN"));
@@ -348,6 +399,8 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
         __webpack_require__("bGXG")
       );
 
+      var _routeAnnouncer = __webpack_require__("oAez");
+
       var _router2 = __webpack_require__("nOHt");
       /* global location */
 
@@ -1199,7 +1252,17 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           /*#__PURE__*/ _react["default"].createElement(
             AppContainer,
             null,
-            /*#__PURE__*/ _react["default"].createElement(App, appProps)
+            /*#__PURE__*/ _react["default"].createElement(App, appProps),
+            /*#__PURE__*/ _react["default"].createElement(
+              _portal.Portal,
+              {
+                type: "next-route-announcer"
+              },
+              /*#__PURE__*/ _react["default"].createElement(
+                _routeAnnouncer.RouteAnnouncer,
+                null
+              )
+            )
           )
         );
 
@@ -1359,6 +1422,92 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
       /***/
     },
 
+    /***/ oAez: /***/ function(module, exports, __webpack_require__) {
+      "use strict";
+
+      var _slicedToArray = __webpack_require__("J4zp");
+
+      var _interopRequireWildcard = __webpack_require__("284h");
+
+      exports.__esModule = true;
+      exports.RouteAnnouncer = RouteAnnouncer;
+      exports["default"] = void 0;
+
+      var _react = _interopRequireWildcard(__webpack_require__("q1tI"));
+
+      var _router = __webpack_require__("nOHt");
+
+      function RouteAnnouncer() {
+        var _ref = (0, _router.useRouter)(),
+          asPath = _ref.asPath;
+
+        var _ref2 = (0, _react.useState)(""),
+          _ref3 = _slicedToArray(_ref2, 2),
+          routeAnnouncement = _ref3[0],
+          setRouteAnnouncement = _ref3[1]; // Only announce the path change, but not for the first load because screen reader will do that automatically.
+
+        var initialPathLoaded = (0, _react.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:
+        // https://www.gatsbyjs.com/blog/2019-07-11-user-testing-accessible-client-routing/
+
+        (0, _react.useEffect)(
+          function() {
+            if (!initialPathLoaded.current) {
+              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;
+              }
+            }
+
+            setRouteAnnouncement(newRouteAnnouncement);
+          }, // TODO: switch to pathname + query object of dynamic route requirements
+          [asPath]
+        );
+        return /*#__PURE__*/ _react["default"].createElement(
+          "p",
+          {
+            "aria-live": "assertive", // Make the announcement immediately.
+            id: "__next-route-announcer__",
+            role: "alert",
+            style: {
+              border: 0,
+              clip: "rect(0 0 0 0)",
+              height: "1px",
+              margin: "-1px",
+              overflow: "hidden",
+              padding: 0,
+              position: "absolute",
+              width: "1px",
+              // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+              whiteSpace: "nowrap",
+              wordWrap: "normal"
+            }
+          },
+          routeAnnouncement
+        );
+      }
+
+      var _default = RouteAnnouncer;
+      exports["default"] = _default;
+
+      /***/
+    },
+
     /***/ p0hA: /***/ function(module, exports, __webpack_require__) {
       /* WEBPACK VAR INJECTION */ (function(__dirname) {
         module.exports = (function() {
Diff for index.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-b61a93e2802f7678b37a.js"
+      href="/_next/static/chunks/main-e1929bfd070faf542a9c.js"
       as="script"
     />
     <link
@@ -53,7 +53,7 @@
       src="/_next/static/chunks/polyfills-020d2be99297a5eb71a0.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-b61a93e2802f7678b37a.js"
+      src="/_next/static/chunks/main-e1929bfd070faf542a9c.js"
       async=""
     ></script>
     <script
Diff for link.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-b61a93e2802f7678b37a.js"
+      href="/_next/static/chunks/main-e1929bfd070faf542a9c.js"
       as="script"
     />
     <link
@@ -32,7 +32,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/pages/link-3d75e6578a827afdc3f9.js"
+      href="/_next/static/chunks/pages/link-e82300e7287385add1b5.js"
       as="script"
     />
   </head>
@@ -58,7 +58,7 @@
       src="/_next/static/chunks/polyfills-020d2be99297a5eb71a0.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-b61a93e2802f7678b37a.js"
+      src="/_next/static/chunks/main-e1929bfd070faf542a9c.js"
       async=""
     ></script>
     <script
@@ -78,7 +78,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/link-3d75e6578a827afdc3f9.js"
+      src="/_next/static/chunks/pages/link-e82300e7287385add1b5.js"
       async=""
     ></script>
     <script src="/_next/static/BUILD_ID/_buildManifest.js" async=""></script>
Diff for withRouter.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-b61a93e2802f7678b37a.js"
+      href="/_next/static/chunks/main-e1929bfd070faf542a9c.js"
       as="script"
     />
     <link
@@ -53,7 +53,7 @@
       src="/_next/static/chunks/polyfills-020d2be99297a5eb71a0.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-b61a93e2802f7678b37a.js"
+      src="/_next/static/chunks/main-e1929bfd070faf542a9c.js"
       async=""
     ></script>
     <script
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary vercel/next.js revert-23082-revert-20428-client-nav-a11y Change
buildDuration 16s 15.7s -308ms
nodeModulesSize 42.8 MB 42.8 MB ⚠️ +8.22 kB
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary vercel/next.js revert-23082-revert-20428-client-nav-a11y Change
677f882d2ed8..a2e7.js gzip 13.4 kB 13.4 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-HASH.js gzip 6.67 kB 7.13 kB ⚠️ +465 B
webpack-HASH.js gzip 751 B 751 B ✓
Overall change 59.8 kB 60.3 kB ⚠️ +465 B
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js revert-23082-revert-20428-client-nav-a11y Change
polyfills-HASH.js gzip 31.3 kB 31.3 kB ✓
Overall change 31.3 kB 31.3 kB ✓
Client Pages Overall decrease ✓
vercel/next.js canary vercel/next.js revert-23082-revert-20428-client-nav-a11y Change
_app-fde3324..9dd1.js gzip 1.28 kB 1.28 kB ✓
_error-af59f..582f.js gzip 3.46 kB 3.46 kB ✓
amp-9716187d..0aa8.js gzip 536 B 536 B ✓
hooks-107e90..74c7.js gzip 888 B 888 B ✓
index-ac435c..ecf2.js gzip 227 B 227 B ✓
link-c0d2c96..de48.js gzip 1.67 kB N/A N/A
routerDirect..dc9d.js gzip 303 B 303 B ✓
withRouter-6..0e02.js gzip 302 B 302 B ✓
link-e6cee42..49eb.js gzip N/A 1.64 kB N/A
Overall change 8.66 kB 8.64 kB -24 B
Client Build Manifests Overall decrease ✓
vercel/next.js canary vercel/next.js revert-23082-revert-20428-client-nav-a11y Change
_buildManifest.js gzip 347 B 346 B -1 B
Overall change 347 B 346 B -1 B
Serverless bundles Overall decrease ✓
vercel/next.js canary vercel/next.js revert-23082-revert-20428-client-nav-a11y Change
_error.js 1.02 MB 1.02 MB ✓
404.html 2.67 kB 2.67 kB ✓
500.html 2.65 kB 2.65 kB ✓
amp.amp.html 10.6 kB 10.6 kB ✓
amp.html 1.86 kB 1.86 kB ✓
hooks.html 1.92 kB 1.92 kB ✓
index.js 1.02 MB 1.02 MB ✓
link.js 1.08 MB 1.08 MB -170 B
routerDirect.js 1.07 MB 1.07 MB ✓
withRouter.js 1.07 MB 1.07 MB ✓
Overall change 5.27 MB 5.27 MB -170 B
Webpack 5 Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary vercel/next.js revert-23082-revert-20428-client-nav-a11y Change
buildDuration 15.9s 16s ⚠️ +71ms
nodeModulesSize 42.8 MB 42.8 MB ⚠️ +8.22 kB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary vercel/next.js revert-23082-revert-20428-client-nav-a11y Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.346 2.428 ⚠️ +0.08
/ avg req/sec 1065.78 1029.82 ⚠️ -35.96
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.604 1.579 -0.03
/error-in-render avg req/sec 1558.56 1583.26 +24.7
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary vercel/next.js revert-23082-revert-20428-client-nav-a11y Change
597-2bc2376a..203d.js gzip 13.3 kB 13.3 kB ✓
framework.HASH.js gzip 39.3 kB 39.3 kB ✓
main-HASH.js gzip 6.61 kB 7.07 kB ⚠️ +462 B
webpack-HASH.js gzip 954 B 954 B ✓
Overall change 60.2 kB 60.6 kB ⚠️ +462 B
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js revert-23082-revert-20428-client-nav-a11y Change
polyfills-HASH.js gzip 31.1 kB 31.1 kB ✓
Overall change 31.1 kB 31.1 kB ✓
Client Pages Overall decrease ✓
vercel/next.js canary vercel/next.js revert-23082-revert-20428-client-nav-a11y Change
_app-0c62a59..94b7.js gzip 1.26 kB 1.26 kB ✓
_error-97d24..ed28.js gzip 3.38 kB 3.38 kB ✓
amp-2926e4c2..9ccc.js gzip 536 B 536 B ✓
hooks-1ed65b..8908.js gzip 902 B 902 B ✓
index-6259b6..77d8.js gzip 230 B 230 B ✓
link-b722682..14a4.js gzip 1.65 kB 1.63 kB -25 B
routerDirect..862a.js gzip 306 B 306 B ✓
withRouter-4..76fd.js gzip 302 B 302 B ✓
Overall change 8.57 kB 8.54 kB -25 B
Client Build Manifests
vercel/next.js canary vercel/next.js revert-23082-revert-20428-client-nav-a11y Change
_buildManifest.js gzip 322 B 322 B ✓
Overall change 322 B 322 B ✓
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary vercel/next.js revert-23082-revert-20428-client-nav-a11y Change
index.html gzip 587 B 586 B -1 B
link.html gzip 593 B 593 B ✓
withRouter.html gzip 581 B 580 B -1 B
Overall change 1.76 kB 1.76 kB -2 B

Diffs

Diff for _buildManifest.js 
@@ -8,7 +8,7 @@ self.__BUILD_MANIFEST = {
   "/hooks": [
     "static\u002Fchunks\u002Fpages\u002Fhooks-107e903cc2136d5974c7.js"
   ],
-  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-c0d2c9648c4e376cde48.js"],
+  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-e6cee42c996f3df349eb.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-68414267e80493f2dc9d.js"
   ],
Diff for link-c0d2c96..e376cde48.js 
@@ -74,34 +74,34 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
           d = s.as,
           v = e.children,
           h = e.replace,
-          y = e.shallow,
-          b = e.scroll,
-          g = e.locale;
+          g = e.shallow,
+          y = e.scroll,
+          b = e.locale;
         "string" === typeof v && (v = a.default.createElement("a", null, v));
         var _ = a.Children.only(v),
-          m = _ && "object" === typeof _ && _.ref,
-          w = (0, i.useIntersection)({ rootMargin: "200px" }),
-          E = r(w, 2),
-          L = E[0],
-          M = E[1],
+          w = _ && "object" === typeof _ && _.ref,
+          E = (0, i.useIntersection)({ rootMargin: "200px" }),
+          m = r(E, 2),
+          L = m[0],
+          M = m[1],
           k = a.default.useCallback(
             function(e) {
               L(e),
-                m &&
-                  ("function" === typeof m
-                    ? m(e)
-                    : "object" === typeof m && (m.current = e));
+                w &&
+                  ("function" === typeof w
+                    ? w(e)
+                    : "object" === typeof w && (w.current = e));
             },
-            [m, L]
+            [w, L]
           );
         (0, a.useEffect)(
           function() {
             var e = M && n && (0, c.isLocalURL)(p),
-              r = "undefined" !== typeof g ? g : t && t.locale,
+              r = "undefined" !== typeof b ? b : t && t.locale,
               o = l[p + "%" + d + (r ? "%" + r : "")];
             e && !o && f(t, p, d, { locale: r });
           },
-          [d, p, M, g, n, t]
+          [d, p, M, b, n, t]
         );
         var I = {
           ref: k,
@@ -130,10 +130,8 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
                       shallow: a,
                       locale: i,
                       scroll: u
-                    }).then(function(e) {
-                      e && u && document.body.focus();
                     }));
-                })(e, t, p, d, h, y, b, g);
+                })(e, t, p, d, h, g, y, b);
           },
           onMouseEnter: function(e) {
             (0, c.isLocalURL)(p) &&
@@ -144,7 +142,7 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
           }
         };
         if (e.passHref || ("a" === _.type && !("href" in _.props))) {
-          var N = "undefined" !== typeof g ? g : t && t.locale,
+          var N = "undefined" !== typeof b ? b : t && t.locale,
             C =
               t &&
               t.isLocaleDomain &&
Diff for main-HASH.js 
@@ -60,6 +60,37 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
       var n = r("284h")(r("IKlv"));
       (window.next = n), (0, n.default)().catch(console.error);
     },
+    CQWR: function(e, t, r) {
+      "use strict";
+      var n = r("J4zp"),
+        o = r("284h");
+      (t.__esModule = !0), (t.Portal = void 0);
+      var a = o(r("q1tI")),
+        i = r("i8i4");
+      t.Portal = function(e) {
+        var t = e.children,
+          r = e.type,
+          o = a.useRef(null),
+          u = a.useState(),
+          c = n(u, 2)[1];
+        return (
+          a.useEffect(
+            function() {
+              return (
+                (o.current = document.createElement(r)),
+                document.body.appendChild(o.current),
+                c({}),
+                function() {
+                  o.current && document.body.removeChild(o.current);
+                }
+              );
+            },
+            [r]
+          ),
+          o.current ? (0, i.createPortal)(t, o.current) : null
+        );
+      };
+    },
     DqTX: function(e, t, r) {
       "use strict";
       (t.__esModule = !0),
@@ -209,60 +240,62 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
           return c(this, r);
         };
       }
-      var p = r("284h"),
-        d = r("TqRt");
+      var d = r("284h"),
+        p = r("TqRt");
       (t.__esModule = !0),
-        (t.render = ae),
-        (t.renderError = ue),
+        (t.render = ue),
+        (t.renderError = se),
         (t.default = t.emitter = t.router = t.version = void 0);
-      var m = d(r("pVnL"));
-      d(r("284h"));
+      var m = p(r("pVnL"));
+      p(r("284h"));
       r("0sNQ");
-      var h = d(r("q1tI")),
-        v = d(r("i8i4")),
+      var h = p(r("q1tI")),
+        v = p(r("i8i4")),
         y = r("FYa8"),
-        g = d(r("dZ6Y")),
+        g = p(r("dZ6Y")),
         b = r("qOIg"),
         S = r("elyg"),
         w = r("/jkW"),
-        _ = p(r("3WeD")),
-        E = p(r("yLiY")),
+        _ = d(r("3WeD")),
+        E = d(r("yLiY")),
         x = r("g/15"),
-        T = d(r("DqTX")),
-        P = d(r("zmvN")),
-        N = d(r("bGXG")),
+        P = r("CQWR"),
+        T = p(r("DqTX")),
+        A = p(r("zmvN")),
+        C = p(r("bGXG")),
+        N = r("oAez"),
         k = r("nOHt"),
-        A = JSON.parse(document.getElementById("__NEXT_DATA__").textContent);
-      window.__NEXT_DATA__ = A;
+        R = JSON.parse(document.getElementById("__NEXT_DATA__").textContent);
+      window.__NEXT_DATA__ = R;
       t.version = "10.0.9";
-      var C = function(e) {
+      var M = function(e) {
           return [].slice.call(e);
         },
-        M = A.props,
-        L = A.err,
-        R = A.page,
-        F = A.query,
-        I = A.buildId,
-        D = A.assetPrefix,
-        O = A.runtimeConfig,
-        j = A.dynamicIds,
-        B = A.isFallback,
-        q = A.locale,
-        H = A.locales,
-        X = A.domainLocales,
-        G = A.isPreview,
-        W = A.defaultLocale,
-        J = D || "";
-      (r.p = "".concat(J, "/_next/")),
-        E.setConfig({ serverRuntimeConfig: {}, publicRuntimeConfig: O || {} });
-      var U = (0, x.getURL)();
-      (0, S.hasBasePath)(U) && (U = (0, S.delBasePath)(U));
-      var Y = new P.default(I, J),
+        L = R.props,
+        F = R.err,
+        I = R.page,
+        D = R.query,
+        O = R.buildId,
+        j = R.assetPrefix,
+        q = R.runtimeConfig,
+        B = R.dynamicIds,
+        H = R.isFallback,
+        X = R.locale,
+        W = R.locales,
+        J = R.domainLocales,
+        G = R.isPreview,
+        U = R.defaultLocale,
+        Y = j || "";
+      (r.p = "".concat(Y, "/_next/")),
+        E.setConfig({ serverRuntimeConfig: {}, publicRuntimeConfig: q || {} });
+      var z = (0, x.getURL)();
+      (0, S.hasBasePath)(z) && (z = (0, S.delBasePath)(z));
+      var Q = new A.default(O, Y),
         V = function(e) {
           var t = l(e, 2),
             r = t[0],
             n = t[1];
-          return Y.routeLoader.onEntrypoint(r, n);
+          return Q.routeLoader.onEntrypoint(r, n);
         };
       window.__NEXT_P &&
         window.__NEXT_P.map(function(e) {
@@ -272,15 +305,15 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
         }),
         (window.__NEXT_P = []),
         (window.__NEXT_P.push = V);
-      var z,
-        Q,
-        Z,
+      var Z,
         K,
-        $ = (0, T.default)(),
-        ee = document.getElementById("__next");
-      t.router = Q;
-      var te,
-        re = (function(e) {
+        $,
+        ee,
+        te = (0, T.default)(),
+        re = document.getElementById("__next");
+      t.router = K;
+      var ne,
+        oe = (function(e) {
           u(r, e);
           var t = f(r);
           function r() {
@@ -298,23 +331,23 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
                 key: "componentDidMount",
                 value: function() {
                   this.scrollToHash(),
-                    Q.isSsr &&
-                      (B ||
-                        (A.nextExport &&
-                          ((0, w.isDynamicRoute)(Q.pathname) ||
+                    K.isSsr &&
+                      (H ||
+                        (R.nextExport &&
+                          ((0, w.isDynamicRoute)(K.pathname) ||
                             location.search)) ||
-                        (M && M.__N_SSG && location.search)) &&
-                      Q.replace(
-                        Q.pathname +
+                        (L && L.__N_SSG && location.search)) &&
+                      K.replace(
+                        K.pathname +
                           "?" +
                           String(
                             _.assign(
-                              _.urlQueryToSearchParams(Q.query),
+                              _.urlQueryToSearchParams(K.query),
                               new URLSearchParams(location.search)
                             )
                           ),
-                        U,
-                        { _h: 1, shallow: !B }
+                        z,
+                        { _h: 1, shallow: !H }
                       );
                 }
               },
@@ -347,9 +380,9 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
             r
           );
         })(h.default.Component),
-        ne = (0, g.default)();
-      t.emitter = ne;
-      var oe = (function() {
+        ae = (0, g.default)();
+      t.emitter = ae;
+      var ie = (function() {
         var e = o(
           n.mark(function e() {
             var r,
@@ -367,7 +400,7 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
                       return (
                         s.length > 0 && void 0 !== s[0] ? s[0] : {},
                         (e.next = 4),
-                        Y.routeLoader.whenEntrypoint("/_app")
+                        Q.routeLoader.whenEntrypoint("/_app")
                       );
                     case 4:
                       if (!("error" in (r = e.sent))) {
@@ -378,10 +411,10 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
                     case 7:
                       (o = r.component),
                         (a = r.exports),
-                        (Z = o),
+                        ($ = o),
                         a &&
                           a.reportWebVitals &&
-                          (K = function(e) {
+                          (ee = function(e) {
                             var t,
                               r = e.id,
                               n = e.name,
@@ -408,12 +441,12 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
                                     : "web-vital"
                               });
                           }),
-                        (i = L),
+                        (i = F),
                         (e.prev = 11),
                         (e.next = 16);
                       break;
                     case 16:
-                      return (e.next = 18), Y.routeLoader.whenEntrypoint(R);
+                      return (e.next = 18), Q.routeLoader.whenEntrypoint(I);
                     case 18:
                       e.t0 = e.sent;
                     case 19:
@@ -423,7 +456,7 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
                       }
                       throw u.error;
                     case 22:
-                      (te = u.component), (e.next = 27);
+                      (ne = u.component), (e.next = 27);
                       break;
                     case 27:
                       e.next = 32;
@@ -435,43 +468,43 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
                         e.next = 36;
                         break;
                       }
-                      return (e.next = 36), window.__NEXT_PRELOADREADY(j);
+                      return (e.next = 36), window.__NEXT_PRELOADREADY(B);
                     case 36:
                       return (
-                        (t.router = Q = (0, k.createRouter)(R, F, U, {
-                          initialProps: M,
-                          pageLoader: Y,
-                          App: Z,
-                          Component: te,
-                          wrapApp: me,
+                        (t.router = K = (0, k.createRouter)(I, D, z, {
+                          initialProps: L,
+                          pageLoader: Q,
+                          App: $,
+                          Component: ne,
+                          wrapApp: ve,
                           err: i,
-                          isFallback: Boolean(B),
+                          isFallback: Boolean(H),
                           subscription: function(e, t, r) {
-                            return ae(
+                            return ue(
                               Object.assign({}, e, { App: t, scroll: r })
                             );
                           },
-                          locale: q,
-                          locales: H,
-                          defaultLocale: W,
-                          domainLocales: X,
+                          locale: X,
+                          locales: W,
+                          defaultLocale: U,
+                          domainLocales: J,
                           isPreview: G
                         })),
-                        ae(
+                        ue(
                           (c = {
-                            App: Z,
+                            App: $,
                             initial: !0,
-                            Component: te,
-                            props: M,
+                            Component: ne,
+                            props: L,
                             err: i
                           })
                         ),
-                        e.abrupt("return", ne)
+                        e.abrupt("return", ae)
                       );
                     case 44:
                       return e.abrupt("return", {
-                        emitter: ne,
-                        render: ae,
+                        emitter: ae,
+                        render: ue,
                         renderCtx: c
                       });
                     case 45:
@@ -489,11 +522,11 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
           return e.apply(this, arguments);
         };
       })();
-      function ae(e) {
-        return ie.apply(this, arguments);
+      function ue(e) {
+        return ce.apply(this, arguments);
       }
-      function ie() {
-        return (ie = o(
+      function ce() {
+        return (ce = o(
           n.mark(function e(t) {
             return n.wrap(
               function(e) {
@@ -504,11 +537,11 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
                         e.next = 4;
                         break;
                       }
-                      return (e.next = 3), ue(t);
+                      return (e.next = 3), se(t);
                     case 3:
                       return e.abrupt("return");
                     case 4:
-                      return (e.prev = 4), (e.next = 7), he(t);
+                      return (e.prev = 4), (e.next = 7), ye(t);
                     case 7:
                       e.next = 16;
                       break;
@@ -522,7 +555,7 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
                       throw e.t0;
                     case 13:
                       return (
-                        (e.next = 16), ue((0, m.default)({}, t, { err: e.t0 }))
+                        (e.next = 16), se((0, m.default)({}, t, { err: e.t0 }))
                       );
                     case 16:
                     case "end":
@@ -536,25 +569,25 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
           })
         )).apply(this, arguments);
       }
-      function ue(e) {
+      function se(e) {
         var t = e.App,
           r = e.err;
         return (
           console.error(r),
-          Y.loadPage("/_error").then(function(n) {
+          Q.loadPage("/_error").then(function(n) {
             var o = n.page,
               a = n.styleSheets,
-              i = me(t),
+              i = ve(t),
               u = {
                 Component: o,
                 AppTree: i,
-                router: Q,
-                ctx: { err: r, pathname: R, query: F, asPath: U, AppTree: i }
+                router: K,
+                ctx: { err: r, pathname: I, query: D, asPath: z, AppTree: i }
               };
             return Promise.resolve(
               e.props ? e.props : (0, x.loadGetInitialProps)(t, u)
             ).then(function(t) {
-              return he(
+              return ye(
                 (0, m.default)({}, e, {
                   err: r,
                   Component: o,
@@ -566,9 +599,9 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
           })
         );
       }
-      t.default = oe;
-      var ce = "function" === typeof v.default.hydrate;
-      function se() {
+      t.default = ie;
+      var le = "function" === typeof v.default.hydrate;
+      function fe() {
         x.ST &&
           (performance.mark("afterHydrate"),
           performance.measure(
@@ -581,10 +614,10 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
             "beforeRender",
             "afterHydrate"
           ),
-          K && performance.getEntriesByName("Next.js-hydration").forEach(K),
-          fe());
+          ee && performance.getEntriesByName("Next.js-hydration").forEach(ee),
+          pe());
       }
-      function le() {
+      function de() {
         if (x.ST) {
           performance.mark("afterRender");
           var e = performance.getEntriesByName("routeChange", "mark");
@@ -599,12 +632,12 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
               "beforeRender",
               "afterRender"
             ),
-            K &&
-              (performance.getEntriesByName("Next.js-render").forEach(K),
+            ee &&
+              (performance.getEntriesByName("Next.js-render").forEach(ee),
               performance
                 .getEntriesByName("Next.js-route-change-to-render")
-                .forEach(K)),
-            fe(),
+                .forEach(ee)),
+            pe(),
             ["Next.js-route-change-to-render", "Next.js-render"].forEach(
               function(e) {
                 return performance.clearMeasures(e);
@@ -612,78 +645,78 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
             ));
         }
       }
-      function fe() {
+      function pe() {
         ["beforeRender", "afterHydrate", "afterRender", "routeChange"].forEach(
           function(e) {
             return performance.clearMarks(e);
           }
         );
       }
-      function pe(e) {
+      function me(e) {
         var t = e.children;
         return h.default.createElement(
-          re,
+          oe,
           {
             fn: function(e) {
-              return ue({ App: Z, err: e }).catch(function(e) {
+              return se({ App: $, err: e }).catch(function(e) {
                 return console.error("Error rendering page: ", e);
               });
             }
           },
           h.default.createElement(
             b.RouterContext.Provider,
-            { value: (0, k.makePublicRouterInstance)(Q) },
+            { value: (0, k.makePublicRouterInstance)(K) },
             h.default.createElement(
               y.HeadManagerContext.Provider,
-              { value: $ },
+              { value: te },
               t
             )
           )
         );
       }
-      var de,
-        me = function(e) {
+      var he,
+        ve = function(e) {
           return function(t) {
-            var r = (0, m.default)({}, t, { Component: te, err: L, router: Q });
+            var r = (0, m.default)({}, t, { Component: ne, err: F, router: K });
             return h.default.createElement(
-              pe,
+              me,
               null,
               h.default.createElement(e, r)
             );
           };
         };
-      function he(e) {
+      function ye(e) {
         var t = e.App,
           r = e.Component,
           n = e.props,
           o = e.err,
           a = "initial" in e ? void 0 : e.styleSheets;
-        (r = r || de.Component), (n = n || de.props);
-        var i = (0, m.default)({}, n, { Component: r, err: o, router: Q });
-        de = i;
+        (r = r || he.Component), (n = n || he.props);
+        var i = (0, m.default)({}, n, { Component: r, err: o, router: K });
+        he = i;
         var u,
           c = !1,
           s = new Promise(function(e, t) {
-            z && z(),
+            Z && Z(),
               (u = function() {
-                (z = null), e();
+                (Z = null), e();
               }),
-              (z = function() {
-                (c = !0), (z = null);
+              (Z = function() {
+                (c = !0), (Z = null);
                 var e = new Error("Cancel rendering route");
                 (e.cancelled = !0), t(e);
               });
           });
         var l,
           f,
-          p = h.default.createElement(
-            ve,
+          d = h.default.createElement(
+            ge,
             {
               callback: function() {
                 u();
               }
             },
-            h.default.createElement(ye, {
+            h.default.createElement(be, {
               callback: function() {
                 if (a && !c) {
                   for (
@@ -692,7 +725,7 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
                           return e.href;
                         })
                       ),
-                      r = C(document.querySelectorAll("style[data-n-href]")),
+                      r = M(document.querySelectorAll("style[data-n-href]")),
                       n = r.map(function(e) {
                         return e.getAttribute("data-n-href");
                       }),
@@ -713,7 +746,7 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
                       r &&
                         (i.parentNode.insertBefore(r, i.nextSibling), (i = r));
                     }),
-                    C(document.querySelectorAll("link[data-n-p]")).forEach(
+                    M(document.querySelectorAll("link[data-n-p]")).forEach(
                       function(e) {
                         e.parentNode.removeChild(e);
                       }
@@ -723,12 +756,21 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
                 e.scroll && window.scrollTo(e.scroll.x, e.scroll.y);
               }
             }),
-            h.default.createElement(pe, null, h.default.createElement(t, i))
+            h.default.createElement(
+              me,
+              null,
+              h.default.createElement(t, i),
+              h.default.createElement(
+                P.Portal,
+                { type: "next-route-announcer" },
+                h.default.createElement(N.RouteAnnouncer, null)
+              )
+            )
           );
         return (
           (function() {
             if (!a) return !1;
-            var e = C(document.querySelectorAll("style[data-n-href]")),
+            var e = M(document.querySelectorAll("style[data-n-href]")),
               t = new Set(
                 e.map(function(e) {
                   return e.getAttribute("data-n-href");
@@ -749,16 +791,16 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
               }
             });
           })(),
-          (l = p),
-          (f = ee),
+          (l = d),
+          (f = re),
           x.ST && performance.mark("beforeRender"),
-          ce
-            ? (v.default.hydrate(l, f, se), (ce = !1))
-            : v.default.render(l, f, le),
+          le
+            ? (v.default.hydrate(l, f, fe), (le = !1))
+            : v.default.render(l, f, de),
           s
         );
       }
-      function ve(e) {
+      function ge(e) {
         var t = e.callback,
           r = e.children;
         return (
@@ -769,12 +811,12 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
             [t]
           ),
           h.default.useEffect(function() {
-            (0, N.default)(K);
+            (0, C.default)(ee);
           }, []),
           r
         );
       }
-      function ye(e) {
+      function be(e) {
         var t = e.callback;
         return (
           h.default.useLayoutEffect(
@@ -836,6 +878,59 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
             (0, o.getTTFB)(i));
       };
     },
+    oAez: function(e, t, r) {
+      "use strict";
+      var n = r("J4zp"),
+        o = r("284h");
+      (t.__esModule = !0), (t.RouteAnnouncer = u), (t.default = void 0);
+      var a = o(r("q1tI")),
+        i = r("nOHt");
+      function u() {
+        var e = (0, i.useRouter)().asPath,
+          t = (0, a.useState)(""),
+          r = n(t, 2),
+          o = r[0],
+          u = r[1],
+          c = (0, a.useRef)(!1);
+        return (
+          (0, a.useEffect)(
+            function() {
+              if (c.current) {
+                var t,
+                  r = document.querySelector("h1");
+                r && (t = r.innerText || r.textContent),
+                  t || (t = document.title ? document.title : e),
+                  u(t);
+              } else c.current = !0;
+            },
+            [e]
+          ),
+          a.default.createElement(
+            "p",
+            {
+              "aria-live": "assertive",
+              id: "__next-route-announcer__",
+              role: "alert",
+              style: {
+                border: 0,
+                clip: "rect(0 0 0 0)",
+                height: "1px",
+                margin: "-1px",
+                overflow: "hidden",
+                padding: 0,
+                position: "absolute",
+                width: "1px",
+                whiteSpace: "nowrap",
+                wordWrap: "normal"
+              }
+            },
+            o
+          )
+        );
+      }
+      var c = u;
+      t.default = c;
+    },
     p0hA: function(e, t, r) {
       (function(t) {
         e.exports = (function() {
@@ -915,7 +1010,7 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
                               (e(t), (o = t.value)));
                       };
                     },
-                    p = function() {
+                    d = function() {
                       return (
                         void 0 === t &&
                           ((t =
@@ -931,7 +1026,7 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
                         }
                       );
                     },
-                    d = function() {
+                    p = function() {
                       return (
                         r ||
                           (r = new Promise(function(e) {
@@ -970,7 +1065,7 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
                     (e.getFCP = function(e) {
                       var t,
                         r = o("FCP"),
-                        n = p(),
+                        n = d(),
                         i = a("paint", function(e) {
                           "first-contentful-paint" === e.name &&
                             e.startTime < n.timeStamp &&
@@ -983,7 +1078,7 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
                     }),
                     (e.getFID = function(e) {
                       var t = o("FID"),
-                        r = p(),
+                        r = d(),
                         n = function(e) {
                           e.startTime < r.timeStamp &&
                             ((t.value = e.processingStart - e.startTime),
@@ -1023,7 +1118,7 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
                           void 0 !== arguments[1] &&
                           arguments[1],
                         n = o("LCP"),
-                        i = p(),
+                        i = d(),
                         u = function(e) {
                           var r = e.startTime;
                           r < i.timeStamp
@@ -1038,7 +1133,7 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
                           n.isFinal ||
                             (c.takeRecords().map(u), (n.isFinal = !0), t());
                         };
-                        d().then(s), l(s, !0);
+                        p().then(s), l(s, !0);
                       }
                     }),
                     (e.getTTFB = function(e) {
@@ -1132,8 +1227,8 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
         s = r("/jkW"),
         l = r("hS4m"),
         f = r("X24+"),
-        p = a(r("Nh2W"));
-      function d(e) {
+        d = a(r("Nh2W"));
+      function p(e) {
         if ("/" !== e[0])
           throw new Error(
             'Route name should start with a "/", got "'.concat(e, '"')
@@ -1148,7 +1243,7 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
             (this.promisedSsgManifest = void 0),
             (this.promisedDevPagesManifest = void 0),
             (this.routeLoader = void 0),
-            (this.routeLoader = (0, p.default)(r)),
+            (this.routeLoader = (0, d.default)(r)),
             (this.buildId = t),
             (this.assetPrefix = r),
             (this.promisedSsgManifest = new Promise(function(e) {
@@ -1164,7 +1259,7 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
             {
               key: "getPageList",
               value: function() {
-                return (0, p.getClientBuildManifest)().then(function(e) {
+                return (0, d.getClientBuildManifest)().then(function(e) {
                   return e.sortedPages;
                 });
               }
@@ -1175,10 +1270,10 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
                 var o = this,
                   a = (0, l.parseRelativeUrl)(e),
                   i = a.pathname,
-                  p = a.query,
+                  d = a.query,
                   m = a.search,
                   h = (0, l.parseRelativeUrl)(t).pathname,
-                  v = d(i),
+                  v = p(i),
                   y = function(e) {
                     var t = (0, c.default)(
                       (0, f.removePathTrailingSlash)((0, u.addLocale)(e, n)),
@@ -1192,14 +1287,14 @@ _N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
                     );
                   },
                   g = (0, s.isDynamicRoute)(v),
-                  b = g ? (0, u.interpolateAs)(i, h, p).result : "";
+                  b = g ? (0, u.interpolateAs)(i, h, d).result : "";
                 return g ? b && y(b) : y(v);
               }
             },
             {
               key: "_isSsg",
               value: function(e) {
-                var t = d((0, l.parseRelativeUrl)(e).pathname);
+                var t = p((0, l.parseRelativeUrl)(e).pathname);
                 return this.promisedSsgManifest.then(function(e) {
                   return e.has(t);
                 });
Diff for index.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-07a9e16066ee6640e767.js"
+      href="/_next/static/chunks/main-ba9e4d02920db7a7d225.js"
       as="script"
     />
     <link
@@ -43,7 +43,7 @@
         "props": { "pageProps": {} },
         "page": "/",
         "query": {},
-        "buildId": "r-fwkieeeTXtf4Ipnzf8N",
+        "buildId": "ql0invn1_IchKFTu0lx5q",
         "isFallback": false,
         "gip": true
       }
@@ -53,7 +53,7 @@
       src="/_next/static/chunks/polyfills-ff94e68042added27a93.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-07a9e16066ee6640e767.js"
+      src="/_next/static/chunks/main-ba9e4d02920db7a7d225.js"
       async=""
     ></script>
     <script
@@ -77,11 +77,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/r-fwkieeeTXtf4Ipnzf8N/_buildManifest.js"
+      src="/_next/static/ql0invn1_IchKFTu0lx5q/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/r-fwkieeeTXtf4Ipnzf8N/_ssgManifest.js"
+      src="/_next/static/ql0invn1_IchKFTu0lx5q/_ssgManifest.js"
       async=""
     ></script>
   </body>
Diff for link.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-07a9e16066ee6640e767.js"
+      href="/_next/static/chunks/main-ba9e4d02920db7a7d225.js"
       as="script"
     />
     <link
@@ -32,7 +32,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/pages/link-c0d2c9648c4e376cde48.js"
+      href="/_next/static/chunks/pages/link-e6cee42c996f3df349eb.js"
       as="script"
     />
   </head>
@@ -48,7 +48,7 @@
         "props": { "pageProps": {} },
         "page": "/link",
         "query": {},
-        "buildId": "r-fwkieeeTXtf4Ipnzf8N",
+        "buildId": "ql0invn1_IchKFTu0lx5q",
         "isFallback": false,
         "gip": true
       }
@@ -58,7 +58,7 @@
       src="/_next/static/chunks/polyfills-ff94e68042added27a93.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-07a9e16066ee6640e767.js"
+      src="/_next/static/chunks/main-ba9e4d02920db7a7d225.js"
       async=""
     ></script>
     <script
@@ -78,15 +78,15 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/link-c0d2c9648c4e376cde48.js"
+      src="/_next/static/chunks/pages/link-e6cee42c996f3df349eb.js"
       async=""
     ></script>
     <script
-      src="/_next/static/r-fwkieeeTXtf4Ipnzf8N/_buildManifest.js"
+      src="/_next/static/ql0invn1_IchKFTu0lx5q/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/r-fwkieeeTXtf4Ipnzf8N/_ssgManifest.js"
+      src="/_next/static/ql0invn1_IchKFTu0lx5q/_ssgManifest.js"
       async=""
     ></script>
   </body>
Diff for withRouter.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-07a9e16066ee6640e767.js"
+      href="/_next/static/chunks/main-ba9e4d02920db7a7d225.js"
       as="script"
     />
     <link
@@ -43,7 +43,7 @@
         "props": { "pageProps": {} },
         "page": "/withRouter",
         "query": {},
-        "buildId": "r-fwkieeeTXtf4Ipnzf8N",
+        "buildId": "ql0invn1_IchKFTu0lx5q",
         "isFallback": false,
         "gip": true
       }
@@ -53,7 +53,7 @@
       src="/_next/static/chunks/polyfills-ff94e68042added27a93.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-07a9e16066ee6640e767.js"
+      src="/_next/static/chunks/main-ba9e4d02920db7a7d225.js"
       async=""
     ></script>
     <script
@@ -77,11 +77,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/r-fwkieeeTXtf4Ipnzf8N/_buildManifest.js"
+      src="/_next/static/ql0invn1_IchKFTu0lx5q/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/r-fwkieeeTXtf4Ipnzf8N/_ssgManifest.js"
+      src="/_next/static/ql0invn1_IchKFTu0lx5q/_ssgManifest.js"
       async=""
     ></script>
   </body>
Commit: 19accb6

@kodiakhq kodiakhq bot merged commit 85499b5 into canary Mar 15, 2021
@kodiakhq kodiakhq bot deleted the revert-23082-revert-20428-client-nav-a11y branch March 15, 2021 20:18
KittyGiraudel
KittyGiraudel reviewed Mar 30, 2021
View reviewed changes
packages/next/client/route-announcer.tsx
Comment on lines +23 to +30
const pageHeader = document.querySelector('h1')

if (pageHeader) {
newRouteAnnouncement = pageHeader.innerText || pageHeader.textContent
}
if (!newRouteAnnouncement) {
if (document.title) {
newRouteAnnouncement = document.title
Copy link
Contributor

@KittyGiraudel KittyGiraudel Mar 30, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking back at it, I think the logic might be a little backwards here.

In my opinion, we should use the document.title first if available, since this is what would happen in a non-SPA scenario upon page change. And if we do not have a page title, we should use the h1 (if any, of course). Right now it will announce the content of the h1, despite having a perfectly clean document.title, which I think is not the best experience.

Taking the home page of the Gorillas website as an example: the page title is “Home | Gorillas” while the h1 is “Groceries delivered in 10 minutes”. Navigating to the home page should announce “Home | Gorillas”, not the baseline (or catch phrase, or whatever we want to name it). And while in many cases, the h1 and the document.title would be in sync, I believe this is not always the case. In a case like this, we also don’t want the h1 to just contain “Home.”

Pinging @kyleboss who authored the original PR for opinions. :)

Edit: I’m happy opening an issue/PR if you think this is a valid concern.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Taking the liberty to ping @shuding and @olpeh as well for comments. ✨

@leerob leerob changed the title Revert "Revert "[a11y] Route Announcements"" [a11y] Route Announcements Mar 31, 2021
@KittyGiraudel KittyGiraudel mentioned this pull request Apr 13, 2021
Closed
flybayer pushed a commit to blitz-js/next.js that referenced this pull request Apr 29, 2021
@shuding
Revert "Revert "[a11y] Route Announcements"" (vercel#23086)
8af2015 
Reverts vercel#23082
@vercel vercel locked as resolved and limited conversation to collaborators Jan 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@KittyGiraudel KittyGiraudel KittyGiraudel left review comments

@ijjk ijjk ijjk approved these changes

@divmain divmain Awaiting requested review from divmain

@lfades lfades Awaiting requested review from lfades

@Timer Timer Awaiting requested review from Timer

@timneutkens timneutkens Awaiting requested review from timneutkens

Assignees
No one assigned
Labels
type: next
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@shuding @ijjk @KittyGiraudel