Merge branch 'stage' into MWPW-164131

.github/workflows/merge-to-stage.js

@@ -52,7 +52,12 @@ let body = `
 const isHighPrio = (labels) => labels.includes(LABELS.highPriority);
 const isZeroImpact = (labels) => labels.includes(LABELS.zeroImpact);
 
-const hasFailingChecks = (checks) => checks.some(({ conclusion, name }) => name !== 'merge-to-stage' && conclusion === 'failure');
+const hasFailingChecks = (checks) =>
+  checks.some(
+    ({ conclusion, name }) =>
+      name !== 'merge-to-stage' &&
+      (conclusion === 'in_progress' || conclusion === 'failure')
+  );
 
 const commentOnPR = async (comment, prNumber) => {
   console.log(comment); // Logs for debugging the action.
@@ -90,7 +95,7 @@ const getPRs = async () => {
 
   prs = prs.filter(({ checks, reviews, number, title }) => {
     if (hasFailingChecks(checks)) {
-      commentOnPR(`Skipped merging ${number}: ${title} due to failing checks`, number);
+      commentOnPR(`Skipped merging ${number}: ${title} due to failing or running checks`, number);
       return false;
     }
 

libs/blocks/accordion/accordion.js

@@ -17,11 +17,9 @@ function toggleMedia(con, trig, status) {
     trig.setAttribute('hidden', '');
     trig.setAttribute('aria-expanded', 'false');
     con.setAttribute('hidden', '');
-    con.setAttribute('aria-expanded', 'false');
   } else {
     trig.setAttribute('aria-expanded', 'true');
     trig.removeAttribute('hidden');
-    con.setAttribute('aria-expanded', 'true');
     con.removeAttribute('hidden');
   }
 }

libs/blocks/global-footer/global-footer.js

@@ -209,8 +209,6 @@ class Footer {
       <a
         href="${regionSelector.href}"
         class="${regionPickerClass}"
-        aria-expanded="false"
-        aria-haspopup="true"
         role="button">
         <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" class="feds-regionPicker-globe" focusable="false">
           <use href="#footer-icon-globe" />
@@ -284,6 +282,7 @@ class Footer {
       });
     } else {
       // No hash -> region selector expands a dropdown
+      regionPickerElem.setAttribute('aria-haspopup', 'true');
       regionPickerElem.href = '#'; // reset href value to not get treated as a fragment
       regionSelector.href = localizeLink(regionSelector.href);
       decorateAutoBlock(regionSelector); // add fragment-specific class(es)

libs/blocks/global-navigation/base.css

@@ -44,6 +44,9 @@
   --feds-backgroundColor-tabs-v2: #f8f8f8;
   --feds-backgroundColor-tabContent-v2: #f3f3f3;
   --feds-borderColor-localnav-v2: #eee;
+
+  /* App banner */
+  --app-banner-height: 76px;
 }
 
 /* Nav Link styles */

libs/blocks/global-navigation/global-navigation.css

@@ -1322,3 +1322,8 @@ html:has(body.disable-ios-scroll) { /* this class is only added on iOS */
   height: 100dvh;
   position: fixed;
 }
+
+/* GNAV popup height fix in case of app banner */
+.branch-banner-is-active header.new-nav .feds-nav > section.feds-navItem > .feds-popup {
+  height: calc(100dvh - var(--app-banner-height));
+}

libs/blocks/global-navigation/global-navigation.js

@@ -351,7 +351,7 @@ class Gnav {
       this.addChangeEventListeners,
     ];
     const fetchKeyboardNav = () => {
-      setupKeyboardNav(this.newMobileNav && this.isLocalNav());
+      setupKeyboardNav(this.isLocalNav());
     };
     this.block.addEventListener('click', this.loadDelayed);
     this.block.addEventListener('keydown', fetchKeyboardNav);
@@ -793,7 +793,7 @@ class Gnav {
 
   isToggleExpanded = () => this.elements.mobileToggle?.getAttribute('aria-expanded') === 'true';
 
-  isLocalNav = () => this
+  isLocalNav = () => this.newMobileNav && this
     .elements
     .navWrapper
     ?.querySelectorAll('.feds-nav > section.feds-navItem')
@@ -816,7 +816,7 @@ class Gnav {
         const section = sections[0];
         queueMicrotask(() => section.click());
       }
-    } else if (isExpanded && this.newMobileNav && this.isLocalNav()) {
+    } else if (isExpanded && this.isLocalNav()) {
       enableMobileScroll();
     }
     toggle?.setAttribute('aria-expanded', !isExpanded);

libs/blocks/global-navigation/utilities/utilities.js

@@ -337,7 +337,8 @@ export function trigger({ element, event, type } = {}) {
   closeAllDropdowns({ type });
   if (isOpen) return false;
   element.setAttribute('aria-expanded', 'true');
-  if (!isDesktop.matches && type === 'dropdown') disableMobileScroll();
+  if (!isDesktop.matches && type === 'dropdown'
+      && !!document.querySelector('header.new-nav')) disableMobileScroll();
   return true;
 }
 

libs/blocks/rollout/rollout.css

@@ -0,0 +1,138 @@
+/* Rollout Modal styling */
+.modal {
+  padding: 20px;
+  max-width: 500px;
+  margin: 40px auto;
+  text-align: center;
+  font-family: Arial, sans-serif;
+}
+
+.modal.warning {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 15px;
+  background-color: #fff3e0;
+  border: 1px solid #ffb74d;
+  border-radius: 8px;
+  padding: 15px 20px;
+  text-align: left;
+}
+
+.warning-icon {
+  width: 24px;
+  height: 24px;
+  background-color: #f57c00;
+  border-radius: 50%;
+  position: relative;
+}
+
+.warning-icon:before {
+  content: "!";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.warning-text {
+  color: #e65100;
+  font-size: 20px;
+  font-weight: 800;
+}
+
+.warning-text-sub {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.env-label {
+  font-weight: 600;
+  margin-bottom: 10px;
+  color: #333;
+  font-size: 16px;
+}
+
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin: 10px 0;
+}
+
+.radio-group label {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 8px 10px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  background-color: #fff;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 4px rgb(0 0 0 / 5%);
+}
+
+.radio-group label:hover {
+  border-color: #0078d4;
+  background-color: #f0f8ff;
+  box-shadow: 0 3px 6px rgb(0 0 0 / 10%);
+}
+
+.radio-group input[type="radio"] {
+  margin-right: 8px;
+  accent-color: #0078d4;
+  width: 16px;
+  height: 16px;
+}
+
+.button-group {
+  display: flex;
+  justify-content: center;
+  margin-top: 15px;
+}
+
+.rollout-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: bold;
+  color: #fff;
+  background: linear-gradient(135deg, #0078d4, #005a9e);
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+  box-shadow: 0 3px 6px rgb(0 0 0 / 10%);
+}
+
+.rollout-btn:hover {
+  background: linear-gradient(135deg, #005a9e, #003e6b);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgb(0 0 0 / 15%);
+}
+
+.rollout-btn:active {
+  background: linear-gradient(135deg, #004080, #002a57);
+  transform: translateY(1px);
+  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+}
+
+.rollout-btn:disabled {
+  background-color: #ccc;
+  color: #666;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.rollout-btn-text {
+  font-size: 14px;
+  font-weight: normal;
+  color: inherit;
+}