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

report: make tools menu focus-able #9169

Merged
merged 2 commits into from
Jun 11, 2019
Merged

report: make tools menu focus-able #9169

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
46fa498
report: make tools menu focus-able
connorjclark Jun 10, 2019
831bfe7
comment
connorjclark Jun 10, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 12 additions & 6 deletions lighthouse-core/report/html/templates.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,6 +262,14 @@
height: var(--lh-tools-icon-size);
cursor: pointer;
margin-right: 5px;
/* This is actually a button element, but we want to style it like a transparent div. */
display: flex;
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
outline: inherit;
}
/*
Some features in the tools dropdown menu don't work in the DevTools
Expand All @@ -278,13 +286,10 @@
.dark .lh-tools__button svg {
filter: invert(1);
}
.lh-tools__button:focus,
.lh-tools__button.active {
outline: none;
}
.lh-tools__button.active + .lh-tools__dropdown {
opacity: 1;
clip: rect(-1px, 187px, 242px, -3px);
visibility: visible;
Copy link
Collaborator

Choose a reason for hiding this comment

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

anything extra this does for us compared to opacity?

Copy link
Collaborator Author

@connorjclark connorjclark Jun 10, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

visibility: none removes elements from focus consideration.

}
.lh-tools__dropdown {
position: absolute;
Expand All @@ -298,6 +303,7 @@
box-shadow: 1px 1px 3px #ccc;
min-width: 125px;
clip: rect(0, 164px, 0, 0);
visibility: hidden;
opacity: 0;
transition: all 200ms cubic-bezier(0,0,0.2,1);
}
Expand Down Expand Up @@ -366,12 +372,12 @@
<a href="" class="lh-topbar__url" target="_blank" rel="noopener"></a>

<div class="lh-tools">
<div class="report-icon report-icon--share lh-tools__button" title="Export report">
<button class="report-icon report-icon--share lh-tools__button" title="Export report">
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

If this stays div, would have to 1) use tabindex="0" and 2) wire our own key event listener so space/enter would toggle the tools menu.

<svg width="100%" height="100%" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
</svg>
</div>
</button>
<div class="lh-tools__dropdown">
<!-- TODO(i18n): localize tools dropdown -->
<a href="#" class="report-icon report-icon--print" data-action="print-summary">Print Summary</a>
Expand Down