Announcer: Part 1 #2362
Announcer: Part 1 #2362
Conversation
🦋 Changeset detectedLatest commit: 32774c3 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Size Change: +1.7 kB (+1.69%) Total Size: 103 kB
ℹ️ View Unchanged
|
A new build was pushed to Chromatic! 🚀https://5e1bf4b385e3fb0020b7073c-kghtbkjdwu.chromatic.com/ Chromatic results:
|
GeraldRequired Reviewers
Don't want to be involved in this pull request? Comment |
npm Snapshot: Published🎉 Good news!! We've packaged up the latest commit from this PR (b6fe9ab) and published all packages with changesets to npm. You can install the packages in webapp by running: ./services/static/dev/tools/deploy_wonder_blocks.js --tag="PR2362"Packages can also be installed manually by running: yarn add @khanacademy/wonder-blocks-<package-name>@PR2362 |
packages/wonder-blocks-announcer/src/components/send-message-button.tsx
Outdated
Show resolved
Hide resolved
| setTimeout(() => { | ||
| return announcer?.announce(message, level, removalDelay); | ||
| }, 100); |
There was a problem hiding this comment.
question: Is there a specific reason why we need to use this timeout? I wonder if there's another way to handle this case, but I don't think I have full context on that.
There was a problem hiding this comment.
It was for Safari and VoiceOver, but I can play around with it again to see if we really need it.
There was a problem hiding this comment.
Yes, this does seem important for Safari in particular! I made it configurable so it can be manipulated at runtime if necessary (especially for tests).
There was a problem hiding this comment.
I ended up removing this with the move to async! It wasn't needed in my testing for Safari/Voiceover.
We don't need this yet!
| timeoutDelay: { | ||
| control: "number", | ||
| type: "number", | ||
| description: "(milliseconds)", |
There was a problem hiding this comment.
I'm wondering if there's a way for us to use the function docs for the storybook docs! Normally we're able to get the prop docs automatically from setting component in this block, though this is different since these docs are for functions rather than components!
cc: @jandrade in case you have come across similar things before!
| } | ||
| /** | ||
| * Recover in the event regions get lost | ||
| * This happens in Storybook when saving a file: |
There was a problem hiding this comment.
Would this also happen in webapp with HMR?
There was a problem hiding this comment.
Yes, potentially! I'll do some testing on it.
| */ | ||
| createRegionWrapper(level: PolitenessLevel) { | ||
| const wrapper = document.createElement("div"); | ||
| wrapper.id = `wbAWrap-${level}`; |
There was a problem hiding this comment.
For curiosity, does the A in wbAWrap stand for Announcer or assertive? I'm assuming "Announcer", but just wanted to double check since we also have aIndex and pIndex!
There was a problem hiding this comment.
Yes, it was a prefix for Wonder Blocks Announcer! The full id for these ends up like: wbAWrap-polite. It's pretty arbitrary though, so I could change it. I debated on whether to keep these wrapper elements at all, as they aren't really being used for anything.
Why didn't Prettier do this automatically? I do not know...
1. Keeps announce from being called too frequently. We can play with the timeout duration. 2. Makes the returned IDREF more reliable in a browser.
1. Keeps announce from being called too frequently. We can play with the timeout duration. 2. Makes the returned IDREF more reliable in a browser.
The initial implementation for a live region component! I'm getting this draft PR up so I can test with the remote URL.
Jira Issue: https://khanacademy.atlassian.net/browse/WB-1768
Outstanding questions/work areas: