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.

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

fix(tab-nav): content clickable for screen readers #1692

Merged
merged 2 commits into from
Mar 24, 2023

Conversation

acstll
Copy link
Collaborator

@acstll acstll commented Mar 24, 2023

Fixes #957

I removed the click handler from tab-nav.tsx and made the scale-tab-header emit a scale-select event.

@nowseemee let me know what you think!

@acstll acstll requested a review from nowseemee as a code owner March 24, 2023 12:52
@netlify
Copy link

netlify bot commented Mar 24, 2023

Deploy Preview for marvelous-moxie-a6e2fe ready!

Name Link
🔨 Latest commit 3bbd983
🔍 Latest deploy log https://app.netlify.com/sites/marvelous-moxie-a6e2fe/deploys/641d9e841d0d8c0008ed4721
😎 Deploy Preview https://deploy-preview-1692--marvelous-moxie-a6e2fe.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.


@State() hasFocus: boolean = false;

@Event({ eventName: 'scale-select' }) scaleSelect: EventEmitter;
Copy link
Collaborator

Choose a reason for hiding this comment

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

should we scope this event to avoid collisions?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

we could, but I think it makes sense to also have this event be "public", no?

handleSelect(event) {
const nextTab = event.target as HTMLScaleTabHeaderElement;
// Act only if it's a direct child
if (this.getAllEnabledTabs().includes(nextTab)) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

...or this takes care of collisions?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

this takes care of collisions with nested tabs… (an issue we had reported not long ago)

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

actually with nested anything haha

Copy link
Collaborator

@nowseemee nowseemee left a comment

Choose a reason for hiding this comment

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

LGTM, minor questions kinda only answered themselves

@nowseemee nowseemee merged commit 6d4c323 into main Mar 24, 2023
@nowseemee nowseemee deleted the arturo/scl-4-tab-navigation-content-outputed-as branch March 24, 2023 13:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Tab Navigation content outputed as clickable to screen readers
2 participants