[Header] Add hidden live region to announce when the page title changes. #10958

mrcthms · 2023-10-11T16:05:31Z

WHY are these changes introduced?

Relates to https://github.com/Shopify/web/issues/101295

Merchants using a screen reader have no idea when pages change, so this PR adds a hidden live element which will announce to the merchant the page title followed by "This page is ready".

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

🎩 checklist

Tested on mobile
Tested on multiple browsers
Tested for accessibility
Updated the component's README.md with documentation changes
Tophatted documentation changes in the style guide

mrcthms · 2023-10-11T16:09:20Z

/snapit

github-actions · 2023-10-11T16:14:40Z

🫰✨ Thanks @mrcthms! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris@0.0.0-snapshot-release-20231011161219

yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20231011161219

yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20231011161219

mrcthms · 2023-11-07T14:44:16Z

/snapit

github-actions · 2023-11-07T14:47:29Z

🫰✨ Thanks @mrcthms! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-icons@0.0.0-snapshot-release-20231107144602

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20231107144602

yarn add @shopify/polaris@0.0.0-snapshot-release-20231107144602

yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20231107144602

yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20231107144602

mrcthms · 2023-11-07T15:09:51Z

/snapit

github-actions · 2023-11-07T15:14:41Z

🫰✨ Thanks @mrcthms! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-icons@0.0.0-snapshot-release-20231107151222

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20231107151222

yarn add @shopify/polaris@0.0.0-snapshot-release-20231107151222

yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20231107151222

yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20231107151222

mrcthms · 2023-11-08T14:33:29Z

/snapit

github-actions · 2023-11-08T14:36:39Z

🫰✨ Thanks @mrcthms! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-icons@0.0.0-snapshot-release-20231108143522

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20231108143522

yarn add @shopify/polaris@0.0.0-snapshot-release-20231108143522

yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20231108143522

yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20231108143522

mrcthms · 2023-11-22T09:53:08Z

/snapit

github-actions · 2023-11-22T09:56:44Z

🫰✨ Thanks @mrcthms! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-icons@0.0.0-snapshot-release-20231122095453

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20231122095453

yarn add @shopify/polaris@0.0.0-snapshot-release-20231122095453

yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20231122095453

yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20231122095453

chloerice · 2023-12-12T17:24:00Z

/snapit

github-actions · 2023-12-12T17:27:21Z

🫰✨ Thanks @chloerice! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-icons@0.0.0-snapshot-release-20231212172558

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20231212172558

yarn add @shopify/polaris@0.0.0-snapshot-release-20231212172558

yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20231212172558

yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20231212172558

chloerice

This works great @mrcthms, I tested with Voiceover in Chrome and Safari 🚀

Chrome	Safari
page-title-live-region-voiceover-chrome.mp4	page-title-live-region-voiceover-safari.mp4

.changeset/strong-moose-remain.md

Co-authored-by: Chloe Rice <chloerice@users.noreply.github.com>

@yurm04

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @shopify/polaris@12.5.0 ### Minor Changes - [#11275](#11275) [`4a7e090bc`](4a7e090) Thanks [@yurm04](https://github.com/yurm04)! - Updated semantic tokens `fill-info-secondary`, `text-info`, `fill-success-secondary`, `fill-caution-secondary`, `fill-critical-secondary`. - [#10958](#10958) [`5c183e0e1`](5c183e0) Thanks [@mrcthms](https://github.com/mrcthms)! - Added a live region to the `Page` `Header` to announce the `title` after navigation changes ### Patch Changes - [#11338](#11338) [`4ddba49c4`](4ddba49) Thanks [@alex-page](https://github.com/alex-page)! - `<Toast>` Fix icon color to properly inherit the parent color - Updated dependencies \[[`4a7e090bc`](4a7e090)]: - @shopify/polaris-tokens@8.4.0 ## @shopify/polaris-tokens@8.4.0 ### Minor Changes - [#11275](#11275) [`4a7e090bc`](4a7e090) Thanks [@yurm04](https://github.com/yurm04)! - Updated semantic tokens `fill-info-secondary`, `text-info`, `fill-success-secondary`, `fill-caution-secondary`, `fill-critical-secondary`. ## @shopify/polaris-migrator@0.26.6 ### Patch Changes - Updated dependencies \[[`4a7e090bc`](4a7e090)]: - @shopify/polaris-tokens@8.4.0 - @shopify/stylelint-polaris@15.0.6 ## @shopify/stylelint-polaris@15.0.6 ### Patch Changes - Updated dependencies \[[`4a7e090bc`](4a7e090)]: - @shopify/polaris-tokens@8.4.0 ## polaris-for-vscode@0.9.2 ### Patch Changes - Updated dependencies \[[`4a7e090bc`](4a7e090)]: - @shopify/polaris-tokens@8.4.0 ## polaris.shopify.com@0.61.3 ### Patch Changes - [#11334](#11334) [`ebff4315b`](ebff431) Thanks [@sarahill](https://github.com/sarahill)! - Added color token documentation - Updated dependencies \[[`4ddba49c4`](4ddba49), [`4a7e090bc`](4a7e090), [`5c183e0e1`](5c183e0)]: - @shopify/polaris@12.5.0 - @shopify/polaris-tokens@8.4.0 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

