Skip to content

TreeView: Add indication for "Loading" for screen readers #4969

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
Merged
merged 6 commits into from
Sep 27, 2024
Merged

TreeView: Add indication for "Loading" for screen readers #4969

merged 6 commits into from
Sep 27, 2024

Conversation

@TylerJDev
Copy link
Member

@TylerJDev TylerJDev commented Sep 16, 2024 •
edited
Loading

Closes https://github.com/github/primer/issues/3448

TreeView announces when content has loaded, but doesn't announce when content is loading. This PR adds "Loading" to TreeView's live region when content is actively loading.

Changelog

Changed

  • Adds "Loading" to live region in TreeView when loading asynchronous content

Rollout strategy

  • Patch release
  • Minor release
  • Major release; if selected, include a written rollout or migration plan
  • None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

@changeset-bot
Copy link

changeset-bot bot commented Sep 16, 2024 •
edited
Loading

🦋 Changeset detected

Latest commit: 3861150

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/react Patch

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

@github-actions github-actions bot temporarily deployed to storybook-preview-4969 September 16, 2024 17:00 Inactive
@github-actions
Copy link
Contributor

github-actions bot commented Sep 16, 2024 •
edited
Loading

size-limit report 📦

Path Size
packages/react/dist/browser.esm.js 98.01 KB (-0.05% 🔽)
packages/react/dist/browser.umd.js 98.32 KB (+0.04% 🔺)

@github-actions github-actions bot temporarily deployed to storybook-preview-4969 September 16, 2024 22:20 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-4969 September 16, 2024 22:24 Inactive
@TylerJDev TylerJDev marked this pull request as ready for review September 16, 2024 22:34
@TylerJDev TylerJDev requested a review from a team as a code owner September 16, 2024 22:34
@TylerJDev
Copy link
Member Author

@ericwbailey, I added you as a reviewer as I'd love your opinion on this addition to TreeView. This is basically announcing "Loading" via the live region when content is actively loading. Wasn't sure if there's context I'm missing on TreeView only announcing when content has loaded, instead of both or just when it's loading.

Stems from https://github.com/github/primer/issues/3448

francinelucca
francinelucca approved these changes Sep 24, 2024
View reviewed changes
Copy link
Member

@francinelucca francinelucca left a comment

Choose a reason for hiding this comment

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

🚀

packages/react/src/TreeView/TreeView.tsx Outdated
setLoadingFocused(false)
}
} else if (state === 'loading') {
if (!parentElement) return
Copy link
Member

Choose a reason for hiding this comment

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

nit: could bubble up as well and return early on 619, since other if statement checks and returns for same condition on 6221

Copy link
Member Author

Choose a reason for hiding this comment

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

I see! So adding if (!parentElement) return at the top rather than in both conditionals. Thank you for the suggestion!

@github-actions github-actions bot temporarily deployed to storybook-preview-4969 September 27, 2024 14:28 Inactive
@TylerJDev TylerJDev added this pull request to the merge queue Sep 27, 2024
Merged via the queue into main with commit 0cd6151 Sep 27, 2024
32 checks passed
@TylerJDev TylerJDev deleted the tylerjdev/adjust-loading-state-on-treeview branch September 27, 2024 15:08
@primer primer bot mentioned this pull request Sep 27, 2024
Merged
@primer primer bot mentioned this pull request Oct 18, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@francinelucca francinelucca francinelucca approved these changes

@langermank langermank Awaiting requested review from langermank langermank is a code owner automatically assigned from primer/engineer-reviewers

@ericwbailey ericwbailey Awaiting requested review from ericwbailey

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@TylerJDev @francinelucca