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

Handle tabbing to links in hovers #163879

Closed
wants to merge 2 commits into from
Closed

Handle tabbing to links in hovers #163879

wants to merge 2 commits into from

Conversation

rzhao271
Copy link
Contributor

Ref #159088

Demo showing that a user can tab to focus onto hover links after they click onto the hover to focus it

@rzhao271 rzhao271 added this to the October 2022 milestone Oct 17, 2022
@rzhao271 rzhao271 requested a review from Tyriar October 17, 2022 18:47
@rzhao271 rzhao271 self-assigned this Oct 17, 2022
Copy link
Member

@Tyriar Tyriar left a comment

Choose a reason for hiding this comment

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

Do you know how this problem is solved in the editor?

private readonly _hover: HoverWidget = this._register(new HoverWidget());

Would be good to consolidate so they both do the same thing

@rzhao271
Copy link
Contributor Author

contentHover doesn't have as many key handlers as the hoverService hover. I changed the latter so that it just disallows tab from hiding the hover. I also added changes to add a max height and vertical scrollbar to the hoverService hover.

@@ -443,6 +434,22 @@ export class HoverWidget extends Widget {
}
}

private adjustHoverMaxHeight(target: TargetRect): void {
let maxHeight = 250;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

There's probably a better starting value than this, especially for larger screens.

@rzhao271 rzhao271 changed the title Handle tabbing to links in focused hovers Handle tabbing to links in hovers Oct 18, 2022
@rzhao271 rzhao271 marked this pull request as ready for review October 18, 2022 08:49
@@ -443,6 +434,22 @@ export class HoverWidget extends Widget {
}
}

private adjustHoverMaxHeight(target: TargetRect): void {
let maxHeight = 250;
Copy link
Member

Choose a reason for hiding this comment

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

This is solving a different tracked issue, right? I think it should be out of scope of this PR as it will need more discussion, in particular I always thought that we would need to integrate a DomScrollableElement.

Copy link
Contributor Author

@rzhao271 rzhao271 Oct 18, 2022

Choose a reason for hiding this comment

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

This hoverWidget contains a base hoverWidget which has such an element. It's just that this hoverWidget clears out the maxHeight at https://github.com/microsoft/vscode/blob/main/src/vs/workbench/services/hover/browser/hoverWidget.ts#L231
And here's where this hoverWidget imports the other one that has the scrollbar https://github.com/microsoft/vscode/blob/main/src/vs/workbench/services/hover/browser/hoverWidget.ts#L14

Copy link
Member

Choose a reason for hiding this comment

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

That pixel high might cause problems in some scenarios though, and it would need to be tested to make sure the hover correctly flips when real estate isn't there

Comment on lines +115 to +117
if (e.key !== 'Tab') {
this.hideHover();
}
Copy link
Member

Choose a reason for hiding this comment

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

Instead of this, I think we should still be hiding the hover but only when the document.activeElement lies outside the hover. Otherwise this happens which doesn't see right:

Recording 2022-10-18 at 07 48 55

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Actually, being able to tab into the hover seems pretty good, because I'm not sure how else a user would think to use the keyboard to navigate into the hover
I also think that a tab loop might help, though that is a more complicated design. I can split the maxHeight changes into a separate PR.

@rzhao271
Copy link
Contributor Author

Closing in favour of #166657

@rzhao271 rzhao271 closed this Nov 22, 2022
@rzhao271 rzhao271 deleted the rzhao271/hover-focusin branch November 22, 2022 01:12
@github-actions github-actions bot locked and limited conversation to collaborators Jan 6, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants