-
Notifications
You must be signed in to change notification settings - Fork 178
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
MWPW-142622: [Project PEP] Close button focus #1897
MWPW-142622: [Project PEP] Close button focus #1897
Conversation
…y loaded (adobecom#1882) * hotfix * refactor: changed loader animation logic * update * revert update * more gpu acceleration for pep loader * hotfix * hotfix
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## project-pep #1897 +/- ##
==============================================
Coverage ? 95.66%
==============================================
Files ? 159
Lines ? 41289
Branches ? 0
==============================================
Hits ? 39499
Misses ? 1790
Partials ? 0 ☔ View full report in Codecov by Sentry. |
@@ -138,6 +138,10 @@ | |||
left: 12px; | |||
} | |||
|
|||
.appPrompt-close:focus { | |||
outline: 2px solid #157AF3; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good to me, however I'm wondering whether we should use variables for colours. Maybe @overmyheadandbody has additional feedback on this.
Also, one thing I noticed: the focus order is "cancel" button, then "X", even though the "X" mark is higher than the "cancel" button. Is this intended?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The focus order should be indeed different, but that's addressed in another pending PR
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We don't set any other focus colors on any of the Gnav elements. This is intentional, as we want all page elements to be consistent in their focused state. Since a lot of other elements don't have an explicit value, it means we ultimately rely on the browser to set this color, through its default :focus-visible
value. Setting an explicit value might break this consistency for this particular element. Is there no other way of handling this issue, but maintain the user agent defaults?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@overmyheadandbody I'll investigate further and see if there's a way without setting the focus color 👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I found a solution that preserves the user agent focus color, it's a bit off on safari, but it's better than what we had before
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
QA verified , PR can be merged
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This comes with the risk of some consistency issues, maybe we could find another way of handling this
@@ -138,6 +138,10 @@ | |||
left: 12px; | |||
} | |||
|
|||
.appPrompt-close:focus { | |||
outline: 2px solid #157AF3; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We don't set any other focus colors on any of the Gnav elements. This is intentional, as we want all page elements to be consistent in their focused state. Since a lot of other elements don't have an explicit value, it means we ultimately rely on the browser to set this color, through its default :focus-visible
value. Setting an explicit value might break this consistency for this particular element. Is there no other way of handling this issue, but maintain the user agent defaults?
957f32c
to
6a8efc7
Compare
…wpw-142622-project-pep
* [MWPW-139990] PEP prompt * MWPW-142617: Microsoft Edge & Chrome Win - progress bar not completely loaded (adobecom#1882) * hotfix * refactor: changed loader animation logic * update * revert update * more gpu acceleration for pep loader * hotfix * hotfix * [MWPW-141023] PEP authoring (adobecom#1889) * hotfix: blue outline on close button when focused * hotfix --------- Co-authored-by: Rares Munteanu <overmyheadandbody@gmail.com>
* [MWPW-139990] PEP prompt * MWPW-142617: Microsoft Edge & Chrome Win - progress bar not completely loaded (#1882) * hotfix * refactor: changed loader animation logic * update * revert update * more gpu acceleration for pep loader * hotfix * hotfix * [MWPW-141023] PEP authoring (#1889) * hotfix: blue outline on close button when focused * hotfix --------- Co-authored-by: Rares Munteanu <overmyheadandbody@gmail.com>
* [MWPW-139990] PEP prompt * MWPW-142617: Microsoft Edge & Chrome Win - progress bar not completely loaded (#1882) * hotfix * refactor: changed loader animation logic * update * revert update * more gpu acceleration for pep loader * hotfix * hotfix * [MWPW-141023] PEP authoring (#1889) * hotfix: blue outline on close button when focused * hotfix --------- Co-authored-by: Rares Munteanu <overmyheadandbody@gmail.com>
* [MWPW-139990] PEP prompt * MWPW-142617: Microsoft Edge & Chrome Win - progress bar not completely loaded (adobecom#1882) * hotfix * refactor: changed loader animation logic * update * revert update * more gpu acceleration for pep loader * hotfix * hotfix * [MWPW-141023] PEP authoring (adobecom#1889) * hotfix: blue outline on close button when focused * hotfix --------- Co-authored-by: Rares Munteanu <overmyheadandbody@gmail.com>
* [MWPW-139990] PEP prompt * MWPW-142617: Microsoft Edge & Chrome Win - progress bar not completely loaded (#1882) * hotfix * refactor: changed loader animation logic * update * revert update * more gpu acceleration for pep loader * hotfix * hotfix * [MWPW-141023] PEP authoring (#1889) * hotfix: blue outline on close button when focused * hotfix --------- Co-authored-by: Rares Munteanu <overmyheadandbody@gmail.com>
* [MWPW-139990] PEP prompt * MWPW-142617: Microsoft Edge & Chrome Win - progress bar not completely loaded (#1882) * hotfix * refactor: changed loader animation logic * update * revert update * more gpu acceleration for pep loader * hotfix * hotfix * [MWPW-141023] PEP authoring (#1889) * MWPW-141021: Project PEP Accessibility Requirements (#1853) * [MWPW-139990] PEP prompt * pep accessibility requirements * hotfix * hotfixes * initial focus on close icon * implementing feedback * hotfix * [MWPW-139990] PEP prompt * MWPW-142617: Microsoft Edge & Chrome Win - progress bar not completely loaded (#1882) * hotfix * refactor: changed loader animation logic * update * revert update * more gpu acceleration for pep loader * hotfix * hotfix * [MWPW-141023] PEP authoring (#1889) * implementing feedback * css variables * hotfix: moved css variables * hotfix --------- Co-authored-by: Rares Munteanu <overmyheadandbody@gmail.com> * MWPW-142622: [Project PEP] Close button focus (#1897) * [MWPW-139990] PEP prompt * MWPW-142617: Microsoft Edge & Chrome Win - progress bar not completely loaded (#1882) * hotfix * refactor: changed loader animation logic * update * revert update * more gpu acceleration for pep loader * hotfix * hotfix * [MWPW-141023] PEP authoring (#1889) * hotfix: blue outline on close button when focused * hotfix --------- Co-authored-by: Rares Munteanu <overmyheadandbody@gmail.com> * MWPW-141020: [Project PEP] Implement Analytics Enablement (#1951) * pep analytics * hotfix * hotfix * hotfix * removed capitalization from analytics label * [MWPW-141050] Fetch profile for PEP * [MWPW-141025] Integrate XLG with PEP * [MWPW-142625] PEP relative to App Switcher * MWPW-144108: Project PEP unit tests (#2136) * unit tests for pep * fixes for gnav unit tests * optimizing pep unit tests * MWPW-146582: PEP fixes (#2144) * added aria-label attribute to pep close button * force load imslib.min.js * revert force load imslib.min.js * changed aria label for close button * pep final touches * [MWPW-147145] Allow SVG in PEP Prompt; change redirect method --------- Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com> Co-authored-by: Robert Bogos <robert.adobe.github@gmail.com>
Description
This PR fixes the bug where the blue focus outline of the PEP X button does not show, when PEP is initiated after the region picker modal.
Related Issue
Resolves: MWPW-142622
Testing instructions
Screenshots (if appropriate):
Test URLs
Milo: