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.

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

Add ':focus' indicator in element start tag #329

Merged
merged 2 commits into from
May 17, 2020
Merged

Add ':focus' indicator in element start tag #329

merged 2 commits into from
May 17, 2020

Conversation

Munter
Copy link
Member

@Munter Munter commented May 12, 2020

This adds a :focus indicator inside an elements start tag in the inspection output if the element is currently focused.

The <body> tag is explicitly exempt from this addition, since it is the initial focus element and would likely add surprising output to tests that do not deal with moving focus around.

Example output:

<div role="tablist">
    <button id="tabs-1-0" aria-selected="true" role="tab" tabindex="0">...</button>
    <button id="tabs-1-1" aria-selected="false" role="tab" tabindex="-1">...</button>
    <button id="tabs-1-2" aria-selected="false" role="tab" tabindex="-1" :focus>...</button>
</div>

See focus testing thread starting at https://gitter.im/unexpectedjs/unexpected?at=5eba63cbfaa128031cc7f9e2

@coveralls
Copy link

coveralls commented May 12, 2020 •
edited
Loading

Pull Request Test Coverage Report for Build 1379

  • 7 of 7 (100.0%) changed or added relevant lines in 1 file are covered.
  • No unchanged relevant lines lost coverage.
  • Overall coverage increased (+0.06%) to 93.562%
Totals Coverage Status
Change from base Build 1370: 0.06%
Covered Lines: 697
Relevant Lines: 727
💛 - Coveralls

@Munter Munter force-pushed the feature/show-focused-indicator branch from e6da93e to f3e67fa Compare May 12, 2020 14:04
@Munter
Copy link
Member Author

Munter commented May 12, 2020

I'm a bit confused about those browser errors. I am not able to recreate the chrome error with npm run test-browser locally. And the IE error is completely obscure to me. Maybe you can see a pattern that I can't?

@Munter Munter requested a review from sunesimonsen May 12, 2020 15:43
@papandreou
Copy link
Member

papandreou commented May 12, 2020 •
edited
Loading

@Munter, seems like IE11 either doesn't like us accessing element.ownerDocument or document.activeElement. Wrapping it in a try...catch gets it to: https://travis-ci.org/github/unexpectedjs/unexpected-dom/jobs/686323575

@Munter
Copy link
Member Author

Munter commented May 13, 2020

Hmm. I was hoping to avoid domElement.matches(':focus'), because it has to be slower than an identity comparison. But maybe I can add that as the fallback in a try/catch

@Munter
Use actual browser document in focus handling tests and guard against…
392e71b 
… cases where the user doesn't use an actual browser document
@Munter Munter requested a review from papandreou May 14, 2020 10:19
papandreou
papandreou approved these changes May 17, 2020
View reviewed changes
Copy link
Member

@papandreou papandreou left a comment

Choose a reason for hiding this comment

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

LGTM 🚀

@Munter Munter merged commit a30583d into master May 17, 2020
@Munter Munter deleted the feature/show-focused-indicator branch May 17, 2020 14:17
@Munter
Copy link
Member Author

Munter commented May 17, 2020

Released in v4.18.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@papandreou papandreou papandreou approved these changes

@sunesimonsen sunesimonsen Awaiting requested review from sunesimonsen

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
@Munter @coveralls @papandreou