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

Color contrast correction on control focus #1428

Closed
wants to merge 5 commits into from
Closed

Color contrast correction on control focus #1428

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2d4e7f3
fix(controls): color correction on contols
Jun 23, 2021
13089ba
fix(controls): fix opacity on controls-outline
matiaslionel Jun 24, 2021
da78c29
Merge branch 'master' into color-contrast-correction-on-control-focus
mergify[bot] Jun 25, 2021
8bcdf1e
fix(findbar): change focus to findButtonBar on close
Sep 16, 2021
c2543e5
Merge branch 'master' into color-contrast-correction-on-control-focus
matiaslionel Sep 16, 2021
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
5 changes: 3 additions & 2 deletions src/lib/viewers/doc/DocBaseViewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -410,8 +410,9 @@ class DocBaseViewer extends BaseViewer {
}

handleFindBarClose() {
if (this.docEl) {
this.docEl.focus(); // Prevent focus from transferring to the root document element
const el = document.querySelector('.bp-FindBarToggle'); // Transferring focus to the findBarToggle Button
Copy link
Collaborator

Choose a reason for hiding this comment

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

We generally want to avoid reaching into other components via the DOM. We also want to scope our selectors to the this.docEl element, since multiple Preview instances can appear on the same page.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Understood. Is there an interface get the element with the class mentioned in code?

Copy link
Collaborator

Choose a reason for hiding this comment

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

No, not currently. It will be a little tricky to add because the button is rendered by React and its reference isn't (and shouldn't be) exposed for programmatic use.

I suggest updating DocBaseViewer's toggleFindBar method to accept and store a reference to the "originator" element, which can be passed from DocControls. Then, when the findBar instance is closed, we can set focus back to the stored "originator" element. Does that make sense?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hi Jared. I realized that commits was on a wrong branch, so I did a new pull request.
This is the new PR:
#1429

if (el) {
el.focus();
}
}

Expand Down