fix(header): skip to main content button added

blocks/header/header.css

@@ -684,3 +684,27 @@ header a:focus {
     margin-left: 0;
   }
 }
+
+.skip-link {
+  position: absolute;
+  top: 10px; 
+  left: 10px; 
+  background: #fff; 
+  color: #000; 
+  padding: 8px 16px;
+  text-decoration: none;
+  z-index: 1000; 
+  border: 1px solid #ccc; 
+  border-radius: 4px; 
+  opacity: 0;
+  transition: opacity 0.3s ease; 
+}
+
+.skip-link:focus {
+  opacity: 1; 
+}
+
+.skip-link:focus:not(:focus-within) {
+  position: absolute; 
+  top: -40px; 
+}

blocks/header/header.js

@@ -144,6 +144,28 @@ const toggleMobileNavAccordion = (navToggle) => {
  */
 export default async function decorate(block) {
   block.innerHTML = '';
+
+  const skipLink = document.createElement('a');
+  skipLink.classList.add('skip-link');
+  skipLink.href = '#main-container';
+  skipLink.textContent = 'Skip to main content';
+  skipLink.setAttribute('aria-label', 'Skip to main content');
+  skipLink.setAttribute('tabindex', '0');
+  block.append(skipLink);
+
+  skipLink.addEventListener('click', (event) => {
+    event.preventDefault();
+    const mainContent = document.getElementById('main-container');
+    if (mainContent) {
+      mainContent.setAttribute('tabindex', '-1');
+      mainContent.focus();
+      window.scrollTo({
+        top: mainContent.offsetTop - document.querySelector('nav').offsetHeight,
+        behavior: 'smooth',
+      });
+    }
+  });
+
   const desktopHeader = document.createElement('div');
   desktopHeader.classList.add('desktop-header', 'desktop-view');
   const mobileHeader = document.createElement('div');
@@ -289,7 +311,7 @@ export default async function decorate(block) {
     </button>
     <div class="search-input-wrapper megamenu-wrapper" aria-hidden="true">
       <form action="/search">
-        <button type="submit">${SEARCH}</button>
+        <button aria-label="Search" type="submit">${SEARCH}</button>
         <input type="text" name="q" aria-label="Search" placeholder="Search pricefx.com" autocomplete="off">
       </form>
       <div class="search-suggestion"></div>
@@ -403,7 +425,7 @@ export default async function decorate(block) {
     </button>
     <div class="search-input-wrapper megamenu-wrapper" aria-hidden="true">
       <form action="/search">
-        <button type="submit">${SEARCH}</button>
+        <button type="submit" aria-label="Search">${SEARCH}</button>
         <input type="text" name="q" aria-label="Search" placeholder="Search pricefx.com" autocomplete="off">
       </form>
       <div class="search-suggestion"></div>

blocks/learning-center/learning-center.css

@@ -34,7 +34,7 @@
 }
 
 .filter-menu-toggle:focus {
-  outline: none;
+    background-position: right;
 }
 
 .filter-icon {

blocks/learning-center/learning-center.js

@@ -1022,6 +1022,19 @@ export default async function decorate(block) {
     updateBrowserUrl(searchParams, 'page', nextActivePage.textContent);
   };
 
+  const pagItems = document.querySelectorAll('.pagination-page');
+
+  for (let i = 0; i < pagItems.length; i += 1) {
+    const counter = i + 1;
+    let string = `Page ${counter}`;
+
+    if (pagItems[i].classList.contains('active-page')) {
+      string = `Page ${counter}, Current Page`;
+    }
+
+    pagItems[i].setAttribute('aria-label', string);
+  }
+
   paginationContainer.addEventListener('click', (e) => {
     if (e.target && e.target.nodeName === 'BUTTON' && e.target.className === '') {
       const { target } = e;

scripts/aem.js

@@ -454,6 +454,7 @@ function decorateIcons(element, prefix = '', alt = '', type = '') {
  * @param {Element} main The container element
  */
 function decorateSections(main) {
+  main.id = 'main-container';
   main.querySelectorAll(':scope > div:not([data-section-status])').forEach((section) => {
     const wrappers = [];
     let defaultContent = false;