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.

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

Excluding modals from Active link check #1942

Merged
merged 11 commits into from
Mar 19, 2024

Conversation

@bandana147 bandana147 added run-nala Run Nala Test Automation against PR needs-verification PR requires E2E testing by a reviewer labels Feb 29, 2024
Copy link
Contributor

aem-code-sync bot commented Feb 29, 2024

Page Scores Audits Google
/drafts/Sou/ae-test-page-localnav-twp?martech=off PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI

Copy link

codecov bot commented Feb 29, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.29%. Comparing base (dc2f291) to head (437e22a).

Additional details and impacted files
@@            Coverage Diff             @@
##            stage    #1942      +/-   ##
==========================================
- Coverage   96.32%   96.29%   -0.03%     
==========================================
  Files         166      166              
  Lines       42323    42321       -2     
==========================================
- Hits        40767    40754      -13     
- Misses       1556     1567      +11     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Comment on lines 250 to 254
const linkElements = area.querySelectorAll('a:not([data-modal-hash])');
activeLink = [...linkElements].find((el) => {
const regex = new RegExp(`^${path}(\\?[^#]*)?(#.*)?$`);
return regex.test(el.href);
});
Copy link
Contributor

Choose a reason for hiding this comment

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

This could be simplified if linkElements and regex are not cached:

activeLink = [...area.querySelectorAll('a:not([data-modal-hash])')].find((el) => {
    return new RegExp(`^${path}(\\?[^#]*)?(#.*)?$`).test(el.href);
});

Copy link
Contributor

Choose a reason for hiding this comment

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

And even a little further, since it doesn't need the return for the inner arrow function

activeLink = [...area.querySelectorAll('a:not([data-modal-hash])')].find((el) => new RegExp(`^${path}(\\?[^#]*)?(#.*)?$`).test(el.href));

Copy link
Contributor

@mokimo mokimo left a comment

Choose a reason for hiding this comment

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

Would be nice if you consider Roberts feedback, but LGTM! Thanks for raising the PR 🚀

Copy link
Contributor

@overmyheadandbody overmyheadandbody left a comment

Choose a reason for hiding this comment

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

Agree with what @robert-bogos and @mokimo suggested and I have another thought worth looking into.