…es. (Shopify#10958) ### WHY are these changes introduced? Relates to Shopify/web#101295 Merchants using a screen reader have no idea when pages change, so this PR adds a hidden live element which will announce to the merchant the page title followed by "This page is ready". ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) </details> ### 🎩 checklist - [x] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [x] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [x] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [x] Updated the component's `README.md` with documentation changes - [x] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide --------- Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: Chloe Rice <chloerice@users.noreply.github.com>

sophschneider force-pushed the v12.x.x branch from 6386a1b to 18b37f8 Compare November 2, 2023 15:04

Base automatically changed from v12.x.x to main November 2, 2023 19:39

mrcthms force-pushed the mrcthms-live-title-region branch from 4ccf9e0 to 9dd30e3 Compare November 7, 2023 14:42

mrcthms and others added 6 commits November 22, 2023 09:52

chore: add a11y region for title of page

d5f4f93

chore: add changeset

a11592e

Update 14 translation files

e3e9d6a

Update 6 translation files

e57470b

chore: use correct path for translation

4e788eb

chore: add override prop

9283526

mrcthms force-pushed the mrcthms-live-title-region branch from 62359db to 9283526 Compare November 22, 2023 09:52

mrcthms requested a review from a team November 28, 2023 13:25

chloerice approved these changes Dec 12, 2023

View reviewed changes

.changeset/strong-moose-remain.md Outdated Show resolved Hide resolved

chloerice added Component 2023 Contribution tracking for 2023 Contribution Tracking contribution in conjuction with year and type, e.g., "Component" + "Contribution" + "2023" labels Dec 12, 2023

Update .changeset/strong-moose-remain.md

1ab20dd

Co-authored-by: Chloe Rice <chloerice@users.noreply.github.com>

mrcthms merged commit 5c183e0 into main Dec 13, 2023
12 checks passed

mrcthms deleted the mrcthms-live-title-region branch December 13, 2023 10:11

shopify-github-actions-access bot mentioned this pull request Dec 13, 2023

Version Packages #11335

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Header] Add hidden live region to announce when the page title changes. #10958

[Header] Add hidden live region to announce when the page title changes. #10958

mrcthms commented Oct 11, 2023

mrcthms commented Oct 11, 2023

github-actions bot commented Oct 11, 2023

mrcthms commented Nov 7, 2023

github-actions bot commented Nov 7, 2023

mrcthms commented Nov 7, 2023

github-actions bot commented Nov 7, 2023

mrcthms commented Nov 8, 2023

github-actions bot commented Nov 8, 2023

mrcthms commented Nov 22, 2023

github-actions bot commented Nov 22, 2023

chloerice commented Dec 12, 2023

github-actions bot commented Dec 12, 2023

chloerice left a comment •

edited

Loading

[Header] Add hidden live region to announce when the page title changes. #10958

[Header] Add hidden live region to announce when the page title changes. #10958

Conversation

mrcthms commented Oct 11, 2023

WHY are these changes introduced?

How to 🎩

🎩 checklist

mrcthms commented Oct 11, 2023

github-actions bot commented Oct 11, 2023

mrcthms commented Nov 7, 2023

github-actions bot commented Nov 7, 2023

mrcthms commented Nov 7, 2023

github-actions bot commented Nov 7, 2023

mrcthms commented Nov 8, 2023

github-actions bot commented Nov 8, 2023

mrcthms commented Nov 22, 2023

github-actions bot commented Nov 22, 2023

chloerice commented Dec 12, 2023

github-actions bot commented Dec 12, 2023

chloerice left a comment • edited Loading

Choose a reason for hiding this comment

chloerice left a comment •

edited

Loading