Skip to content

Handle tabbing to links in hovers#163879

Closed
rzhao271 wants to merge 2 commits intomainfrom
rzhao271/hover-focusin
Closed

Handle tabbing to links in hovers#163879
rzhao271 wants to merge 2 commits intomainfrom
rzhao271/hover-focusin

Conversation

@rzhao271
Copy link
Copy Markdown
Collaborator

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
Copy Markdown
Contributor

@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
Copy Markdown
Collaborator 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.

}

private adjustHoverMaxHeight(target: TargetRect): void {
let maxHeight = 250;
Copy link
Copy Markdown
Collaborator 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
}

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

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
Copy Markdown
Collaborator 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
Copy Markdown
Contributor

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
Copy Markdown
Contributor

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
Copy Markdown
Collaborator 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
Copy Markdown
Collaborator 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