@@ -247,7 +247,11 @@ export const [hasActiveLink, setActiveLink, getActiveLink] = (() => {

[`${origin}${pathname}`, pathname].forEach((path) => {
Copy link
Contributor

Choose a reason for hiding this comment

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

With this new approach, I'd test a bit more to justify the necessity of the pathname check. Say we have the following element: <a href="/path/to/page">Page</a>. We needed the pathname check for the query selector, which would have been a[href = '/path/to/page']. So we were checking an attribute value, which could have been either a full URL or just a path. Moving to the el.href approach, pathname might be irrelevant, as its result would always be a full URL.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, I agree. I will make the necessary change and update the PR.

});
const activeLink = [
...area.querySelectorAll('a:not([data-modal-hash])'),
].find((el) => new RegExp(`^${`${origin}${pathname}`}(\\?[^#]*)?(#.*)?$`).test(el.href));
Copy link
Contributor

Choose a reason for hiding this comment

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

I just realized that there may be some potential for improvement for the regular expression here. Let's just use this page's URL as an example.

var { origin, pathname } = window.location;
var regex = new RegExp(`^${`${origin}${pathname}`}(\\?[^#]*)?(#.*)?$`);
// regex will be: /^https:\/\/github.com\/adobecom\/milo\/pull\/1942\/files(\?[^#]*)?(#.*)?$/

The issue is that ., which in regular expression terms translates to any character. So regex.test('https://githubXcom/adobecom/milo/pull/1942/files'); would actually be true.

One way to solve this would be to call an additional .replaceAll('.', '\\.') on the string. Another would be to replace the regular expression with

const url = `${origin}${pathname}`;
const matches = endsWith(url) || startsWith(`${url}?`)  || startsWith(`${url}#`); // to be adapted, just a quick example

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@overmyheadandbody Thanks for the catch with . Will update the code as discussed.

Copy link
Contributor

@overmyheadandbody overmyheadandbody left a comment

Choose a reason for hiding this comment

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

Thanks for integrating the changes, looks good!

@spadmasa spadmasa added verified PR has been E2E tested by a reviewer and removed needs-verification PR requires E2E testing by a reviewer labels Mar 14, 2024
@salonijain3 salonijain3 added the high priority Why is this a high priority? Blocker? Critical? Dependency? label Mar 19, 2024
@salonijain3
Copy link
Contributor

I have added the label "high priority" as this is a critical bug : https://jira.corp.adobe.com/browse/MWPW-143213

@vhargrave vhargrave merged commit e909bc6 into adobecom:stage Mar 19, 2024
15 of 16 checks passed
Blainegunn added a commit that referenced this pull request Mar 19, 2024
* MWPW-143648 - [Action Item] Fix float icon position (#1957)

* display main image block and add inline flex to floated icon

* revert inline flex rull on floated icon

---------

Co-authored-by: Blaine Gunn <Blainegunn@gmail.com>

* MWPW-142798 + MWPW-142872: Made the height-fit-content class to be set automatically (#1946)

fixed height auto adjustment and iframe styles in modal

Co-authored-by: Blaine Gunn <Blainegunn@gmail.com>

* MWPW-144575: Fix for commerce modal height (#2014)

There's a potential CSO lurking

* [MWPW-144516] Handle cross cloud menu block error (#2006)

* fix(MWPW-142248): Accessibility for carousels containing focusable elements. (#1901)

* MWPW-142248

* fixed linting errors

* revert package.json

* revert package_lock.json

* Accessibility for the show-x variants of carousel

* test cases for code coverage

---------

Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com>
Co-authored-by: Blaine Gunn <Blainegunn@gmail.com>

* MWPW-144575: Modal-Iframe for apps-whats-included is broken for Desktop resolutions (#2016)

fixed CSS selector commerce-frame section and fragment

* Sync stage with main (#2025)

* [Release] Stage to Main (#2005)

MWPW-143673: Load Milo fragment modals from co links #1972
MWPW-142894: fragments can lead to invalid html #1937
High Priority
Caas-Marquee: Fixes integration with martech.js issues #2003
MWPW-143591 Fix Contextual Search Duplicates #1990
Zero Impact
MWPW-143708 and MWPW-143712 add kodiak auto-ticketing #2002
---------
Co-authored-by: J. Casalino <casalino@adobe.com>
Co-authored-by: Megan Thomas <methomas@adobe.com>
Co-authored-by: ilyas Stéphane Türkben <tuerkben@adobe.com>
Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com>
Co-authored-by: cmiqueo <64917520+cmiqueo@users.noreply.github.com>

* [Release] Stage to Main (#2010)


* Update martech.main.standard.min.js (#2008)

---------
Co-authored-by: Chris Peyer <chrischrischris@users.noreply.github.com>

* fix merge empty line

---------

Co-authored-by: ilyas Stéphane Türkben <tuerkben@adobe.com>
Co-authored-by: Blaine Gunn <Blainegunn@gmail.com>
Co-authored-by: J. Casalino <casalino@adobe.com>
Co-authored-by: Megan Thomas <methomas@adobe.com>
Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com>
Co-authored-by: cmiqueo <64917520+cmiqueo@users.noreply.github.com>

* remove extra line

* MWPW-144575: fix for the modal duplication (#2021)

added checking to not create a modal when it is already present in DOM

Co-authored-by: Axel Cureno Basurto <axelcureno@gmail.com>

* [MWPW-137148] [PERFORMANCE] Load IMS from the same domain (#1996)

* Host imslib from milo libs/deps

* Fix formatting

* Minor script cleanup

* wp

* Serve ims, launch & launch development locally. Rewrite the workflow

* Remove launch dependency for now

---------

Co-authored-by: Blaine Gunn <Blainegunn@gmail.com>

* MWPW-142003: Mini Compare Chart Mobile styling (#1989)

Co-authored-by: ilyas Stéphane Türkben <isturkben@gmail.com>
Co-authored-by: Blaine Gunn <Blainegunn@gmail.com>

* MWPW-143202 firefox gnav not appearing bug (#1969)

* try to catch error

* test without breaking things

* catch akamai failure

* add try catch

* attempt 2 to catch jsonp failure

* cleanup

* fix geo2 source

* test using proper fetch

* MWPW-143202 remove old jsonp request

* MWPW-143202 catch case if resp is not ok

* MWPW-143202 prevent caching of geo2 request

---------

Co-authored-by: Blaine Gunn <Blainegunn@gmail.com>

* Excluding modals from Active link check (#1942)

* Fix: Excluding modals from Active link check

---------

Co-authored-by: Bandana Laishram <blaishram@Bandanas-MacBook-Pro.local>

* [MWPW-144602] Ensure DNT functionality in top nav (#2020)

* Revert "MWPW-142003: Mini Compare Chart Mobile styling" (#2041)

Revert "MWPW-142003: Mini Compare Chart Mobile styling (#1989)"

This reverts commit 944ae19.

---------

Co-authored-by: Sean Archibeque <sean.archibeque@gmail.com>
Co-authored-by: Mira Fedas <30750556+mirafedas@users.noreply.github.com>
Co-authored-by: Axel Cureno Basurto <axelcureno@gmail.com>
Co-authored-by: Rares Munteanu <overmyheadandbody@gmail.com>
Co-authored-by: sharath-kannan <138484653+sharath-kannan@users.noreply.github.com>
Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com>
Co-authored-by: Victor Hargrave <115231412+vhargrave@users.noreply.github.com>
Co-authored-by: ilyas Stéphane Türkben <tuerkben@adobe.com>
Co-authored-by: J. Casalino <casalino@adobe.com>
Co-authored-by: Megan Thomas <methomas@adobe.com>
Co-authored-by: cmiqueo <64917520+cmiqueo@users.noreply.github.com>
Co-authored-by: Okan Sahin <39759830+mokimo@users.noreply.github.com>
Co-authored-by: ilyas Stéphane Türkben <isturkben@gmail.com>
Co-authored-by: Bandana Laishram <bandanalaishram@gmail.com>
Co-authored-by: Bandana Laishram <blaishram@Bandanas-MacBook-Pro.local>
Blainegunn added a commit that referenced this pull request Mar 20, 2024
* MWPW-143648 - [Action Item] Fix float icon position (#1957)

* display main image block and add inline flex to floated icon

* revert inline flex rull on floated icon

---------

Co-authored-by: Blaine Gunn <Blainegunn@gmail.com>

* MWPW-142798 + MWPW-142872: Made the height-fit-content class to be set automatically (#1946)

fixed height auto adjustment and iframe styles in modal

Co-authored-by: Blaine Gunn <Blainegunn@gmail.com>

* MWPW-144575: Fix for commerce modal height (#2014)

There's a potential CSO lurking

* [MWPW-144516] Handle cross cloud menu block error (#2006)

* fix(MWPW-142248): Accessibility for carousels containing focusable elements. (#1901)

* MWPW-142248

* fixed linting errors

* revert package.json

* revert package_lock.json

* Accessibility for the show-x variants of carousel

* test cases for code coverage

---------

Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com>
Co-authored-by: Blaine Gunn <Blainegunn@gmail.com>

* MWPW-144575: Modal-Iframe for apps-whats-included is broken for Desktop resolutions (#2016)

fixed CSS selector commerce-frame section and fragment

* Sync stage with main (#2025)

* [Release] Stage to Main (#2005)

MWPW-143673: Load Milo fragment modals from co links #1972
MWPW-142894: fragments can lead to invalid html #1937
High Priority
Caas-Marquee: Fixes integration with martech.js issues #2003
MWPW-143591 Fix Contextual Search Duplicates #1990
Zero Impact
MWPW-143708 and MWPW-143712 add kodiak auto-ticketing #2002
---------
Co-authored-by: J. Casalino <casalino@adobe.com>
Co-authored-by: Megan Thomas <methomas@adobe.com>
Co-authored-by: ilyas Stéphane Türkben <tuerkben@adobe.com>
Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com>
Co-authored-by: cmiqueo <64917520+cmiqueo@users.noreply.github.com>

* [Release] Stage to Main (#2010)


* Update martech.main.standard.min.js (#2008)

---------
Co-authored-by: Chris Peyer <chrischrischris@users.noreply.github.com>

* fix merge empty line

---------

Co-authored-by: ilyas Stéphane Türkben <tuerkben@adobe.com>
Co-authored-by: Blaine Gunn <Blainegunn@gmail.com>
Co-authored-by: J. Casalino <casalino@adobe.com>
Co-authored-by: Megan Thomas <methomas@adobe.com>
Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com>
Co-authored-by: cmiqueo <64917520+cmiqueo@users.noreply.github.com>

* remove extra line

* MWPW-144575: fix for the modal duplication (#2021)

added checking to not create a modal when it is already present in DOM

Co-authored-by: Axel Cureno Basurto <axelcureno@gmail.com>

* [MWPW-137148] [PERFORMANCE] Load IMS from the same domain (#1996)

* Host imslib from milo libs/deps

* Fix formatting

* Minor script cleanup

* wp

* Serve ims, launch & launch development locally. Rewrite the workflow

* Remove launch dependency for now

---------

Co-authored-by: Blaine Gunn <Blainegunn@gmail.com>

* MWPW-142003: Mini Compare Chart Mobile styling (#1989)

Co-authored-by: ilyas Stéphane Türkben <isturkben@gmail.com>
Co-authored-by: Blaine Gunn <Blainegunn@gmail.com>

* MWPW-143202 firefox gnav not appearing bug (#1969)

* try to catch error

* test without breaking things

* catch akamai failure

* add try catch

* attempt 2 to catch jsonp failure

* cleanup

* fix geo2 source

* test using proper fetch

* MWPW-143202 remove old jsonp request

* MWPW-143202 catch case if resp is not ok

* MWPW-143202 prevent caching of geo2 request

---------

Co-authored-by: Blaine Gunn <Blainegunn@gmail.com>

* Excluding modals from Active link check (#1942)

* Fix: Excluding modals from Active link check

---------

Co-authored-by: Bandana Laishram <blaishram@Bandanas-MacBook-Pro.local>

* [MWPW-144602] Ensure DNT functionality in top nav (#2020)

* Revert "MWPW-142003: Mini Compare Chart Mobile styling" (#2041)

Revert "MWPW-142003: Mini Compare Chart Mobile styling (#1989)"

This reverts commit 944ae19.

* MWPW-144026 Update Twitter Icon to X (#2030)

* Add support for bold as header if no header (#1997)

* Add support for bold as header if no header

* Add tracking to modal close button

* separate branches

* moving if on strong or B

---------

Co-authored-by: Blaine Gunn <Blainegunn@gmail.com>

* [MWPW-144112] send-to-caas: point to prod end-point (#1995)

[MWPW-144112] point to prod end-point

* [MILO] Allow svg or media files to be located in a fragments folder (#1966)

* fix if svg is located in fragments folder

* update to handle any file that is not a fragment

* unit test

* better placement

* update existing file reference

no idea how this was working with the incorrect reference

* add carve out for mp4

Noticed that there is code in this if statement for mp4 in the fragments folder that can't be reached

* save match result so I do not have to match twice

* update nameSplit to hasExtension per Slack request

* update hasExtension to use include instead of length

---------

Co-authored-by: Blaine Gunn <Blainegunn@gmail.com>

* Consolidate MEP PR's for stage (#1975)

* stash

* start retro support (need to adjust replacefragment)

* save progress

* progress

* stash

* solid state

* reverse mep preview check

* update file for insertScript

* organized unit test files

* unit tests working

* remove file added by override

* add coverage to unit test

* PR comments

* use "section" to mean "section1"

* no longer need to pass mep to handleFragmentCommand

* Update libs/features/personalization/personalization.js

Co-authored-by: Chris Peyer <chrischrischris@users.noreply.github.com>

* Update libs/features/personalization/personalization.js

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* add replace action with fragment selector not on page

* moving fragment that's not page unit test

* [MILO][MEP] Update Manifest Type and Manifest Ordering v2 (#1980)

* new branch to separate my updates from others

* export matchGlob

* see if removing matchGlob fixes unit test

* found unit test issue

* stash

* unit test repair

* increase coverage

* stop loading disabled promos

* update unit test

* only download disabled manifests if needed

* [MILO][MEP] MEP parameter spoof breaks if chosen experience has a comma (#1992)

* change delimiter to ---

* update unit tests

* Deconflicting for MWPW-136727 MEP: Support for simplified selectors (#1959)

* WIP

* Add tests

* stash

* stash

* stash

* merge select functions

* unit tests fixed

* fix for test or promo type

* create unit test file

* fix unit test error

* unit tests

* improve merge of duplicate manifests

* fix merge of Target with fresh manifest, add unit test

* new branch to separate my updates from others

* export matchGlob

* see if removing matchGlob fixes unit test

* found unit test issue

* stash

* unit test repair

* increase coverage

* merge conflicts

* remove duplicate from merge

* remove another duplicate from merge

---------

Co-authored-by: ChrisChrisChris <chrischrischris@users.noreply.github.com>

* more duplicates

* move normalization of manifestPath to before getting variant

* Unit test repair

* repair utils unit test

* only update path if needed

* force update sample scripts

* trigger try/catch

---------

Co-authored-by: vivgoodrich <vivian.goodrich@gmail.com>
Co-authored-by: Chris Peyer <chrischrischris@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Blaine Gunn <Blainegunn@gmail.com>

* UAR integration - Quiz Sync for state in local storage and accessibility (#2032)

* MWPW-139939 - Support for quiz state in local storage (#1956)

* MWPW-139939 - Support for quiz state in local storage

* Renders the quiz at any point as captured in local storage

Resolves: [MWPW-139939](https://jira.corp.adobe.com/browse/MWPW-139939)

* fix for no stored-quiz-state

* remove stored quiz data when advancing to the next quiz step via handleOnNextClick()

* stored quiz state unit tests

* MWPW-143799 - Quiz Accessibility Refinement (#2004)

* Add id to the h1
* set role and aria-labelledby on the option container
* swap to role-checkbox and aria-checked for option buttons
* use disabled instead of tabindex -1
Resolves: [MWPW-143799](https://jira.corp.adobe.com/browse/MWPW-143799)

---------

Co-authored-by: Sean Archibeque <sean.archibeque@gmail.com>
Co-authored-by: Mira Fedas <30750556+mirafedas@users.noreply.github.com>
Co-authored-by: Axel Cureno Basurto <axelcureno@gmail.com>
Co-authored-by: Rares Munteanu <overmyheadandbody@gmail.com>
Co-authored-by: sharath-kannan <138484653+sharath-kannan@users.noreply.github.com>
Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com>
Co-authored-by: Victor Hargrave <115231412+vhargrave@users.noreply.github.com>
Co-authored-by: ilyas Stéphane Türkben <tuerkben@adobe.com>
Co-authored-by: J. Casalino <casalino@adobe.com>
Co-authored-by: Megan Thomas <methomas@adobe.com>
Co-authored-by: cmiqueo <64917520+cmiqueo@users.noreply.github.com>
Co-authored-by: Okan Sahin <39759830+mokimo@users.noreply.github.com>
Co-authored-by: ilyas Stéphane Türkben <isturkben@gmail.com>
Co-authored-by: Bandana Laishram <bandanalaishram@gmail.com>
Co-authored-by: Bandana Laishram <blaishram@Bandanas-MacBook-Pro.local>
Co-authored-by: Vivian A Goodrich <101133187+vgoodric@users.noreply.github.com>
Co-authored-by: jedjedjedM <93785811+jedjedjedM@users.noreply.github.com>
Co-authored-by: vivgoodrich <vivian.goodrich@gmail.com>
Co-authored-by: Chris Peyer <chrischrischris@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Cody Lloyd <119891065+colloyd@users.noreply.github.com>
Co-authored-by: Victor Hargrave <vhargrave@adobe.com>
@bandana147 bandana147 deleted the MWPW-143213 branch April 11, 2024 05:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
high priority Why is this a high priority? Blocker? Critical? Dependency? Ready for Stage run-nala Run Nala Test Automation against PR verified PR has been E2E tested by a reviewer
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants