diff --git a/src/components/DatePicker/DatePickers/DatePicker.js b/src/components/DatePicker/DatePickers/DatePicker.js
index 93fd149c2e..efe08b7231 100644
--- a/src/components/DatePicker/DatePickers/DatePicker.js
+++ b/src/components/DatePicker/DatePickers/DatePicker.js
@@ -242,6 +242,7 @@ const CalendarMonth = props => {
                       aria-label={ariaLabel}
                       className={classes}
                       data-date={isoDateString}
+                      data-current={isCurrent && !isDisabled ? 'true' : undefined}
                       key={cellKey}
                       onClick={onClick}
                       onMouseEnter={onMouseEnter}
@@ -467,30 +468,39 @@ const DatePicker = props => {
 
     if (event.key === 'ArrowLeft') {
       event.preventDefault();
+      event.stopPropagation();
       updateCurrentDate(getPreviousDay(currentDate));
     } else if (event.key === 'ArrowRight') {
       event.preventDefault();
+      event.stopPropagation();
       updateCurrentDate(getNextDay(currentDate));
     } else if (event.key === 'ArrowUp') {
       event.preventDefault();
+      event.stopPropagation();
       updateCurrentDate(subDays(currentDate, 7));
     } else if (event.key === 'ArrowDown') {
       event.preventDefault();
+      event.stopPropagation();
       updateCurrentDate(addDays(currentDate, 7));
     } else if (event.key === 'PageUp') {
       event.preventDefault();
+      event.stopPropagation();
       updateCurrentDate(getPreviousMonth(currentDate));
     } else if (event.key === 'PageDown') {
       event.preventDefault();
+      event.stopPropagation();
       updateCurrentDate(getNextMonth(currentDate));
     } else if (event.key === 'Home') {
       event.preventDefault();
+      event.stopPropagation();
       updateCurrentDate(getFirstOfMonth(currentDate));
     } else if (event.key === 'End') {
       event.preventDefault();
+      event.stopPropagation();
       updateCurrentDate(getLastOfMonth(currentDate));
     } else if (event.key === 'Space' || event.key === 'Enter') {
       event.preventDefault();
+      event.stopPropagation();
       onSelectDate(currentDate);
     }
   };
diff --git a/src/components/FieldSelectTree/FieldSelectTree.js b/src/components/FieldSelectTree/FieldSelectTree.js
index 7fe36ca05c..9cf18387ae 100644
--- a/src/components/FieldSelectTree/FieldSelectTree.js
+++ b/src/components/FieldSelectTree/FieldSelectTree.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { Field } from 'react-final-form';
 import { useIntl } from 'react-intl';
 import classNames from 'classnames';
@@ -9,6 +9,102 @@ import { ValidationError } from '../../components';
 import css from './FieldSelectTree.module.css';
 
 const MIN_LENGTH_FOR_LONG_WORDS = 16;
+
+/**
+ * Collects all focusable option buttons in the tree in DFS order.
+ *
+ * @param {HTMLElement} container - The container element containing the option buttons
+ * @returns {Array<HTMLElement>} Array of focusable option buttons in order
+ */
+const getAllFocusableOptions = container => {
+  if (!container) return [];
+  const buttons = container.querySelectorAll('button');
+  return Array.from(buttons).filter(button => {
+    // Filter out disabled buttons and buttons with negative tabIndex
+    return !button.disabled && button.tabIndex !== -1;
+  });
+};
+
+/**
+ * Finds the parent <ul> element that contains the given button.
+ *
+ * @param {HTMLElement} button - The button element
+ * @returns {HTMLElement|null} The parent <ul> element or null if not found
+ */
+const getParentOptionList = (button, container) => {
+  let parent = button.parentElement;
+  while (parent && parent.tagName !== 'UL') {
+    parent = parent.parentElement;
+  }
+  if (parent === container.firstChild) {
+    parent = parent.closest('form');
+  }
+  return parent;
+};
+
+/**
+ * Finds the parent option button (the button in the parent <li> that contains the current button's <ul>).
+ *
+ * @param {HTMLElement} button - The currently focused button
+ * @param {HTMLElement} container - The container element containing all options
+ * @returns {HTMLElement|null} The parent option button or null if not found
+ */
+const getParentOptionButton = (button, container) => {
+  const parentList = getParentOptionList(button, container);
+  if (!parentList) return null;
+
+  // Find the parent <li> that contains this <ul>
+  const parentLi = parentList.parentElement;
+  if (!parentLi || parentLi.tagName !== 'LI') return null;
+
+  // Find the button within the parent <li>
+  const parentButton = parentLi.querySelector('button');
+  return parentButton || null;
+};
+
+/**
+ * Finds the next focusable option button within the same parent list, with looping.
+ *
+ * @param {HTMLElement} currentButton - The currently focused button
+ * @param {HTMLElement} container - The container element containing all options
+ * @returns {HTMLElement|null} The next focusable button or null if none exists
+ */
+const getNextOption = (currentButton, container) => {
+  const parentList = getParentOptionList(currentButton, container);
+  if (!parentList) return null;
+
+  const siblingButtons = Array.from(parentList.querySelectorAll('button')).filter(
+    button => !button.disabled && button.tabIndex !== -1
+  );
+  const currentIndex = siblingButtons.indexOf(currentButton);
+  if (currentIndex === -1) return null;
+
+  // Loop to first if at the end
+  const nextIndex = currentIndex === siblingButtons.length - 1 ? 0 : currentIndex + 1;
+  return siblingButtons[nextIndex];
+};
+
+/**
+ * Finds the previous focusable option button within the same parent list, with looping.
+ *
+ * @param {HTMLElement} currentButton - The currently focused button
+ * @param {HTMLElement} container - The container element containing all options
+ * @returns {HTMLElement|null} The previous focusable button or null if none exists
+ */
+const getPreviousOption = (currentButton, container) => {
+  const parentList = getParentOptionList(currentButton, container);
+  if (!parentList) return null;
+
+  const siblingButtons = Array.from(parentList.querySelectorAll('button')).filter(
+    button => !button.disabled && button.tabIndex !== -1
+  );
+  const currentIndex = siblingButtons.indexOf(currentButton);
+  if (currentIndex === -1) return null;
+
+  // Loop to last if at the beginning
+  const previousIndex = currentIndex === 0 ? siblingButtons.length - 1 : currentIndex - 1;
+  return siblingButtons[previousIndex];
+};
 /**
  * Pick valid option configurations with format like:
  * [{ option, label, suboptions: [{ option, label }] }]
@@ -37,12 +133,12 @@ const hasSuboptions = optionConfig => getSuboptions(optionConfig)?.length > 0;
 /**
  * A component that represents a single option.
  *
- * @param {*} props include: config, level, handleChange, branchPath
+ * @param {*} props include: config, level, handleChange, branchPath, containerRef
  * @returns <li> wrapped elements.
  */
 const Option = props => {
   const intl = useIntl();
-  const { config, level, handleChange, branchPath, ancestors = [], ...rest } = props;
+  const { config, level, handleChange, branchPath, ancestors = [], containerRef, ...rest } = props;
   const { option, label, suboptions } = config;
   const foundFromBranchPath = branchPath.find(bc => bc.option === option);
   const isOptSelected = !!foundFromBranchPath;
@@ -72,6 +168,103 @@ const Option = props => {
     [css.optionBtnSelected]: isOptSelected,
     [css.optionBtnSelectedLowest]: isOptSelected && !isSuboptionSelected,
   });
+
+  const handleKeyDown = e => {
+    if (!containerRef?.current) return;
+
+    switch (e.key) {
+      case 'ArrowDown': {
+        e.preventDefault();
+        e.stopPropagation();
+        const nextOption = getNextOption(e.target, containerRef.current);
+        if (nextOption) {
+          nextOption.focus();
+        }
+        break;
+      }
+      case 'ArrowUp': {
+        e.preventDefault();
+        e.stopPropagation();
+        const previousOption = getPreviousOption(e.target, containerRef.current);
+        if (previousOption) {
+          previousOption.focus();
+        }
+        break;
+      }
+      case 'ArrowRight': {
+        if (hasSuboptions(config) && !isOptSelected) {
+          e.preventDefault();
+          e.stopPropagation();
+          // Expand suboptions by selecting this option
+          handleChange(option, level);
+          // Focus will move to first child after suboptions are rendered
+          setTimeout(() => {
+            const allOptions = getAllFocusableOptions(containerRef.current);
+            const currentIndex = allOptions.indexOf(e.target);
+            if (currentIndex !== -1 && currentIndex < allOptions.length - 1) {
+              allOptions[currentIndex + 1]?.focus();
+            }
+          }, 100);
+        }
+        break;
+      }
+      case 'ArrowLeft': {
+        // Find parent button first (before DOM changes)
+        const parentButton = getParentOptionButton(e.target, containerRef.current);
+
+        // If there's a parent option (level > 1), deselect it
+        if (level >= 1 && ancestors.length >= 0) {
+          e.preventDefault();
+          e.stopPropagation();
+
+          if (branchPath.length > 0) {
+            // Get the parent option (last ancestor)
+            const parentLevel = level - 1;
+
+            // Clear selections at parent level and below
+            const updatedValue = branchPath.reduce((picked, selectedOptionByLevel) => {
+              const { level: branchPathLevel, levelKey } = selectedOptionByLevel;
+              if (branchPathLevel <= parentLevel && levelKey) {
+                return { ...picked, [levelKey]: selectedOptionByLevel.option };
+              }
+              return picked;
+            }, {});
+            rest.onChange?.(updatedValue);
+          }
+
+          // Move focus to parent option button
+          if (parentButton) {
+            setTimeout(() => {
+              parentButton.focus();
+            }, 0);
+          }
+        }
+        break;
+      }
+      case 'Home': {
+        e.preventDefault();
+        e.stopPropagation();
+        const firstOption = getAllFocusableOptions(containerRef.current)?.[0];
+        if (firstOption) {
+          firstOption.focus();
+        }
+        break;
+      }
+      case 'End': {
+        e.preventDefault();
+        e.stopPropagation();
+        const allOptions = getAllFocusableOptions(containerRef.current);
+        const lastOption = allOptions?.[allOptions.length - 1];
+        if (lastOption) {
+          lastOption.focus();
+        }
+        break;
+      }
+      default:
+        break;
+    }
+  };
+
   return (
     <li className={css.option} style={{ paddingLeft: `${12}px`, ...cursorMaybe }}>
       <button
@@ -83,6 +276,7 @@ const Option = props => {
             handleChange(option, level);
           }
         }}
+        onKeyDown={handleKeyDown}
         aria-label={ariaLabel}
       >
         {optionLabel}
@@ -95,6 +289,7 @@ const Option = props => {
           handleChange={handleChange}
           branchPath={branchPath}
           ancestors={[...ancestors, { option, label }]}
+          containerRef={containerRef}
           {...rest}
         />
       ) : null}
@@ -120,11 +315,11 @@ const OptionList = props => {
  * @returns OptionList component.
  */
 const SelectOptions = props => {
-  const { options, ...rest } = props;
+  const { options, containerRef, ...rest } = props;
   return (
     <OptionList hasOptions={options?.length > 0}>
       {options.map(config => (
-        <Option key={config.option} config={config} {...rest} />
+        <Option key={config.option} config={config} containerRef={containerRef} {...rest} />
       ))}
     </OptionList>
   );
@@ -215,6 +410,7 @@ const FieldSelectTree = props => {
   const namePrefix = name;
   const level = 1;
   const validOptions = pickValidOptions(options);
+  const containerRef = useRef(null);
 
   const classes = classNames(rootClassName || css.root, className);
 
@@ -227,13 +423,16 @@ const FieldSelectTree = props => {
         const meta = fieldProps?.meta;
 
         return (
-          <div className={classes}>
+          <div ref={containerRef} className={classes}>
             {label ? <label>{label}</label> : null}
             <SelectOptions
               options={validOptions}
               level={level}
               handleChange={handleChangeFn(validOptions, fieldValue, namePrefix, onChange)}
               branchPath={branchPath}
+              containerRef={containerRef}
+              namePrefix={namePrefix}
+              onChange={onChange}
             />
 
             <ValidationError fieldMeta={meta} />
diff --git a/src/components/FieldSelectTree/FieldSelectTree.module.css b/src/components/FieldSelectTree/FieldSelectTree.module.css
index c7573ac411..34c7fd8ab7 100644
--- a/src/components/FieldSelectTree/FieldSelectTree.module.css
+++ b/src/components/FieldSelectTree/FieldSelectTree.module.css
@@ -64,7 +64,6 @@
 }
 
 .optionBtnSelectedLowest {
-  &:focus,
   &:hover {
     color: var(--marketplaceColor);
   }
diff --git a/src/components/KeyboardListener/KeyboardListener.js b/src/components/KeyboardListener/KeyboardListener.js
new file mode 100644
index 0000000000..31df1649f5
--- /dev/null
+++ b/src/components/KeyboardListener/KeyboardListener.js
@@ -0,0 +1,47 @@
+import React, { useEffect, useRef } from 'react';
+
+/**
+ * KeyboardListener component
+ *
+ * @component
+ * @param {Object} props
+ * @param {Object} props.keyMap - The key map to use for the keyboard listener
+ * @param {string} props.containerId - The container ID to pass to callback functions
+ * @param {React.Node} props.children - The children to render
+ * @returns {JSX.Element}
+ */
+const KeyboardListener = props => {
+  const { children, containerId, keyMap, ...rest } = props;
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    const handleKeyDown = event => {
+      // Only handle events that originated from this component's descendants
+      if (!containerRef.current || !containerRef.current.contains(event.target)) {
+        return;
+      }
+
+      if (keyMap && keyMap[event.key]) {
+        const { action, callback } = keyMap[event.key];
+
+        if (action && callback) {
+          callback(event, containerId, action);
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [containerId, keyMap]);
+
+  return (
+    <div ref={containerRef} {...rest}>
+      {children}
+    </div>
+  );
+};
+
+export default KeyboardListener;
diff --git a/src/components/LayoutComposer/LayoutSideNavigation/LayoutSideNavigation.js b/src/components/LayoutComposer/LayoutSideNavigation/LayoutSideNavigation.js
index 8ad882db45..7e5e69e591 100644
--- a/src/components/LayoutComposer/LayoutSideNavigation/LayoutSideNavigation.js
+++ b/src/components/LayoutComposer/LayoutSideNavigation/LayoutSideNavigation.js
@@ -73,7 +73,9 @@ const LayoutSideNavigation = props => {
                 ) : null}
                 {sideNavContent}
               </aside>
-              <main className={classNames(css.main, mainColumnClassName)}>{children}</main>
+              <main id="main-content" className={classNames(css.main, mainColumnClassName)}>
+                {children}
+              </main>
             </Main>
             <Footer>{footerContent}</Footer>
           </>
diff --git a/src/components/LayoutComposer/LayoutSideNavigation/LayoutSideNavigation.module.css b/src/components/LayoutComposer/LayoutSideNavigation/LayoutSideNavigation.module.css
index da2facf44d..9e1fa4f136 100644
--- a/src/components/LayoutComposer/LayoutSideNavigation/LayoutSideNavigation.module.css
+++ b/src/components/LayoutComposer/LayoutSideNavigation/LayoutSideNavigation.module.css
@@ -40,6 +40,7 @@
   flex-direction: column;
 
   padding: 24px;
+  scroll-margin-top: var(--topbarHeight);
 
   @media (--viewportLarge) {
     /**
@@ -51,6 +52,8 @@
     border-left-width: 1px;
     border-left-style: solid;
     border-left-color: var(--colorGrey100);
+
+    scroll-margin-top: var(--topbarHeightDesktop);
   }
 
   @media (--viewportLargeWithPaddings) {
diff --git a/src/components/LayoutComposer/LayoutSingleColumn/LayoutSingleColumn.js b/src/components/LayoutComposer/LayoutSingleColumn/LayoutSingleColumn.js
index c22cfaf78b..a0dd943991 100644
--- a/src/components/LayoutComposer/LayoutSingleColumn/LayoutSingleColumn.js
+++ b/src/components/LayoutComposer/LayoutSingleColumn/LayoutSingleColumn.js
@@ -45,7 +45,7 @@ const LayoutSingleColumn = props => {
             <Topbar as="header" className={css.topbar}>
               {topbarContent}
             </Topbar>
-            <Main as="main" className={classNames(css.main, mainColumnClassName)}>
+            <Main as="main" id="main-content" className={classNames(css.main, mainColumnClassName)}>
               {children}
             </Main>
             <Footer>{footerContent}</Footer>
diff --git a/src/components/LayoutComposer/LayoutSingleColumn/LayoutSingleColumn.module.css b/src/components/LayoutComposer/LayoutSingleColumn/LayoutSingleColumn.module.css
index 721b117574..af35443886 100644
--- a/src/components/LayoutComposer/LayoutSingleColumn/LayoutSingleColumn.module.css
+++ b/src/components/LayoutComposer/LayoutSingleColumn/LayoutSingleColumn.module.css
@@ -1,3 +1,4 @@
+@import '../../../styles/customMediaQueries.css';
 .root {
   grid-template-rows: auto 1fr auto;
   min-height: 100vh;
@@ -11,4 +12,9 @@
 
 .main {
   display: grid;
+  scroll-margin-top: var(--topbarHeight);
+
+  @media (--viewportMedium) {
+    scroll-margin-top: var(--topbarHeightDesktop);
+  }
 }
diff --git a/src/components/LocationAutocompleteInput/LocationAutocompleteInputImpl.js b/src/components/LocationAutocompleteInput/LocationAutocompleteInputImpl.js
index 1023aeeeea..0b181d1b49 100644
--- a/src/components/LocationAutocompleteInput/LocationAutocompleteInputImpl.js
+++ b/src/components/LocationAutocompleteInput/LocationAutocompleteInputImpl.js
@@ -40,6 +40,7 @@ const getGeocoderVariant = mapProvider => {
 // Renders the autocompletion prediction results in a list
 const LocationPredictionsList = props => {
   const {
+    id,
     rootClassName,
     className,
     useDarkText,
@@ -68,6 +69,8 @@ const LocationPredictionsList = props => {
           useDarkText ? css.listItemBlackText : css.listItemWhiteText
         )}
         key={predictionId}
+        id={predictionId}
+        role="option"
         onTouchStart={e => {
           e.preventDefault();
           onSelectStart(getTouchCoordinates(e.nativeEvent));
@@ -111,8 +114,10 @@ const LocationPredictionsList = props => {
   );
 
   return (
-    <div className={classes}>
-      <ul className={css.predictions}>{predictions.map(item)}</ul>
+    <div className={classes} id={id}>
+      <ul className={css.predictions} role="listbox">
+        {predictions.map(item)}
+      </ul>
       {children}
     </div>
   );
@@ -223,8 +228,9 @@ class LocationAutocompleteInputImplementation extends Component {
         this.input?.blur();
       }
     } else if (e.keyCode === KEY_CODE_TAB) {
-      this.selectItemIfNoneSelected();
-      this.input?.blur();
+      if (!e.shiftKey) {
+        this.selectItemIfNoneSelected();
+      }
     } else if (e.keyCode === KEY_CODE_ESC && this.input) {
       this.input.blur();
     }
@@ -505,6 +511,8 @@ class LocationAutocompleteInputImplementation extends Component {
         ? { ref: inputRef }
         : {};
 
+    const predictionsId = `${id}.predictions`;
+
     return (
       <div className={rootClass}>
         <div className={iconClass}>
@@ -540,9 +548,15 @@ class LocationAutocompleteInputImplementation extends Component {
           title={search}
           data-testid="location-search"
           {...ariaLabelMaybe}
+          role="combobox"
+          aria-autocomplete="list"
+          aria-expanded={renderPredictions}
+          aria-controls={predictionsId}
+          aria-activedescendant={predictions[this.state.highlightedIndex]?.id}
         />
         {renderPredictions ? (
           <LocationPredictionsList
+            id={predictionsId}
             rootClassName={predictionsClass}
             useDarkText={useDarkText}
             predictions={predictions}
diff --git a/src/components/Logo/LinkedLogo.js b/src/components/Logo/LinkedLogo.js
index 3b33901969..7392d58b8f 100644
--- a/src/components/Logo/LinkedLogo.js
+++ b/src/components/Logo/LinkedLogo.js
@@ -22,6 +22,7 @@ import css from './LinkedLogo.module.css';
  */
 const LinkedLogo = props => {
   const {
+    id,
     className,
     rootClassName,
     logoClassName,
@@ -43,7 +44,7 @@ const LinkedLogo = props => {
       />
     </ExternalLink>
   ) : (
-    <NamedLink className={classes} name="LandingPage" {...rest}>
+    <NamedLink id={id} className={classes} name="LandingPage" {...rest}>
       <Logo
         layout={layout}
         className={logoClassName}
diff --git a/src/components/Menu/Menu.js b/src/components/Menu/Menu.js
index 9b4ac4e377..10471c8401 100644
--- a/src/components/Menu/Menu.js
+++ b/src/components/Menu/Menu.js
@@ -4,16 +4,58 @@ import classNames from 'classnames';
 import { MenuContent, MenuLabel } from '../../components';
 import css from './Menu.module.css';
 
-const KEY_CODE_ESCAPE = 27;
 const CONTENT_PLACEMENT_OFFSET = 0;
 const CONTENT_TO_LEFT = 'left';
 const CONTENT_TO_RIGHT = 'right';
 const MAX_MOBILE_SCREEN_WIDTH = 767;
+const FOCUSABLE_ELEMENTS = 'a, button, [tabindex], input, select, textarea';
 
 const isControlledMenu = (isOpenProp, onToggleActiveProp) => {
   return isOpenProp !== null && onToggleActiveProp !== null;
 };
 
+const moveFocusToFirstFocusableElement = menuContent => {
+  const focusableElements = menuContent.querySelectorAll(FOCUSABLE_ELEMENTS);
+  if (focusableElements.length > 0) {
+    const firstFocusableElement = Array.from(focusableElements).find(
+      element => !(element.tabIndex < 0 || element.disabled)
+    );
+    firstFocusableElement?.focus();
+  }
+};
+
+const moveFocusToLastFocusableElement = menuContent => {
+  const focusableElements = menuContent.querySelectorAll(FOCUSABLE_ELEMENTS);
+  if (focusableElements.length > 0) {
+    const lastFocusableElement = Array.from(focusableElements)
+      .reverse()
+      .find(element => !(element.tabIndex < 0 || element.disabled));
+    lastFocusableElement?.focus();
+  }
+};
+
+const moveFocusToNextFocusableElement = (menuContent, direction = 'next') => {
+  const focusableElements = Array.from(
+    menuContent.querySelectorAll('a, button, [tabindex], input, select, textarea')
+  ).filter(element => !(element.tabIndex < 0 || element.disabled));
+
+  if (focusableElements.length === 0) {
+    return;
+  }
+
+  const currentIndex = focusableElements.findIndex(element => element === document.activeElement);
+  let targetIndex;
+
+  if (direction === 'next') {
+    targetIndex = currentIndex < focusableElements.length - 1 ? currentIndex + 1 : 0;
+  } else {
+    // direction === 'previous'
+    targetIndex = currentIndex > 0 ? currentIndex - 1 : focusableElements.length - 1;
+  }
+
+  focusableElements[targetIndex]?.focus();
+};
+
 /**
  * Menu is component that shows extra content when it is clicked.
  * Clicking it toggles visibility of MenuContent.
@@ -60,6 +102,7 @@ class Menu extends Component {
     }
 
     this.onBlur = this.onBlur.bind(this);
+    this.onFocus = this.onFocus.bind(this);
     this.onKeyDown = this.onKeyDown.bind(this);
     this.toggleOpen = this.toggleOpen.bind(this);
     this.prepareChildren = this.prepareChildren.bind(this);
@@ -80,6 +123,10 @@ class Menu extends Component {
     if (!this.menu.contains(event.relatedTarget)) {
       const { isOpen = null, onToggleActive = null } = this.props;
 
+      if (event.relatedTarget !== null) {
+        window.__focusedElementId__ = null;
+      }
+
       if (isControlledMenu(isOpen, onToggleActive)) {
         onToggleActive(false);
       } else {
@@ -88,25 +135,88 @@ class Menu extends Component {
     }
   }
 
+  onFocus(event) {
+    const skipFocusOnNavigation = this.props.skipFocusOnNavigation;
+    if (event.currentTarget.contains(event.target) && skipFocusOnNavigation !== true) {
+      window.__focusedElementId__ = event.currentTarget.firstChild?.id;
+    }
+  }
+
   onKeyDown(e) {
     // Gather all escape presses to close menu
-    if (e.keyCode === KEY_CODE_ESCAPE) {
-      this.toggleOpen(false);
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      e.stopPropagation();
+      this.menu?.firstChild?.focus();
+      this.toggleOpen({ enforcedState: false });
+    } else if (e.key === 'ArrowDown') {
+      if (e.target === this.menu?.firstChild) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.toggleOpen({ enforcedState: true });
+      } else if (this.menuContent?.contains(e.target)) {
+        e.preventDefault();
+        e.stopPropagation();
+        moveFocusToNextFocusableElement(this.menuContent);
+      }
+    } else if (e.key === 'ArrowUp') {
+      if (e.target === this.menu?.firstChild) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.toggleOpen({ enforcedState: false });
+      } else if (this.menuContent?.contains(e.target)) {
+        e.preventDefault();
+        e.stopPropagation();
+        moveFocusToNextFocusableElement(this.menuContent, 'previous');
+      }
+    } else if (e.key === 'Home') {
+      if (e.target === this.menu?.firstChild) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.toggleOpen({ enforcedState: true });
+      } else if (this.menuContent?.contains(e.target)) {
+        e.preventDefault();
+        e.stopPropagation();
+        moveFocusToFirstFocusableElement(this.menuContent);
+      }
+    } else if (e.key === 'End') {
+      if (e.target === this.menu?.firstChild) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.toggleOpen({ enforcedState: true, moveFocusFn: moveFocusToLastFocusableElement });
+      } else if (this.menuContent?.contains(e.target)) {
+        e.preventDefault();
+        e.stopPropagation();
+        moveFocusToLastFocusableElement(this.menuContent);
+      }
     }
   }
 
-  toggleOpen(enforcedState) {
+  toggleOpen(options = {}) {
+    const { enforcedState, moveFocusFn } = options || {};
+    const moveFocusTo = moveFocusFn || moveFocusToFirstFocusableElement;
+    const delayedMoveFocus = isMenuOpen => {
+      if (isMenuOpen) {
+        setTimeout(() => {
+          moveFocusTo(this.menuContent);
+        }, 100);
+      }
+    };
     // If state is handled outside of Menu component, we call a passed in onToggleActive func
     const { isOpen = null, onToggleActive = null } = this.props;
     if (isControlledMenu(isOpen, onToggleActive)) {
       const isMenuOpen = enforcedState != null ? enforcedState : !isOpen;
       onToggleActive(isMenuOpen);
+      delayedMoveFocus(isMenuOpen);
     } else {
       // If state is handled inside of Menu component, set state
-      this.setState(prevState => {
-        const isMenuOpen = enforcedState != null ? enforcedState : !prevState.isOpen;
-        return { isOpen: isMenuOpen };
-      });
+      this.setState(
+        prevState => {
+          const isMenuOpen = enforcedState != null ? enforcedState : !prevState.isOpen;
+          return { isOpen: isMenuOpen };
+        },
+        () => delayedMoveFocus(this.state.isOpen)
+      );
     }
   }
 
@@ -197,22 +307,21 @@ class Menu extends Component {
   }
 
   render() {
-    const { id, className, rootClassName, ariaLabel } = this.props;
+    const { id, className, rootClassName } = this.props;
     const rootClass = rootClassName || css.root;
     const classes = classNames(rootClass, className);
     const menuChildren = this.state.ready ? this.prepareChildren() : null;
-    const ariaLabelMaybe = ariaLabel ? { ['aria-label']: ariaLabel } : {};
 
     return (
       <div
         id={id}
         className={classes}
         onBlur={this.onBlur}
+        onFocus={this.onFocus}
         onKeyDown={this.onKeyDown}
         ref={c => {
           this.menu = c;
         }}
-        {...ariaLabelMaybe}
       >
         {menuChildren}
       </div>
diff --git a/src/components/MenuLabel/MenuLabel.js b/src/components/MenuLabel/MenuLabel.js
index 5e0d6fc87f..6f46c03405 100644
--- a/src/components/MenuLabel/MenuLabel.js
+++ b/src/components/MenuLabel/MenuLabel.js
@@ -20,7 +20,16 @@ import css from './MenuLabel.module.css';
  */
 const MenuLabel = props => {
   const [clicked, setClicked] = useState(false);
-  const { children, className, rootClassName, isOpen, isOpenClassName, onToggleActive } = props;
+  const {
+    children,
+    id,
+    className,
+    rootClassName,
+    isOpen,
+    isOpenClassName,
+    onToggleActive,
+    ariaLabel,
+  } = props;
 
   const onClick = e => {
     e.stopPropagation();
@@ -47,8 +56,10 @@ const MenuLabel = props => {
     [isOpenClass]: isOpen,
   });
 
+  const ariaLabelMaybe = ariaLabel ? { ['aria-label']: ariaLabel } : {};
+
   return (
-    <button className={classes} onClick={onClick} onBlur={onBlur}>
+    <button id={id} className={classes} onClick={onClick} onBlur={onBlur} {...ariaLabelMaybe}>
       {children}
     </button>
   );
diff --git a/src/components/NamedLink/NamedLink.js b/src/components/NamedLink/NamedLink.js
index aa45ab8954..cf677b86ad 100644
--- a/src/components/NamedLink/NamedLink.js
+++ b/src/components/NamedLink/NamedLink.js
@@ -24,6 +24,17 @@ import { useRouteConfiguration } from '../../context/routeConfigurationContext';
 
 import { pathByRouteName, findRouteByRouteName } from '../../util/routes';
 
+const handleFocus = event => {
+  if (event.currentTarget.contains(event.target)) {
+    window.__focusedElementId__ = event.currentTarget?.id;
+  }
+};
+const handleBlur = event => {
+  if (event.relatedTarget !== null) {
+    window.__focusedElementId__ = null;
+  }
+};
+
 /**
  * This component wraps React-Router's Link by providing name-based routing.
  *
@@ -46,9 +57,12 @@ import { pathByRouteName, findRouteByRouteName } from '../../util/routes';
 export const NamedLink = withRouter(props => {
   const routeConfiguration = useRouteConfiguration();
   const {
+    id,
+    holdFocus,
     name,
     params = {}, // pathParams
     title,
+    ariaLabel,
     // Link props
     to = {},
     children,
@@ -71,11 +85,17 @@ export const NamedLink = withRouter(props => {
   const pathname = pathByRouteName(name, routeConfiguration, params);
   const active = match.url && match.url === pathname;
 
+  const focusHandlers = id && holdFocus ? { onFocus: handleFocus, onBlur: handleBlur } : {};
+  const ariaLabelMaybe = ariaLabel ? { ['aria-label']: ariaLabel } : {};
+
   // <a> element props
   const aElemProps = {
+    id,
     className: classNames(className, { [activeClassName]: active }),
     style,
     title,
+    ...ariaLabelMaybe,
+    ...focusHandlers,
   };
 
   return (
diff --git a/src/components/PaginationLinks/PaginationLinks.js b/src/components/PaginationLinks/PaginationLinks.js
index 9e626761e7..724b137f0f 100644
--- a/src/components/PaginationLinks/PaginationLinks.js
+++ b/src/components/PaginationLinks/PaginationLinks.js
@@ -88,6 +88,7 @@ export const PaginationLinks = props => {
       params={pagePathParams}
       to={{ search: stringify(prevSearchParams) }}
       title={intl.formatMessage({ id: 'PaginationLinks.previous' })}
+      ariaLabel={intl.formatMessage({ id: 'PaginationLinks.previous' })}
     >
       <IconArrowHead direction="left" size="big" rootClassName={css.arrowIcon} />
     </NamedLink>
@@ -111,6 +112,7 @@ export const PaginationLinks = props => {
       params={pagePathParams}
       to={{ search: stringify(nextSearchParams) }}
       title={intl.formatMessage({ id: 'PaginationLinks.next' })}
+      ariaLabel={intl.formatMessage({ id: 'PaginationLinks.next' })}
     >
       <IconArrowHead direction="right" size="big" rootClassName={css.arrowIcon} />
     </NamedLink>
@@ -139,6 +141,7 @@ export const PaginationLinks = props => {
         params={pagePathParams}
         to={{ search: stringify({ ...pageSearchParams, page: v }) }}
         title={intl.formatMessage({ id: 'PaginationLinks.toPage' }, { page: v })}
+        ariaLabel={intl.formatMessage({ id: 'PaginationLinks.toPage' }, { page: v })}
       >
         {v}
       </NamedLink>
diff --git a/src/components/PaginationLinks/__snapshots__/PaginationLinks.test.js.snap b/src/components/PaginationLinks/__snapshots__/PaginationLinks.test.js.snap
index 9651ea7465..cf54e8d7bd 100644
--- a/src/components/PaginationLinks/__snapshots__/PaginationLinks.test.js.snap
+++ b/src/components/PaginationLinks/__snapshots__/PaginationLinks.test.js.snap
@@ -25,6 +25,7 @@ exports[`PaginationLinks should match snapshot with both links disabled 1`] = `
     class="pageNumberList pageNumberList1Items"
   >
     <a
+      aria-label="PaginationLinks.toPage"
       class="toPageLink currentPage"
       href="/s?page=1&param=foobar"
       title="PaginationLinks.toPage"
@@ -57,6 +58,7 @@ exports[`PaginationLinks should match snapshot with both links enabled 1`] = `
   class="root"
 >
   <a
+    aria-label="PaginationLinks.previous"
     class="prev"
     href="/s?page=1&param=foobar"
     title="PaginationLinks.previous"
@@ -79,6 +81,7 @@ exports[`PaginationLinks should match snapshot with both links enabled 1`] = `
     class="pageNumberList pageNumberList3Items"
   >
     <a
+      aria-label="PaginationLinks.toPage"
       class="toPageLink"
       href="/s?page=1&param=foobar"
       title="PaginationLinks.toPage"
@@ -86,6 +89,7 @@ exports[`PaginationLinks should match snapshot with both links enabled 1`] = `
       1
     </a>
     <a
+      aria-label="PaginationLinks.toPage"
       class="toPageLink currentPage"
       href="/s?page=2&param=foobar"
       title="PaginationLinks.toPage"
@@ -93,6 +97,7 @@ exports[`PaginationLinks should match snapshot with both links enabled 1`] = `
       2
     </a>
     <a
+      aria-label="PaginationLinks.toPage"
       class="toPageLink"
       href="/s?page=3&param=foobar"
       title="PaginationLinks.toPage"
@@ -101,6 +106,7 @@ exports[`PaginationLinks should match snapshot with both links enabled 1`] = `
     </a>
   </div>
   <a
+    aria-label="PaginationLinks.next"
     class="next"
     href="/s?page=3&param=foobar"
     title="PaginationLinks.next"
@@ -147,6 +153,7 @@ exports[`PaginationLinks should match snapshot with prev disabled and next enabl
     class="pageNumberList pageNumberList3Items"
   >
     <a
+      aria-label="PaginationLinks.toPage"
       class="toPageLink currentPage"
       href="/s?page=1&param=foobar"
       title="PaginationLinks.toPage"
@@ -154,6 +161,7 @@ exports[`PaginationLinks should match snapshot with prev disabled and next enabl
       1
     </a>
     <a
+      aria-label="PaginationLinks.toPage"
       class="toPageLink"
       href="/s?page=2&param=foobar"
       title="PaginationLinks.toPage"
@@ -161,6 +169,7 @@ exports[`PaginationLinks should match snapshot with prev disabled and next enabl
       2
     </a>
     <a
+      aria-label="PaginationLinks.toPage"
       class="toPageLink"
       href="/s?page=3&param=foobar"
       title="PaginationLinks.toPage"
@@ -169,6 +178,7 @@ exports[`PaginationLinks should match snapshot with prev disabled and next enabl
     </a>
   </div>
   <a
+    aria-label="PaginationLinks.next"
     class="next"
     href="/s?page=2&param=foobar"
     title="PaginationLinks.next"
@@ -195,6 +205,7 @@ exports[`PaginationLinks should match snapshot with prev enabled and next disabl
   class="root"
 >
   <a
+    aria-label="PaginationLinks.previous"
     class="prev"
     href="/s?page=2&param=foobar"
     title="PaginationLinks.previous"
@@ -217,6 +228,7 @@ exports[`PaginationLinks should match snapshot with prev enabled and next disabl
     class="pageNumberList pageNumberList3Items"
   >
     <a
+      aria-label="PaginationLinks.toPage"
       class="toPageLink"
       href="/s?page=1&param=foobar"
       title="PaginationLinks.toPage"
@@ -224,6 +236,7 @@ exports[`PaginationLinks should match snapshot with prev enabled and next disabl
       1
     </a>
     <a
+      aria-label="PaginationLinks.toPage"
       class="toPageLink"
       href="/s?page=2&param=foobar"
       title="PaginationLinks.toPage"
@@ -231,6 +244,7 @@ exports[`PaginationLinks should match snapshot with prev enabled and next disabl
       2
     </a>
     <a
+      aria-label="PaginationLinks.toPage"
       class="toPageLink currentPage"
       href="/s?page=3&param=foobar"
       title="PaginationLinks.toPage"
diff --git a/src/components/index.js b/src/components/index.js
index b42fda1437..a0809da8a7 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -47,6 +47,7 @@ export { default as AspectRatioWrapper } from './AspectRatioWrapper/AspectRatioW
 export { default as ExternalLink } from './ExternalLink/ExternalLink';
 export { default as ExpandingTextarea } from './ExpandingTextarea/ExpandingTextarea';
 export { default as Form } from './Form/Form';
+export { default as KeyboardListener } from './KeyboardListener/KeyboardListener';
 export { default as LimitedAccessBanner } from './LimitedAccessBanner/LimitedAccessBanner';
 export { default as Logo } from './Logo/Logo';
 export { default as NamedLink } from './NamedLink/NamedLink';
diff --git a/src/containers/ContactDetailsPage/ContactDetailsForm/ContactDetailsForm.js b/src/containers/ContactDetailsPage/ContactDetailsForm/ContactDetailsForm.js
index 1be69e10f3..edc48f49a2 100644
--- a/src/containers/ContactDetailsPage/ContactDetailsForm/ContactDetailsForm.js
+++ b/src/containers/ContactDetailsPage/ContactDetailsForm/ContactDetailsForm.js
@@ -405,6 +405,7 @@ class ContactDetailsFormComponent extends Component {
                   type="password"
                   name="currentPassword"
                   id={formId ? `${formId}.currentPassword` : 'currentPassword'}
+                  disabled={!emailChanged}
                   autoComplete="current-password"
                   label={passwordLabel}
                   placeholder={passwordPlaceholder}
diff --git a/src/containers/EditListingPage/EditListingPage.test.js b/src/containers/EditListingPage/EditListingPage.test.js
index c62aef897c..46b510b656 100644
--- a/src/containers/EditListingPage/EditListingPage.test.js
+++ b/src/containers/EditListingPage/EditListingPage.test.js
@@ -383,7 +383,8 @@ describe('EditListingPage', () => {
 
     // Simulate user selecting subcategory
     await waitFor(() => {
-      const selectSubcategory = screen.getAllByRole('combobox')[1];
+      // first combobox is location searc, second the first category, third the subcategory
+      const selectSubcategory = screen.getAllByRole('combobox')[2];
       userEvent.selectOptions(selectSubcategory, screen.getByRole('option', { name: 'Adidas' }));
     });
     expect(getByRole('option', { name: 'Adidas' }).selected).toBe(true);
@@ -515,7 +516,8 @@ describe('EditListingPage', () => {
 
     // Simulate user interaction and select sub level category
     await waitFor(() => {
-      const selectSubcategory = screen.getAllByRole('combobox')[1];
+      // first combobox is location searc, second the first category, third the subcategory
+      const selectSubcategory = screen.getAllByRole('combobox')[2];
       userEvent.selectOptions(selectSubcategory, screen.getByRole('option', { name: 'Adidas' }));
     });
     expect(getByRole('option', { name: 'Adidas' }).selected).toBe(true);
diff --git a/src/containers/EditListingPage/EditListingWizard/EditListingAvailabilityPanel/WeeklyCalendar/WeeklyCalendar.js b/src/containers/EditListingPage/EditListingWizard/EditListingAvailabilityPanel/WeeklyCalendar/WeeklyCalendar.js
index a24520c77d..7b44799ef6 100644
--- a/src/containers/EditListingPage/EditListingWizard/EditListingAvailabilityPanel/WeeklyCalendar/WeeklyCalendar.js
+++ b/src/containers/EditListingPage/EditListingWizard/EditListingAvailabilityPanel/WeeklyCalendar/WeeklyCalendar.js
@@ -496,6 +496,10 @@ const WeeklyCalendar = props => {
             showUntilDate={thisWeek}
             startOfPrevRange={getStartOfPrevWeek(currentWeek, timeZone, firstDayOfWeek)}
             size="big"
+            aria-label={intl.formatMessage(
+              { id: 'EditListingAvailabilityPanel.WeeklyCalendar.screenreader.weekNavigation' },
+              { direction: 'previous' }
+            )}
           />
           <Next
             className={css.next}
@@ -503,6 +507,10 @@ const WeeklyCalendar = props => {
             showUntilDate={endOfAvailabilityExceptionRange(timeZone, TODAY)}
             startOfNextRange={getStartOfNextWeek(currentWeek, timeZone, firstDayOfWeek)}
             size="big"
+            aria-label={intl.formatMessage(
+              { id: 'EditListingAvailabilityPanel.WeeklyCalendar.screenreader.weekNavigation' },
+              { direction: 'next' }
+            )}
           />
         </div>
       </header>
diff --git a/src/containers/EditListingPage/EditListingWizard/EditListingPhotosPanel/ListingImage.js b/src/containers/EditListingPage/EditListingWizard/EditListingPhotosPanel/ListingImage.js
index 758d6f50a8..b09ba4231a 100644
--- a/src/containers/EditListingPage/EditListingWizard/EditListingPhotosPanel/ListingImage.js
+++ b/src/containers/EditListingPage/EditListingWizard/EditListingPhotosPanel/ListingImage.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
+import { useIntl } from 'react-intl';
 
 // Import shared components
 import {
@@ -15,9 +16,14 @@ import css from './ListingImage.module.css';
 // Cross shaped button on the top-right corner of the image thumbnail
 const RemoveImageButton = props => {
   const { className, rootClassName, onClick } = props;
+  const intl = useIntl();
   const classes = classNames(rootClassName || css.removeImage, className);
   return (
-    <button className={classes} onClick={onClick}>
+    <button
+      className={classes}
+      onClick={onClick}
+      aria-label={intl.formatMessage({ id: 'EditListingPage.screenreader.removeImage' })}
+    >
       <svg
         width="10px"
         height="10px"
diff --git a/src/containers/InboxPage/InboxSearchForm/InboxSortBy.js b/src/containers/InboxPage/InboxSearchForm/InboxSortBy.js
index 7471eb1d77..f2426019be 100644
--- a/src/containers/InboxPage/InboxSearchForm/InboxSortBy.js
+++ b/src/containers/InboxPage/InboxSearchForm/InboxSortBy.js
@@ -63,7 +63,7 @@ const InboxSortBy = props => {
       isOpen={isOpen}
       preferScreenWidthOnMobile
     >
-      <MenuLabel rootClassName={css.sortLabel}>
+      <MenuLabel id="inbox-sort-by-label" rootClassName={css.sortLabel}>
         {menuLabel}
         <IconArrowHead className={iconArrowClassName} direction="down" size="tiny" />
       </MenuLabel>
diff --git a/src/containers/ManageAccountPage/DeleteAccountForm/DeleteAccountForm.js b/src/containers/ManageAccountPage/DeleteAccountForm/DeleteAccountForm.js
index 21b86bbd22..8447eb2a85 100644
--- a/src/containers/ManageAccountPage/DeleteAccountForm/DeleteAccountForm.js
+++ b/src/containers/ManageAccountPage/DeleteAccountForm/DeleteAccountForm.js
@@ -165,7 +165,7 @@ const DeleteAccountForm = props => {
               />
               <br />
             </p>
-            <div className={confirmClasses}>
+            <div className={confirmClasses} aria-hidden={!deleteAccountConfirmed}>
               <H4 as="h3" className={css.confirmChangesTitle}>
                 <FormattedMessage id="DeleteAccountForm.confirmDeleteTitle" />
               </H4>
@@ -183,6 +183,7 @@ const DeleteAccountForm = props => {
                 type="password"
                 name="currentPassword"
                 id={formId ? `${formId}.currentPassword` : 'currentPassword'}
+                disabled={!deleteAccountConfirmed}
                 autoComplete="current-password"
                 label={intl.formatMessage({
                   id: 'DeleteAccountForm.passwordLabel',
diff --git a/src/containers/NotFoundPage/SearchForm/SearchForm.js b/src/containers/NotFoundPage/SearchForm/SearchForm.js
index d058b62799..f2fcb9acd6 100644
--- a/src/containers/NotFoundPage/SearchForm/SearchForm.js
+++ b/src/containers/NotFoundPage/SearchForm/SearchForm.js
@@ -74,6 +74,7 @@ const LocationSearchField = props => {
         const searchInput = { ...restInput, onChange: searchOnChange };
         return (
           <LocationAutocompleteInput
+            id="location-search-404"
             placeholder={intl.formatMessage({ id: 'NotFoundPage.SearchForm.placeholder' })}
             iconClassName={css.searchInputIcon}
             inputClassName={css.searchInput}
diff --git a/src/containers/PageBuilder/PageBuilder.js b/src/containers/PageBuilder/PageBuilder.js
index b20d5f7d80..152e9dbabe 100644
--- a/src/containers/PageBuilder/PageBuilder.js
+++ b/src/containers/PageBuilder/PageBuilder.js
@@ -136,7 +136,7 @@ const PageBuilder = props => {
               <Topbar as="header" className={css.topbar}>
                 <TopbarContainer currentPage={currentPage} />
               </Topbar>
-              <Main as="main" className={css.main}>
+              <Main as="main" id="main-content" className={css.main}>
                 {sections.length === 0 && inProgress ? (
                   <LoadingSpinner />
                 ) : (
diff --git a/src/containers/PageBuilder/PageBuilder.module.css b/src/containers/PageBuilder/PageBuilder.module.css
index a42b64dd78..cc2e650ca4 100644
--- a/src/containers/PageBuilder/PageBuilder.module.css
+++ b/src/containers/PageBuilder/PageBuilder.module.css
@@ -11,6 +11,10 @@
 
 .main {
   display: grid;
+  scroll-margin-top: var(--topbarHeight);
+  @media (--viewportMedium) {
+    scroll-margin-top: var(--topbarHeightDesktop);
+  }
 }
 
 .loading {
diff --git a/src/containers/PageBuilder/Primitives/SearchCTA/FilterCategories/FilterCategories.js b/src/containers/PageBuilder/Primitives/SearchCTA/FilterCategories/FilterCategories.js
index b6caa7b9c8..1fb3bd8c68 100644
--- a/src/containers/PageBuilder/Primitives/SearchCTA/FilterCategories/FilterCategories.js
+++ b/src/containers/PageBuilder/Primitives/SearchCTA/FilterCategories/FilterCategories.js
@@ -1,7 +1,7 @@
 import React, { useState, useRef } from 'react';
 import { Field } from 'react-final-form';
 import classNames from 'classnames';
-import { FormattedMessage } from '../../../../../util/reactIntl';
+import { FormattedMessage, useIntl } from '../../../../../util/reactIntl';
 
 import { OutsideClickHandler } from '../../../../../components';
 
@@ -11,6 +11,7 @@ const CategoryDropdown = ({ input, className, rootClassName, categories, alignLe
   const [isOpen, setIsOpen] = useState(false);
   const [activeIndex, setActiveIndex] = useState(-1);
   const [hasSelected, setHasSelected] = useState(false);
+  const intl = useIntl();
 
   const toggleDropdown = () => {
     setIsOpen(prev => !prev);
@@ -93,6 +94,9 @@ const CategoryDropdown = ({ input, className, rootClassName, categories, alignLe
       <div className={css.dropdownContainer}>
         <div
           role="combobox"
+          aria-label={intl.formatMessage({
+            id: 'PageBuilder.SearchCTA.CategoryFilter.placeholder',
+          })}
           aria-haspopup="listbox"
           aria-expanded={isOpen}
           aria-owns="category-listbox"
diff --git a/src/containers/PageBuilder/Primitives/SearchCTA/FilterCategories/FilterCategories.module.css b/src/containers/PageBuilder/Primitives/SearchCTA/FilterCategories/FilterCategories.module.css
index beb67e5abc..4e0c11b79b 100644
--- a/src/containers/PageBuilder/Primitives/SearchCTA/FilterCategories/FilterCategories.module.css
+++ b/src/containers/PageBuilder/Primitives/SearchCTA/FilterCategories/FilterCategories.module.css
@@ -82,6 +82,7 @@
     color: var(--colorGrey700);
     font-weight: 500;
 
+    &.activeOption,
     &:hover {
       color: var(--colorBlack);
       text-decoration: none;
diff --git a/src/containers/PageBuilder/Primitives/SearchCTA/FilterKeyword/FilterKeyword.js b/src/containers/PageBuilder/Primitives/SearchCTA/FilterKeyword/FilterKeyword.js
index 078d4ec890..39a607ad12 100644
--- a/src/containers/PageBuilder/Primitives/SearchCTA/FilterKeyword/FilterKeyword.js
+++ b/src/containers/PageBuilder/Primitives/SearchCTA/FilterKeyword/FilterKeyword.js
@@ -21,6 +21,9 @@ const FilterKeyword = props => {
         placeholder={intl.formatMessage({
           id: 'PageBuilder.SearchCTA.keywordFilterPlaceholder',
         })}
+        aria-label={intl.formatMessage({
+          id: 'PageBuilder.SearchCTA.keywordFilterPlaceholder',
+        })}
       />
     </div>
   );
diff --git a/src/containers/PageBuilder/Primitives/SearchCTA/FilterLocation/FilterLocation.js b/src/containers/PageBuilder/Primitives/SearchCTA/FilterLocation/FilterLocation.js
index b01c9a5679..54338277bf 100644
--- a/src/containers/PageBuilder/Primitives/SearchCTA/FilterLocation/FilterLocation.js
+++ b/src/containers/PageBuilder/Primitives/SearchCTA/FilterLocation/FilterLocation.js
@@ -33,6 +33,7 @@ const LocationSearchField = props => {
 
         return (
           <LocationAutocompleteInput
+            id="location-search-filter-location"
             className={css.customField}
             useDarkText={true}
             inputClassName={isCurrentLocation ? css.inputWithCurrentLocation : inputRootClass}
diff --git a/src/containers/PasswordChangePage/PasswordChangeForm/PasswordChangeForm.js b/src/containers/PasswordChangePage/PasswordChangeForm/PasswordChangeForm.js
index 6a87d606b8..2882e515b5 100644
--- a/src/containers/PasswordChangePage/PasswordChangeForm/PasswordChangeForm.js
+++ b/src/containers/PasswordChangePage/PasswordChangeForm/PasswordChangeForm.js
@@ -233,6 +233,7 @@ class PasswordChangeForm extends Component {
                   type="password"
                   id="currentPassword"
                   name="currentPassword"
+                  disabled={pristine}
                   autoComplete="current-password"
                   label={passwordLabel}
                   placeholder={passwordPlaceholder}
diff --git a/src/containers/SearchPage/BookingDateRangeFilter/FilterPopupForSidebar.js b/src/containers/SearchPage/BookingDateRangeFilter/FilterPopupForSidebar.js
index f812a27edd..6b5efa9b3a 100644
--- a/src/containers/SearchPage/BookingDateRangeFilter/FilterPopupForSidebar.js
+++ b/src/containers/SearchPage/BookingDateRangeFilter/FilterPopupForSidebar.js
@@ -10,8 +10,6 @@ import IconPlus from '../IconPlus/IconPlus';
 
 import css from './FilterPopupForSidebar.module.css';
 
-const KEY_CODE_ESCAPE = 27;
-
 /**
  * FilterPopupForSidebar component
  *
@@ -51,6 +49,11 @@ class FilterPopupForSidebar extends Component {
   handleSubmit(values) {
     const { onSubmit } = this.props;
     this.setState({ isOpen: false });
+    const button = document.getElementById(`${this.props.id}.toggle`);
+    if (button) {
+      button.focus();
+    }
+
     onSubmit(values);
   }
 
@@ -58,6 +61,11 @@ class FilterPopupForSidebar extends Component {
     const { onSubmit, onClear } = this.props;
     this.setState({ isOpen: false });
 
+    const button = document.getElementById(`${this.props.id}.toggle`);
+    if (button) {
+      button.focus();
+    }
+
     if (onClear) {
       onClear();
     }
@@ -69,6 +77,11 @@ class FilterPopupForSidebar extends Component {
     const { onSubmit, onCancel, initialValues } = this.props;
     this.setState({ isOpen: false });
 
+    const button = document.getElementById(`${this.props.id}.toggle`);
+    if (button) {
+      button.focus();
+    }
+
     if (onCancel) {
       onCancel();
     }
@@ -82,16 +95,36 @@ class FilterPopupForSidebar extends Component {
 
   handleKeyDown(e) {
     // Gather all escape presses to close menu
-    if (e.keyCode === KEY_CODE_ESCAPE) {
+    if (e.key === 'Escape') {
+      const button = document.getElementById(`${this.props.id}.toggle`);
+      if (button) {
+        button.focus();
+      }
+
+      this.toggleOpen(false);
+    } else if (e.key === 'ArrowDown' && this.filter.contains(e.target) && !this.state.isOpen) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.toggleOpen(true);
+    } else if (e.key === 'ArrowUp' && this.filter.contains(e.target) && this.state.isOpen) {
+      e.preventDefault();
+      e.stopPropagation();
       this.toggleOpen(false);
     }
   }
 
   toggleOpen(enforcedState) {
+    const callback = () => {
+      const form = document.getElementById(`${this.props.id}.form`);
+      const currentDate = form?.querySelector('[data-current="true"]');
+      if (this.state.isOpen) {
+        window.setTimeout(() => currentDate?.focus(), 100);
+      }
+    };
     if (enforcedState) {
-      this.setState({ isOpen: enforcedState });
+      this.setState({ isOpen: enforcedState }, callback);
     } else {
-      this.setState(prevState => ({ isOpen: !prevState.isOpen }));
+      this.setState(prevState => ({ isOpen: !prevState.isOpen }), callback);
     }
   }
 
@@ -137,7 +170,7 @@ class FilterPopupForSidebar extends Component {
     const popupClasses = classNames(css.popup, { [css.isOpen]: this.state.isOpen });
     const popupSizeClasses = popupClassName || css.popupSize;
     const contentStyle = this.positionStyleForContent();
-
+    const formId = `${id}.form`;
     return (
       <OutsideClickHandler className={css.root} onOutsideClick={this.handleBlur}>
         <div
@@ -150,6 +183,7 @@ class FilterPopupForSidebar extends Component {
           <div className={css.filterHeader}>
             <button
               type="button"
+              id={`${id}.toggle`}
               className={css.labelButton}
               onClick={() => this.toggleOpen()}
               aria-label={ariaLabel}
@@ -182,7 +216,7 @@ class FilterPopupForSidebar extends Component {
           >
             {this.state.isOpen ? (
               <FilterForm
-                id={`${id}.form`}
+                id={formId}
                 paddingClasses={popupSizeClasses}
                 showAsPopup
                 initialValues={initialValues}
diff --git a/src/containers/SearchPage/BookingDateRangeFilter/FilterPopupForSidebar.module.css b/src/containers/SearchPage/BookingDateRangeFilter/FilterPopupForSidebar.module.css
index bba82a4e34..43a8fb2167 100644
--- a/src/containers/SearchPage/BookingDateRangeFilter/FilterPopupForSidebar.module.css
+++ b/src/containers/SearchPage/BookingDateRangeFilter/FilterPopupForSidebar.module.css
@@ -53,6 +53,19 @@
   border: none;
   padding: 0;
   cursor: pointer;
+
+  &:focus,
+  &:hover {
+    color: var(--marketplaceColor);
+  }
+
+  &:focus {
+    & .label,
+    & .label * {
+      color: var(--colorBlack);
+      color: var(--marketplaceColorDark);
+    }
+  }
 }
 
 .labelButtonContent {
diff --git a/src/containers/SearchPage/FilterComponent.js b/src/containers/SearchPage/FilterComponent.js
index eeaae44514..9f1f9dd0c9 100644
--- a/src/containers/SearchPage/FilterComponent.js
+++ b/src/containers/SearchPage/FilterComponent.js
@@ -39,9 +39,10 @@ const FilterComponent = props => {
   const name = key.replace(/\s+/g, '-');
   const getAriaLabel = (label, values) => {
     const status = values ? 'active' : 'inactive';
+    const mode = liveEdit ? 'live' : 'normal';
     return intl.formatMessage(
       { id: 'SearchPage.screenreader.openFilterButton' },
-      { label, status, values }
+      { label, status, values, mode }
     );
   };
 
diff --git a/src/containers/SearchPage/FilterForm/FilterForm.js b/src/containers/SearchPage/FilterForm/FilterForm.js
index af756beb48..ef03735229 100644
--- a/src/containers/SearchPage/FilterForm/FilterForm.js
+++ b/src/containers/SearchPage/FilterForm/FilterForm.js
@@ -27,7 +27,7 @@ import css from './FilterForm.module.css';
  */
 const FilterForm = props => {
   const intl = useIntl();
-  const { liveEdit = false, onChange, onSubmit, onCancel, onClear, ...rest } = props;
+  const { liveEdit = false, onChange, onSubmit, onCancel, onClear, clearButton, ...rest } = props;
 
   if (liveEdit && !onChange) {
     throw new Error('FilterForm: if liveEdit is true you need to provide onChange function');
@@ -45,6 +45,7 @@ const FilterForm = props => {
     }
   };
 
+  const ClearButton = () => (clearButton ? clearButton : null);
   const formCallbacks = liveEdit ? { onSubmit: () => null } : { onSubmit, onCancel, onClear };
   return (
     <FinalForm
@@ -80,7 +81,6 @@ const FilterForm = props => {
             id={id}
             className={classes}
             onSubmit={handleSubmit}
-            tabIndex="0"
             style={{ ...style }}
             role="search"
             aria-label={intl.formatMessage(
@@ -91,7 +91,10 @@ const FilterForm = props => {
             <div className={classNames(paddingClasses || css.contentWrapper)}>{children}</div>
 
             {liveEdit ? (
-              <FormSpy onChange={handleChange} subscription={{ values: true, dirty: true }} />
+              <>
+                <FormSpy onChange={handleChange} subscription={{ values: true, dirty: true }} />
+                <ClearButton />
+              </>
             ) : (
               <div className={css.buttonsWrapper}>
                 <button className={css.clearButton} type="button" onClick={onClear}>
diff --git a/src/containers/SearchPage/FilterPlain/FilterPlain.js b/src/containers/SearchPage/FilterPlain/FilterPlain.js
index 8f0074307f..2111a7a7e3 100644
--- a/src/containers/SearchPage/FilterPlain/FilterPlain.js
+++ b/src/containers/SearchPage/FilterPlain/FilterPlain.js
@@ -3,11 +3,55 @@ import classNames from 'classnames';
 
 import { FormattedMessage, injectIntl, intlShape } from '../../../util/reactIntl';
 
+import { KeyboardListener } from '../../../components';
+
 import IconPlus from '../IconPlus/IconPlus';
 import FilterForm from '../FilterForm/FilterForm';
 
 import css from './FilterPlain.module.css';
 
+const FOCUSABLE_ELEMENTS = 'button, [tabindex], input, select, textarea';
+
+const moveFocusToFirstFocusableElement = formId => {
+  const form = document.getElementById(formId);
+  const focusableElements = form.querySelectorAll(FOCUSABLE_ELEMENTS);
+  if (focusableElements.length > 0) {
+    const firstFocusableElement = Array.from(focusableElements).find(
+      element => !(element.tabIndex < 0 || element.disabled)
+    );
+    firstFocusableElement?.focus();
+  }
+};
+const moveFocusToLastFocusableElement = formId => {
+  const form = document.getElementById(formId);
+  const focusableElements = form.querySelectorAll(FOCUSABLE_ELEMENTS);
+  if (focusableElements.length > 0) {
+    const lastFocusableElement = Array.from(focusableElements)
+      .reverse()
+      .find(element => !(element.tabIndex < 0 || element.disabled));
+    lastFocusableElement?.focus();
+  }
+};
+
+const moveFocusToNextFocusableElement = (formId, direction = 'next') => {
+  const form = document.getElementById(formId);
+  const focusableElements = form.querySelectorAll(FOCUSABLE_ELEMENTS);
+  if (focusableElements.length > 0) {
+    const currentIndex = Array.from(focusableElements).findIndex(
+      element => element === document.activeElement
+    );
+    const targetIndex =
+      direction === 'next' && currentIndex < focusableElements.length - 1
+        ? currentIndex + 1
+        : direction === 'next'
+        ? 0
+        : direction === 'previous' && currentIndex > 0
+        ? currentIndex - 1
+        : focusableElements.length - 1;
+    focusableElements[targetIndex]?.focus();
+  }
+};
+
 /**
  * FilterPlain component
  * TODO: change to functional component
@@ -42,10 +86,14 @@ class FilterPlainComponent extends Component {
   handleChange(values) {
     const { onSubmit } = this.props;
     onSubmit(values);
+    window.__focusedElementId__ = null;
   }
 
   handleClear() {
-    const { onSubmit, onClear } = this.props;
+    const { id, onSubmit, onClear } = this.props;
+
+    // Due to async API call, focused element is not guaranteed to be the clear button.
+    window.__focusedElementId__ = `${id}.form.clear`;
 
     if (onClear) {
       onClear();
@@ -54,8 +102,16 @@ class FilterPlainComponent extends Component {
     onSubmit(null);
   }
 
-  toggleIsOpen() {
-    this.setState(prevState => ({ isOpen: !prevState.isOpen }));
+  toggleIsOpen(options = {}) {
+    const { callback, enforcedState } = options || {};
+    const cb = callback || (() => {});
+    if (enforcedState !== undefined) {
+      this.setState({ isOpen: enforcedState }, cb);
+    } else {
+      this.setState(prevState => {
+        return { isOpen: !prevState.isOpen };
+      }, cb);
+    }
   }
 
   render() {
@@ -72,16 +128,123 @@ class FilterPlainComponent extends Component {
       initialValues,
       keepDirtyOnReinitialize = false,
       ariaLabel,
+      containerId, // Note: this could be used to identify different filter containers
     } = this.props;
     const formId = `${id}.form`;
     const classes = classNames(rootClassName || css.root, className);
+    const inertMaybe = this.state.isOpen ? {} : { inert: '' };
+    const isInput = element => element?.tagName?.toLowerCase() === 'input';
 
     return (
-      <div className={classes}>
+      <KeyboardListener
+        className={classes}
+        containerId={containerId}
+        keyMap={{
+          Enter: {
+            action: 'toggle',
+            callback: (...args) => {
+              const [event, containerId, action] = args;
+              if (event.target.id === `${id}.toggle`) {
+                const isOpen = this.state.isOpen;
+                event.preventDefault();
+                event.stopPropagation();
+                this.toggleIsOpen({
+                  callback: () => {
+                    if (!isOpen) {
+                      moveFocusToFirstFocusableElement(formId);
+                    }
+                  },
+                });
+              }
+            },
+          },
+          ArrowDown: {
+            action: 'down',
+            callback: (...args) => {
+              const [event, containerId, action] = args;
+              if (event.target.id === `${id}.toggle`) {
+                event.preventDefault();
+                event.stopPropagation();
+                if (!this.state.isOpen) {
+                  this.toggleIsOpen({
+                    callback: () => moveFocusToFirstFocusableElement(formId),
+                    enforcedState: true,
+                  });
+                }
+              } else if (this.filterContent.contains(event.target) && !isInput(event.target)) {
+                event.preventDefault();
+                event.stopPropagation();
+                moveFocusToNextFocusableElement(formId, 'next');
+              }
+            },
+          },
+          ArrowUp: {
+            action: 'close',
+            callback: (...args) => {
+              const [event, containerId, action] = args;
+              if (event.target.id === `${id}.toggle`) {
+                event.preventDefault();
+                event.stopPropagation();
+                if (this.state.isOpen) {
+                  this.toggleIsOpen({ enforcedState: false });
+                }
+              } else if (this.filterContent.contains(event.target) && !isInput(event.target)) {
+                event.preventDefault();
+                event.stopPropagation();
+                moveFocusToNextFocusableElement(formId, 'previous');
+              }
+            },
+          },
+          Home: {
+            action: 'first',
+            callback: (...args) => {
+              const [event, containerId, action] = args;
+              if (!this.state.isOpen && event.target.id === `${id}.toggle`) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.toggleIsOpen({
+                  callback: () => moveFocusToFirstFocusableElement(formId),
+                  enforcedState: true,
+                });
+              }
+            },
+          },
+          End: {
+            action: 'last',
+            callback: (...args) => {
+              const [event, containerId, action] = args;
+              if (!this.state.isOpen && event.target.id === `${id}.toggle`) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.toggleIsOpen({
+                  callback: () => moveFocusToLastFocusableElement(formId),
+                  enforcedState: true,
+                });
+              }
+            },
+          },
+          Escape: {
+            action: 'close',
+            callback: (...args) => {
+              const [event, containerId, action] = args;
+              if (this.state.isOpen) {
+                event.preventDefault();
+                event.stopPropagation();
+                const button = document.getElementById(`${id}.toggle`);
+                if (button) {
+                  button.focus();
+                }
+                this.toggleIsOpen({ enforcedState: false });
+              }
+            },
+          },
+        }}
+      >
         <div className={css.filterHeader}>
           <button
+            id={`${id}.toggle`}
             className={css.labelButton}
-            onClick={this.toggleIsOpen}
+            onClick={() => this.toggleIsOpen()}
             aria-label={ariaLabel}
             aria-expanded={this.state.isOpen}
             aria-controls={this.state.isOpen ? formId : ''}
@@ -108,6 +271,7 @@ class FilterPlainComponent extends Component {
           ref={node => {
             this.filterContent = node;
           }}
+          {...inertMaybe}
         >
           <FilterForm
             id={formId}
@@ -115,14 +279,21 @@ class FilterPlainComponent extends Component {
             onChange={this.handleChange}
             initialValues={initialValues}
             keepDirtyOnReinitialize={keepDirtyOnReinitialize}
+            clearButton={
+              <button
+                id={`${formId}.clear`}
+                type="button"
+                className={css.clearButton}
+                onClick={this.handleClear}
+              >
+                <FormattedMessage id={'FilterPlain.clear'} />
+              </button>
+            }
           >
             {children}
           </FilterForm>
-          <button className={css.clearButton} onClick={this.handleClear}>
-            <FormattedMessage id={'FilterPlain.clear'} />
-          </button>
         </div>
-      </div>
+      </KeyboardListener>
     );
   }
 }
diff --git a/src/containers/SearchPage/FilterPlain/FilterPlain.module.css b/src/containers/SearchPage/FilterPlain/FilterPlain.module.css
index 7e704ad875..a89eff29dd 100644
--- a/src/containers/SearchPage/FilterPlain/FilterPlain.module.css
+++ b/src/containers/SearchPage/FilterPlain/FilterPlain.module.css
@@ -31,6 +31,14 @@
   &:hover {
     color: var(--marketplaceColor);
   }
+
+  &:focus {
+    & .label,
+    & .label * {
+      color: var(--colorBlack);
+      color: var(--marketplaceColorDark);
+    }
+  }
 }
 
 .labelButtonContent {
diff --git a/src/containers/SearchPage/FilterPopup/FilterPopup.js b/src/containers/SearchPage/FilterPopup/FilterPopup.js
index 3f44110740..45dd7a419a 100644
--- a/src/containers/SearchPage/FilterPopup/FilterPopup.js
+++ b/src/containers/SearchPage/FilterPopup/FilterPopup.js
@@ -3,14 +3,62 @@ import classNames from 'classnames';
 
 import { injectIntl, intlShape } from '../../../util/reactIntl';
 
-import { OutsideClickHandler } from '../../../components';
+import { KeyboardListener, OutsideClickHandler } from '../../../components';
 
 import PopupOpenerButton from '../PopupOpenerButton/PopupOpenerButton';
 import FilterForm from '../FilterForm/FilterForm';
 
 import css from './FilterPopup.module.css';
 
-const KEY_CODE_ESCAPE = 27;
+const FOCUSABLE_ELEMENTS = 'button, [tabindex], input, select, textarea';
+
+const moveFocusToFirstFocusableElement = formId => {
+  if (formId.indexOf('.dates.popup.form') > 0) {
+    // NOTE: this is a special case for the Dates filter.
+    // It would be better if the logic is moved to the DatePicker component.
+    const currentDate = document.getElementById(formId)?.querySelector('[data-current="true"]');
+    currentDate?.focus();
+  } else {
+    const form = document.getElementById(formId);
+    const focusableElements = form.querySelectorAll(FOCUSABLE_ELEMENTS);
+    if (focusableElements.length > 0) {
+      const firstFocusableElement = Array.from(focusableElements).find(
+        element => !(element.tabIndex < 0 || element.disabled)
+      );
+      firstFocusableElement?.focus();
+    }
+  }
+};
+
+const moveFocusToLastFocusableElement = formId => {
+  const form = document.getElementById(formId);
+  const focusableElements = form.querySelectorAll(FOCUSABLE_ELEMENTS);
+  if (focusableElements.length > 0) {
+    const lastFocusableElement = Array.from(focusableElements)
+      .reverse()
+      .find(element => !(element.tabIndex < 0 || element.disabled));
+    lastFocusableElement?.focus();
+  }
+};
+
+const moveFocusToNextFocusableElement = (formId, direction = 'next') => {
+  const form = document.getElementById(formId);
+  const focusableElements = form.querySelectorAll(FOCUSABLE_ELEMENTS);
+  if (focusableElements.length > 0) {
+    const currentIndex = Array.from(focusableElements).findIndex(
+      element => element === document.activeElement
+    );
+    const targetIndex =
+      direction === 'next' && currentIndex < focusableElements.length - 1
+        ? currentIndex + 1
+        : direction === 'next'
+        ? 0
+        : direction === 'previous' && currentIndex > 0
+        ? currentIndex - 1
+        : focusableElements.length - 1;
+    focusableElements[targetIndex]?.focus();
+  }
+};
 
 /**
  * FilterPopup component
@@ -44,21 +92,32 @@ class FilterPopup extends Component {
     this.handleClear = this.handleClear.bind(this);
     this.handleCancel = this.handleCancel.bind(this);
     this.handleBlur = this.handleBlur.bind(this);
+    this.handleOutsideClick = this.handleOutsideClick.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.toggleOpen = this.toggleOpen.bind(this);
+    this.toggleIsOpen = this.toggleIsOpen.bind(this);
     this.positionStyleForContent = this.positionStyleForContent.bind(this);
   }
 
   handleSubmit(values) {
-    const { onSubmit } = this.props;
+    const { id, onSubmit } = this.props;
     this.setState({ isOpen: false });
+    const button = document.getElementById(`${id}.toggle`);
+    if (button) {
+      button.focus();
+    }
+
     onSubmit(values);
   }
 
   handleClear() {
-    const { onSubmit, onClear } = this.props;
+    const { id, onSubmit, onClear } = this.props;
     this.setState({ isOpen: false });
 
+    const button = document.getElementById(`${id}.toggle`);
+    if (button) {
+      button.focus();
+    }
+
     if (onClear) {
       onClear();
     }
@@ -67,9 +126,14 @@ class FilterPopup extends Component {
   }
 
   handleCancel() {
-    const { onSubmit, onCancel, initialValues } = this.props;
+    const { id, onSubmit, onCancel, initialValues } = this.props;
     this.setState({ isOpen: false });
 
+    const button = document.getElementById(`${id}.toggle`);
+    if (button) {
+      button.focus();
+    }
+
     if (onCancel) {
       onCancel();
     }
@@ -77,22 +141,34 @@ class FilterPopup extends Component {
     onSubmit(initialValues);
   }
 
-  handleBlur() {
+  handleBlur(event) {
+    const hasBothTargets = event.target && event.relatedTarget;
+    if (this.state.isOpen && hasBothTargets && !this.filter.contains(event.relatedTarget)) {
+      this.setState({ isOpen: false });
+    }
+  }
+
+  handleOutsideClick() {
     this.setState({ isOpen: false });
   }
 
   handleKeyDown(e) {
     // Gather all escape presses to close menu
-    if (e.keyCode === KEY_CODE_ESCAPE) {
-      this.toggleOpen(false);
+    if (e.key === 'Escape') {
+      this.toggleIsOpen({ enforcedState: false });
     }
   }
 
-  toggleOpen(enforcedState) {
-    if (enforcedState) {
-      this.setState({ isOpen: enforcedState });
+  toggleIsOpen(options = {}) {
+    const { callback, enforcedState } = options || {};
+    const cb = callback || (() => {});
+
+    if (enforcedState !== undefined) {
+      this.setState({ isOpen: enforcedState }, cb);
     } else {
-      this.setState(prevState => ({ isOpen: !prevState.isOpen }));
+      this.setState(prevState => {
+        return { isOpen: !prevState.isOpen };
+      }, cb);
     }
   }
 
@@ -133,6 +209,7 @@ class FilterPopup extends Component {
       keepDirtyOnReinitialize = false,
       contentPlacementOffset = 0,
       ariaLabel,
+      containerId, // Note: this could be used to identify different filter containers
     } = this.props;
 
     const classes = classNames(rootClassName || css.root, className);
@@ -140,51 +217,170 @@ class FilterPopup extends Component {
     const popupSizeClasses = popupClassName || css.popupSize;
     const contentStyle = this.positionStyleForContent();
     const formId = `${id}.form`;
+    const delayedMoveFocus = (formId, isMenuOpen, moveFocusFn) => {
+      if (isMenuOpen) {
+        setTimeout(() => {
+          moveFocusFn(formId);
+        }, 100);
+      }
+    };
+
+    const isInput = element => element?.tagName?.toLowerCase() === 'input';
 
     return (
-      <OutsideClickHandler onOutsideClick={this.handleBlur}>
-        <div
+      <OutsideClickHandler onOutsideClick={this.handleOutsideClick}>
+        <KeyboardListener
           className={classes}
-          onKeyDown={this.handleKeyDown}
-          ref={node => {
-            this.filter = node;
+          containerId={containerId}
+          keyMap={{
+            Enter: {
+              action: 'toggle',
+              callback: (...args) => {
+                const [event, containerId, action] = args;
+                if (event.target.id === `${id}.toggle`) {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  const isOpen = this.state.isOpen;
+                  this.toggleIsOpen({
+                    callback: () => {
+                      delayedMoveFocus(formId, !isOpen, moveFocusToFirstFocusableElement);
+                    },
+                  });
+                }
+              },
+            },
+            ArrowDown: {
+              action: 'down',
+              callback: (...args) => {
+                const [event, containerId, action] = args;
+                if (!this.state.isOpen && event.target.id === `${id}.toggle`) {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  this.toggleIsOpen({
+                    callback: () => {
+                      delayedMoveFocus(formId, true, moveFocusToFirstFocusableElement);
+                    },
+                    enforcedState: true,
+                  });
+                } else if (this.filterContent.contains(event.target) && !isInput(event.target)) {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  moveFocusToNextFocusableElement(formId, 'next');
+                }
+              },
+            },
+            ArrowUp: {
+              action: 'up',
+              callback: (...args) => {
+                const [event, containerId, action] = args;
+                if (this.state.isOpen && event.target.id === `${id}.toggle`) {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  const button = document.getElementById(`${id}.toggle`);
+                  if (button) {
+                    button.focus();
+                  }
+
+                  this.toggleIsOpen({ enforcedState: false });
+                } else if (this.filterContent.contains(event.target) && !isInput(event.target)) {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  moveFocusToNextFocusableElement(formId, 'previous');
+                }
+              },
+            },
+            Home: {
+              action: 'first',
+              callback: (...args) => {
+                const [event, containerId, action] = args;
+                if (!this.state.isOpen && event.target.id === `${id}.toggle`) {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  this.toggleIsOpen({
+                    callback: () => {
+                      delayedMoveFocus(formId, true, moveFocusToFirstFocusableElement);
+                    },
+                    enforcedState: true,
+                  });
+                }
+              },
+            },
+            End: {
+              action: 'last',
+              callback: (...args) => {
+                const [event, containerId, action] = args;
+                if (!this.state.isOpen && event.target.id === `${id}.toggle`) {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  this.toggleIsOpen({
+                    callback: () => {
+                      delayedMoveFocus(formId, true, moveFocusToLastFocusableElement);
+                    },
+                    enforcedState: true,
+                  });
+                }
+              },
+            },
+            Escape: {
+              action: 'close',
+              callback: (...args) => {
+                const [event, containerId, action] = args;
+                if (this.state.isOpen) {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  const button = document.getElementById(`${id}.toggle`);
+                  if (button) {
+                    button.focus();
+                  }
+                  this.toggleIsOpen({ enforcedState: false });
+                }
+              },
+            },
           }}
         >
-          <PopupOpenerButton
-            isSelected={isSelected}
-            labelMaxWidth={labelMaxWidth}
-            toggleOpen={this.toggleOpen}
-            aria-label={ariaLabel}
-            aria-expanded={this.state.isOpen}
-            aria-controls={this.state.isOpen ? formId : ''}
-          >
-            {label}
-          </PopupOpenerButton>
           <div
-            id={id}
-            className={popupClasses}
             ref={node => {
-              this.filterContent = node;
+              this.filter = node;
             }}
-            style={contentStyle}
+            onBlur={this.handleBlur}
           >
-            {this.state.isOpen ? (
-              <FilterForm
-                id={formId}
-                paddingClasses={popupSizeClasses}
-                showAsPopup
-                contentPlacementOffset={contentPlacementOffset}
-                initialValues={initialValues}
-                keepDirtyOnReinitialize={keepDirtyOnReinitialize}
-                onSubmit={this.handleSubmit}
-                onCancel={this.handleCancel}
-                onClear={this.handleClear}
-              >
-                {children}
-              </FilterForm>
-            ) : null}
+            <PopupOpenerButton
+              id={`${id}.toggle`}
+              isSelected={isSelected}
+              labelMaxWidth={labelMaxWidth}
+              toggleOpen={() => this.toggleIsOpen()}
+              aria-label={ariaLabel}
+              aria-expanded={this.state.isOpen}
+              aria-controls={this.state.isOpen ? formId : ''}
+            >
+              {label}
+            </PopupOpenerButton>
+            <div
+              id={id}
+              className={popupClasses}
+              ref={node => {
+                this.filterContent = node;
+              }}
+              style={contentStyle}
+            >
+              {this.state.isOpen ? (
+                <FilterForm
+                  id={formId}
+                  paddingClasses={popupSizeClasses}
+                  showAsPopup
+                  contentPlacementOffset={contentPlacementOffset}
+                  initialValues={initialValues}
+                  keepDirtyOnReinitialize={keepDirtyOnReinitialize}
+                  onSubmit={this.handleSubmit}
+                  onCancel={this.handleCancel}
+                  onClear={this.handleClear}
+                >
+                  {children}
+                </FilterForm>
+              ) : null}
+            </div>
           </div>
-        </div>
+        </KeyboardListener>
       </OutsideClickHandler>
     );
   }
diff --git a/src/containers/SearchPage/IntegerRangeFilter/FieldSelectIntegerRange.js b/src/containers/SearchPage/IntegerRangeFilter/FieldSelectIntegerRange.js
index d1549aa83d..a05bf4cde6 100644
--- a/src/containers/SearchPage/IntegerRangeFilter/FieldSelectIntegerRange.js
+++ b/src/containers/SearchPage/IntegerRangeFilter/FieldSelectIntegerRange.js
@@ -209,11 +209,11 @@ const RangeInput = props => {
               [css.valueInSidebar]: isInSideBar,
               [css.invalidInput]: isMinInvalid,
             })}
-            type="number"
+            inputMode="numeric"
+            pattern="\d*"
             name={`${name}_min`}
             min={defaultMinValue}
             max={defaultMaxValue}
-            step={step}
             placeholder={defaultMinValue}
             value={fieldValues.minValue}
             onChange={handleMinValueChange}
@@ -230,12 +230,12 @@ const RangeInput = props => {
               [css.valueInSidebar]: isInSideBar,
               [css.invalidInput]: isMaxInvalid,
             })}
-            type="number"
+            inputMode="numeric"
+            pattern="\d*"
             name={`${name}_max`}
             min={defaultMinValue}
             max={defaultMaxValue}
             placeholder={defaultMaxValue}
-            step={step}
             value={fieldValues.maxValue}
             onChange={handleMaxValueChange}
             onBlur={handleMaxValueBlur}
diff --git a/src/containers/SearchPage/SearchFiltersPrimary/SearchFiltersPrimary.js b/src/containers/SearchPage/SearchFiltersPrimary/SearchFiltersPrimary.js
index 8ae801870f..17e64e0dad 100644
--- a/src/containers/SearchPage/SearchFiltersPrimary/SearchFiltersPrimary.js
+++ b/src/containers/SearchPage/SearchFiltersPrimary/SearchFiltersPrimary.js
@@ -7,6 +7,18 @@ import PopupOpenerButton from '../PopupOpenerButton/PopupOpenerButton';
 
 import css from './SearchFiltersPrimary.module.css';
 
+const handleKeyDown = toggleSecondaryFiltersOpen => e => {
+  if (e.key === 'ArrowDown') {
+    e.preventDefault();
+    e.stopPropagation();
+    toggleSecondaryFiltersOpen(true);
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault();
+    e.stopPropagation();
+    toggleSecondaryFiltersOpen(false);
+  }
+};
+
 /**
  * SearchFiltersPrimary component
  *
@@ -38,6 +50,7 @@ const SearchFiltersPrimaryComponent = props => {
       toggleOpen={() => {
         toggleSecondaryFiltersOpen(!isSecondaryFiltersOpen);
       }}
+      onKeyDown={handleKeyDown(toggleSecondaryFiltersOpen)}
     >
       <FormattedMessage
         id="SearchFiltersPrimary.moreFiltersButton"
diff --git a/src/containers/SearchPage/SearchPage.module.css b/src/containers/SearchPage/SearchPage.module.css
index f19a780835..39a74aae11 100644
--- a/src/containers/SearchPage/SearchPage.module.css
+++ b/src/containers/SearchPage/SearchPage.module.css
@@ -32,6 +32,7 @@
     position: relative;
     padding-top: var(--topbarHeightDesktop);
     min-height: calc(100vh - var(--topbarHeightDesktop));
+    scroll-margin-top: var(--topbarHeightDesktop);
   }
 }
 
@@ -151,6 +152,8 @@
     border-left-width: 1px;
     border-left-style: solid;
     border-left-color: var(--colorGrey100);
+
+    scroll-margin-top: var(--topbarHeightDesktop);
   }
 
   @media (--viewportLarge) {
diff --git a/src/containers/SearchPage/SearchPage.test.js b/src/containers/SearchPage/SearchPage.test.js
index ff6a04ee83..bdc5ba7a6b 100644
--- a/src/containers/SearchPage/SearchPage.test.js
+++ b/src/containers/SearchPage/SearchPage.test.js
@@ -346,8 +346,8 @@ describe('SearchPage', () => {
       expect(queryByText('Cat')).not.toBeInTheDocument();
       // Has no Boat filter (primary filter tied to 'sell-bicycles' listing type)
       expect(queryByText('Boat')).not.toBeInTheDocument();
-      // Has(!) Amenities filter (secondary filter)
-      expect(getByText('Amenities')).toBeInTheDocument();
+      // Has(!) Amenities filter (secondary filter) (it contains also legend for screen readers)
+      expect(getAllByText('Amenities')).toHaveLength(2);
       // Has Single Select Test filter
       expect(getByText('Single Select Test')).toBeInTheDocument();
       expect(getByText('Enum 1')).toBeInTheDocument();
@@ -532,13 +532,13 @@ describe('SearchPage', () => {
       expect(queryByText('Freshwater')).not.toBeInTheDocument();
     });
 
-    // Test category intercation: click "Fish"
+    // Test category intercation: click "Cats"
     await waitFor(() => {
       userEvent.click(getByRole('button', { name: 'Choose Cats.' }));
     });
 
-    // Has no Cat filter (primary)
-    expect(getByText('Cat')).toBeInTheDocument();
+    // Has Cat filter (enum) using SelectMultipleFilter component (it contains also legend for screen readers)
+    expect(getAllByText('Cat')).toHaveLength(2);
 
     expect(getByText('Dogs')).toBeInTheDocument();
     expect(queryByText('Poodle')).not.toBeInTheDocument();
@@ -588,8 +588,8 @@ describe('SearchPage', () => {
       userEvent.click(getByRole('button', { name: 'Choose Sell bicycles.' }));
     });
 
-    // Has Boat filter filter (primary)
-    expect(getByText('Boat')).toBeInTheDocument();
+    // Has Boat filter (enum) using SelectMultipleFilter component (it contains also legend for screen readers)
+    expect(getAllByText('Boat')).toHaveLength(2);
   });
 
   it('Check that Listing type filter is not revealed when using a listing type path param', async () => {
diff --git a/src/containers/SearchPage/SearchPageWithGrid.js b/src/containers/SearchPage/SearchPageWithGrid.js
index c348c23025..245abf76de 100644
--- a/src/containers/SearchPage/SearchPageWithGrid.js
+++ b/src/containers/SearchPage/SearchPageWithGrid.js
@@ -342,6 +342,7 @@ export class SearchPageComponent extends Component {
           onSelect={this.handleSortBy}
           showAsPopup
           mode={mode}
+          labelId={`${mode}-search-page-sort-by`}
           contentPlacementOffset={FILTER_DROPDOWN_OFFSET}
         />
       ) : null;
@@ -400,6 +401,7 @@ export class SearchPageComponent extends Component {
                     id={filterId}
                     className={css.filter}
                     config={filterConfig}
+                    containerId="SearchPageWithGrid_DesktopFilters"
                     listingCategories={listingCategories}
                     marketplaceCurrency={marketplaceCurrency}
                     urlQueryParams={validQueryParams}
@@ -418,7 +420,7 @@ export class SearchPageComponent extends Component {
             </div>
           </aside>
 
-          <div className={css.layoutWrapperMain} role="main">
+          <div id="main-content" className={css.layoutWrapperMain} role="main">
             <div className={css.searchResultContainer}>
               <SearchFiltersMobile
                 className={css.searchFiltersMobileList}
@@ -449,6 +451,7 @@ export class SearchPageComponent extends Component {
                       key={key}
                       id={filterId}
                       config={filterConfig}
+                      containerId="SearchPage_MobileFilters"
                       listingCategories={listingCategories}
                       marketplaceCurrency={marketplaceCurrency}
                       urlQueryParams={validQueryParams}
diff --git a/src/containers/SearchPage/SearchPageWithMap.js b/src/containers/SearchPage/SearchPageWithMap.js
index 010f3a7573..42a1d0576f 100644
--- a/src/containers/SearchPage/SearchPageWithMap.js
+++ b/src/containers/SearchPage/SearchPageWithMap.js
@@ -487,6 +487,7 @@ export class SearchPageComponent extends Component {
           onSelect={this.handleSortBy}
           showAsPopup
           mode={mode}
+          labelId={`${mode}-search-page-sort-by`}
           contentPlacementOffset={FILTER_DROPDOWN_OFFSET}
         />
       ) : null;
@@ -532,7 +533,7 @@ export class SearchPageComponent extends Component {
         schema={schema}
       >
         <TopbarContainer rootClassName={topbarClasses} currentSearchParams={validQueryParams} />
-        <div className={css.container} role="main">
+        <div id="main-content" className={css.container} role="main">
           <div className={css.searchResultContainer}>
             <SearchFiltersMobile
               className={css.searchFiltersMobileMap}
@@ -563,6 +564,7 @@ export class SearchPageComponent extends Component {
                     key={key}
                     id={filterId}
                     config={filterConfig}
+                    containerId="SearchPage_MobileFilters"
                     listingCategories={listingCategories}
                     marketplaceCurrency={marketplaceCurrency}
                     urlQueryParams={validQueryParams}
@@ -596,6 +598,7 @@ export class SearchPageComponent extends Component {
                       key={key}
                       id={filterId}
                       config={filterConfig}
+                      containerId="SearchPageWithMap_PrimaryFilters"
                       listingCategories={listingCategories}
                       marketplaceCurrency={marketplaceCurrency}
                       urlQueryParams={validQueryParams}
@@ -629,6 +632,7 @@ export class SearchPageComponent extends Component {
                         key={key}
                         id={filterId}
                         config={filterConfig}
+                        containerId="SearchPageWithMap_SecondaryFilters"
                         listingCategories={listingCategories}
                         marketplaceCurrency={marketplaceCurrency}
                         urlQueryParams={validQueryParams}
diff --git a/src/containers/SearchPage/SearchResultsPanel/SearchResultsPanel.js b/src/containers/SearchPage/SearchResultsPanel/SearchResultsPanel.js
index 6f787c64aa..55964c94b2 100644
--- a/src/containers/SearchPage/SearchResultsPanel/SearchResultsPanel.js
+++ b/src/containers/SearchPage/SearchResultsPanel/SearchResultsPanel.js
@@ -74,18 +74,19 @@ const SearchResultsPanel = props => {
 
   return (
     <div className={classes}>
-      <div className={isMapVariant ? css.listingCardsMapVariant : css.listingCards}>
+      <ul className={isMapVariant ? css.listingCardsMapVariant : css.listingCards}>
         {listings.map(l => (
-          <ListingCard
-            className={css.listingCard}
-            key={l.id.uuid}
-            listing={l}
-            renderSizes={cardRenderSizes(isMapVariant)}
-            setActiveListing={setActiveListing}
-          />
+          <li key={l.id.uuid} className={css.resultItem}>
+            <ListingCard
+              className={css.listingCard}
+              listing={l}
+              renderSizes={cardRenderSizes(isMapVariant)}
+              setActiveListing={setActiveListing}
+            />
+          </li>
         ))}
         {props.children}
-      </div>
+      </ul>
       {paginationLinks}
     </div>
   );
diff --git a/src/containers/SearchPage/SearchResultsPanel/SearchResultsPanel.module.css b/src/containers/SearchPage/SearchResultsPanel/SearchResultsPanel.module.css
index b005818513..6b11625af7 100644
--- a/src/containers/SearchPage/SearchResultsPanel/SearchResultsPanel.module.css
+++ b/src/containers/SearchPage/SearchResultsPanel/SearchResultsPanel.module.css
@@ -7,6 +7,7 @@
 
 .listingCardsMapVariant {
   padding: 0 0 96px 0;
+  margin: 0;
 
   display: grid;
   grid-template-columns: repeat(1, 1fr);
@@ -22,6 +23,12 @@
   }
 }
 
+.resultItem {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
 .listingCards {
   padding: 0 0 72px 0;
 
diff --git a/src/containers/SearchPage/SelectMultipleFilter/SelectMultipleFilter.js b/src/containers/SearchPage/SelectMultipleFilter/SelectMultipleFilter.js
index a67064baed..a75eeda890 100644
--- a/src/containers/SearchPage/SelectMultipleFilter/SelectMultipleFilter.js
+++ b/src/containers/SearchPage/SelectMultipleFilter/SelectMultipleFilter.js
@@ -16,9 +16,10 @@ import css from './SelectMultipleFilter.module.css';
 // TODO: Live edit didn't work with FieldCheckboxGroup
 //       There's a mutation problem: formstate.dirty is not reliable with it.
 const GroupOfFieldCheckboxes = props => {
-  const { id, className, name, options } = props;
+  const { id, className, name, options, legend } = props;
   return (
-    <div className={className}>
+    <fieldset className={className}>
+      {legend ? <legend className={css.accessibilityLegend}>{legend}</legend> : null}
       <ul className={css.list}>
         {options.map(optionConfig => {
           const { option, label } = optionConfig;
@@ -30,7 +31,7 @@ const GroupOfFieldCheckboxes = props => {
           );
         })}
       </ul>
-    </div>
+    </fieldset>
   );
 };
 
@@ -139,6 +140,7 @@ const SelectMultipleFilter = props => {
         name={name}
         id={`${id}-checkbox-group`}
         options={options}
+        legend={label}
       />
     </FilterPopup>
   ) : (
@@ -160,6 +162,7 @@ const SelectMultipleFilter = props => {
         name={name}
         id={`${id}-checkbox-group`}
         options={options}
+        legend={label}
       />
     </FilterPlain>
   );
diff --git a/src/containers/SearchPage/SelectMultipleFilter/SelectMultipleFilter.module.css b/src/containers/SearchPage/SelectMultipleFilter/SelectMultipleFilter.module.css
index 490f4eb692..bf97c0047d 100644
--- a/src/containers/SearchPage/SelectMultipleFilter/SelectMultipleFilter.module.css
+++ b/src/containers/SearchPage/SelectMultipleFilter/SelectMultipleFilter.module.css
@@ -23,6 +23,12 @@
   }
 }
 
+.accessibilityLegend {
+  visibility: hidden;
+  position: absolute;
+  left: -9999px;
+}
+
 .list {
   margin: 0;
 }
diff --git a/src/containers/SearchPage/SelectSingleFilter/SelectSingleFilter.module.css b/src/containers/SearchPage/SelectSingleFilter/SelectSingleFilter.module.css
index d1e3e88cd0..faa4d2c77a 100644
--- a/src/containers/SearchPage/SelectSingleFilter/SelectSingleFilter.module.css
+++ b/src/containers/SearchPage/SelectSingleFilter/SelectSingleFilter.module.css
@@ -9,6 +9,7 @@
 .labelPlainSelected {
   color: var(--marketplaceColor);
 
+  &:focus,
   &:hover {
     color: var(--marketplaceColorDark);
   }
diff --git a/src/containers/SearchPage/SortBy/SortByPopup.js b/src/containers/SearchPage/SortBy/SortByPopup.js
index 1db460c28f..dbf1cd0c57 100644
--- a/src/containers/SearchPage/SortBy/SortByPopup.js
+++ b/src/containers/SearchPage/SortBy/SortByPopup.js
@@ -33,6 +33,7 @@ const SortByPopup = props => {
     menuLabelRootClassName,
     urlParam,
     label,
+    labelId,
     options,
     initialValue,
     contentPlacementOffset = 0,
@@ -65,7 +66,7 @@ const SortByPopup = props => {
       isOpen={isOpen}
       preferScreenWidthOnMobile
     >
-      <MenuLabel rootClassName={menuLabelClasses}>
+      <MenuLabel rootClassName={menuLabelClasses} id={labelId}>
         {menuLabel}
         <IconArrowHead className={iconArrowClassName} direction="down" size="tiny" />
       </MenuLabel>
diff --git a/src/containers/TopbarContainer/Topbar/Topbar.js b/src/containers/TopbarContainer/Topbar/Topbar.js
index 006dce9391..729f3707cc 100644
--- a/src/containers/TopbarContainer/Topbar/Topbar.js
+++ b/src/containers/TopbarContainer/Topbar/Topbar.js
@@ -12,6 +12,7 @@ import { parse, stringify } from '../../../util/urlHelpers';
 import { createResourceLocatorString, matchPathname, pathByRouteName } from '../../../util/routes';
 import {
   Button,
+  IconArrowHead,
   LimitedAccessBanner,
   LinkedLogo,
   Modal,
@@ -311,8 +312,31 @@ const TopbarComponent = props => {
     <div className={css.searchMenu} />
   );
 
+  const handleSkipToMainContent = e => {
+    e.preventDefault();
+    const mainContent = document.getElementById('main-content');
+    if (mainContent) {
+      mainContent.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      // Focus the main content for screen readers
+      mainContent.setAttribute('tabindex', '-1');
+      mainContent.focus();
+      // Remove tabindex after blur to avoid tabbing into it later
+      mainContent.addEventListener(
+        'blur',
+        () => {
+          mainContent.removeAttribute('tabindex');
+        },
+        { once: true }
+      );
+    }
+  };
+
   return (
     <div className={classes}>
+      <Button onClick={handleSkipToMainContent} className={css.skipToMainContent}>
+        <FormattedMessage id="Topbar.skipToMainContent" />
+        <IconArrowHead direction="right" size="small" rootClassName={css.skiptoMainArrow} />
+      </Button>
       <LimitedAccessBanner
         isAuthenticated={isAuthenticated}
         isLoggedInAs={isLoggedInAs}
@@ -335,6 +359,7 @@ const TopbarComponent = props => {
           {notificationDot}
         </Button>
         <LinkedLogo
+          id="logo-topbar-mobile"
           layout={'mobile'}
           alt={intl.formatMessage({ id: 'Topbar.logoIcon' })}
           linkToExternalSite={config?.topbar?.logoLink}
diff --git a/src/containers/TopbarContainer/Topbar/Topbar.module.css b/src/containers/TopbarContainer/Topbar/Topbar.module.css
index 6cf6f1dcc9..cc93c29f60 100644
--- a/src/containers/TopbarContainer/Topbar/Topbar.module.css
+++ b/src/containers/TopbarContainer/Topbar/Topbar.module.css
@@ -8,6 +8,36 @@
   position: relative;
 }
 
+/* Skip to main content link - visually hidden until focused */
+.skipToMainContent {
+  /* Position it off-screen by default */
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  z-index: calc(var(--zIndexTopbar) + 1);
+
+  /* Make it visible when focused */
+  &:focus {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: auto;
+    padding: 18px 24px;
+    border-radius: 0;
+
+    @media (--viewportMedium) {
+      padding: 24px 24px;
+    }
+  }
+}
+.skiptoMainArrow {
+  stroke: var(--colorWhite);
+  fill: var(--colorWhite);
+}
+
 .container {
   /* Size */
   width: 100%;
diff --git a/src/containers/TopbarContainer/Topbar/TopbarDesktop/CustomLinksMenu/CustomLinksMenu.js b/src/containers/TopbarContainer/Topbar/TopbarDesktop/CustomLinksMenu/CustomLinksMenu.js
index 80c9c7c609..882b7cdcbd 100644
--- a/src/containers/TopbarContainer/Topbar/TopbarDesktop/CustomLinksMenu/CustomLinksMenu.js
+++ b/src/containers/TopbarContainer/Topbar/TopbarDesktop/CustomLinksMenu/CustomLinksMenu.js
@@ -5,7 +5,6 @@ import LinksMenu from './LinksMenu';
 
 import css from './CustomLinksMenu.module.css';
 
-const draftId = '00000000-0000-0000-0000-000000000000';
 const createListingLinkConfigMaybe = (intl, showLink) =>
   showLink
     ? [
@@ -14,8 +13,7 @@ const createListingLinkConfigMaybe = (intl, showLink) =>
           text: intl.formatMessage({ id: 'TopbarDesktop.createListing' }),
           type: 'internal',
           route: {
-            name: 'EditListingPage',
-            params: { slug: 'draft', id: draftId, type: 'new', tab: 'details' },
+            name: 'NewListingPage',
           },
           highlight: true,
         },
diff --git a/src/containers/TopbarContainer/Topbar/TopbarDesktop/CustomLinksMenu/LinksMenu.js b/src/containers/TopbarContainer/Topbar/TopbarDesktop/CustomLinksMenu/LinksMenu.js
index a6d4b06cab..574ba8b4dc 100644
--- a/src/containers/TopbarContainer/Topbar/TopbarDesktop/CustomLinksMenu/LinksMenu.js
+++ b/src/containers/TopbarContainer/Topbar/TopbarDesktop/CustomLinksMenu/LinksMenu.js
@@ -146,8 +146,13 @@ const LinksMenu = props => {
         contentPosition="left"
         isOpen={isOpen}
         onToggleActive={setIsOpen}
+        skipFocusOnNavigation={true}
       >
-        <MenuLabel className={css.linkMenuLabel} isOpenClassName={css.linkMenuIsOpen}>
+        <MenuLabel
+          id="links-menu-label"
+          className={css.linkMenuLabel}
+          isOpenClassName={css.linkMenuIsOpen}
+        >
           <MenuLabelContent showMoreLabel={showMoreLabel} isOpen={isOpen} intl={intl} />
         </MenuLabel>
         <MenuContent className={css.linkMenuContent}>
diff --git a/src/containers/TopbarContainer/Topbar/TopbarDesktop/CustomLinksMenu/PriorityLinks.js b/src/containers/TopbarContainer/Topbar/TopbarDesktop/CustomLinksMenu/PriorityLinks.js
index 380dc9e096..c00ac92926 100644
--- a/src/containers/TopbarContainer/Topbar/TopbarDesktop/CustomLinksMenu/PriorityLinks.js
+++ b/src/containers/TopbarContainer/Topbar/TopbarDesktop/CustomLinksMenu/PriorityLinks.js
@@ -35,6 +35,7 @@ export const CreateListingMenuLink = props => {
 const PriorityLink = ({ linkConfig }) => {
   const { text, type, href, route, highlight } = linkConfig;
   const classes = classNames(css.priorityLink, { [css.highlight]: highlight });
+  const id = `priority-link-${text.toLowerCase().replace(/ /g, '-')}`;
 
   // Note: if the config contains 'route' keyword,
   // then in-app linking config has been resolved already.
@@ -42,7 +43,7 @@ const PriorityLink = ({ linkConfig }) => {
     // Internal link
     const { name, params, to } = route || {};
     return (
-      <NamedLink name={name} params={params} to={to} className={classes}>
+      <NamedLink name={name} params={params} to={to} className={classes} id={id}>
         <span className={css.priorityLinkLabel}>{text}</span>
       </NamedLink>
     );
diff --git a/src/containers/TopbarContainer/Topbar/TopbarDesktop/TopbarDesktop.js b/src/containers/TopbarContainer/Topbar/TopbarDesktop/TopbarDesktop.js
index affcbcf7bd..1a52f76d39 100644
--- a/src/containers/TopbarContainer/Topbar/TopbarDesktop/TopbarDesktop.js
+++ b/src/containers/TopbarContainer/Topbar/TopbarDesktop/TopbarDesktop.js
@@ -21,7 +21,7 @@ import css from './TopbarDesktop.module.css';
 
 const SignupLink = () => {
   return (
-    <NamedLink name="SignupPage" className={css.topbarLink}>
+    <NamedLink id="signup-link" name="SignupPage" className={css.topbarLink}>
       <span className={css.topbarLinkLabel}>
         <FormattedMessage id="TopbarDesktop.signup" />
       </span>
@@ -31,7 +31,7 @@ const SignupLink = () => {
 
 const LoginLink = () => {
   return (
-    <NamedLink name="LoginPage" className={css.topbarLink}>
+    <NamedLink id="login-link" name="LoginPage" className={css.topbarLink}>
       <span className={css.topbarLinkLabel}>
         <FormattedMessage id="TopbarDesktop.login" />
       </span>
@@ -42,7 +42,12 @@ const LoginLink = () => {
 const InboxLink = ({ notificationCount, inboxTab }) => {
   const notificationDot = notificationCount > 0 ? <div className={css.notificationDot} /> : null;
   return (
-    <NamedLink className={css.topbarLink} name="InboxPage" params={{ tab: inboxTab }}>
+    <NamedLink
+      id="inbox-link"
+      className={css.topbarLink}
+      name="InboxPage"
+      params={{ tab: inboxTab }}
+    >
       <span className={css.topbarLinkLabel}>
         <FormattedMessage id="TopbarDesktop.inbox" />
         {notificationDot}
@@ -59,8 +64,13 @@ const ProfileMenu = ({ currentPage, currentUser, onLogout, showManageListingsLin
   };
 
   return (
-    <Menu ariaLabel={intl.formatMessage({ id: 'TopbarDesktop.screenreader.profileMenu' })}>
-      <MenuLabel className={css.profileMenuLabel} isOpenClassName={css.profileMenuIsOpen}>
+    <Menu skipFocusOnNavigation={true}>
+      <MenuLabel
+        id="profile-menu-label"
+        className={css.profileMenuLabel}
+        isOpenClassName={css.profileMenuIsOpen}
+        ariaLabel={intl.formatMessage({ id: 'TopbarDesktop.screenreader.profileMenu' })}
+      >
         <Avatar className={css.avatar} user={currentUser} disableProfileLink />
       </MenuLabel>
       <MenuContent className={css.profileMenuContent}>
@@ -195,6 +205,7 @@ const TopbarDesktop = props => {
       aria-label={intl.formatMessage({ id: 'TopbarDesktop.screenreader.topbarNavigation' })}
     >
       <LinkedLogo
+        id="logo-topbar-desktop"
         className={css.logoLink}
         layout="desktop"
         alt={intl.formatMessage({ id: 'TopbarDesktop.logo' }, { marketplaceName })}
diff --git a/src/containers/TopbarContainer/Topbar/TopbarMobileMenu/TopbarMobileMenu.js b/src/containers/TopbarContainer/Topbar/TopbarMobileMenu/TopbarMobileMenu.js
index e2560ab184..971a325251 100644
--- a/src/containers/TopbarContainer/Topbar/TopbarMobileMenu/TopbarMobileMenu.js
+++ b/src/containers/TopbarContainer/Topbar/TopbarMobileMenu/TopbarMobileMenu.js
@@ -39,17 +39,21 @@ const CustomLinkComponent = ({ linkConfig, currentPage }) => {
     const { name, params, to } = route || {};
     const className = classNames(css.navigationLink, getCurrentPageClass(name));
     return (
-      <NamedLink name={name} params={params} to={to} className={className}>
-        <span className={css.menuItemBorder} />
-        {text}
-      </NamedLink>
+      <li className={className}>
+        <NamedLink name={name} params={params} to={to}>
+          <span className={css.menuItemBorder} />
+          {text}
+        </NamedLink>
+      </li>
     );
   }
   return (
-    <ExternalLink href={href} className={css.navigationLink}>
-      <span className={css.menuItemBorder} />
-      {text}
-    </ExternalLink>
+    <li className={css.navigationLink}>
+      <ExternalLink href={href}>
+        <span className={css.menuItemBorder} />
+        {text}
+      </ExternalLink>
+    </li>
   );
 };
 
@@ -151,12 +155,11 @@ const TopbarMobileMenu = props => {
   };
 
   const manageListingsLinkMaybe = showCreateListingsLink ? (
-    <NamedLink
-      className={classNames(css.navigationLink, currentPageClass('ManageListingsPage'))}
-      name="ManageListingsPage"
-    >
-      <FormattedMessage id="TopbarMobileMenu.yourListingsLink" />
-    </NamedLink>
+    <li className={classNames(css.navigationLink, currentPageClass('ManageListingsPage'))}>
+      <NamedLink name="ManageListingsPage">
+        <FormattedMessage id="TopbarMobileMenu.yourListingsLink" />
+      </NamedLink>
+    </li>
   ) : null;
 
   return (
@@ -170,30 +173,26 @@ const TopbarMobileMenu = props => {
           <FormattedMessage id="TopbarMobileMenu.logoutLink" />
         </InlineTextButton>
 
-        <div className={css.accountLinksWrapper}>
-          <NamedLink
-            className={classNames(css.inbox, currentPageClass(`InboxPage:${inboxTab}`))}
-            name="InboxPage"
-            params={{ tab: inboxTab }}
-          >
-            <FormattedMessage id="TopbarMobileMenu.inboxLink" />
-            {notificationCountBadge}
-          </NamedLink>
+        <ul className={css.accountLinksWrapper}>
+          <li className={classNames(css.inbox, currentPageClass(`InboxPage:${inboxTab}`))}>
+            <NamedLink name="InboxPage" params={{ tab: inboxTab }}>
+              <FormattedMessage id="TopbarMobileMenu.inboxLink" />
+              {notificationCountBadge}
+            </NamedLink>
+          </li>
           {manageListingsLinkMaybe}
-          <NamedLink
-            className={classNames(css.navigationLink, currentPageClass('ProfileSettingsPage'))}
-            name="ProfileSettingsPage"
-          >
-            <FormattedMessage id="TopbarMobileMenu.profileSettingsLink" />
-          </NamedLink>
-          <NamedLink
-            className={classNames(css.navigationLink, currentPageClass('AccountSettingsPage'))}
-            name="AccountSettingsPage"
-          >
-            <FormattedMessage id="TopbarMobileMenu.accountSettingsLink" />
-          </NamedLink>
-        </div>
-        <div className={css.customLinksWrapper}>{extraLinks}</div>
+          <li className={classNames(css.navigationLink, currentPageClass('ProfileSettingsPage'))}>
+            <NamedLink name="ProfileSettingsPage">
+              <FormattedMessage id="TopbarMobileMenu.profileSettingsLink" />
+            </NamedLink>
+          </li>
+          <li className={classNames(css.navigationLink, currentPageClass('AccountSettingsPage'))}>
+            <NamedLink name="AccountSettingsPage">
+              <FormattedMessage id="TopbarMobileMenu.accountSettingsLink" />
+            </NamedLink>
+          </li>
+        </ul>
+        <ul className={css.customLinksWrapper}>{extraLinks}</ul>
         <div className={css.spacer} />
       </div>
       <div className={css.footer}>{createListingsLinkMaybe}</div>
diff --git a/src/containers/TopbarContainer/Topbar/TopbarSearchForm/TopbarSearchForm.js b/src/containers/TopbarContainer/Topbar/TopbarSearchForm/TopbarSearchForm.js
index f78efb5131..860813af5d 100644
--- a/src/containers/TopbarContainer/Topbar/TopbarSearchForm/TopbarSearchForm.js
+++ b/src/containers/TopbarContainer/Topbar/TopbarSearchForm/TopbarSearchForm.js
@@ -46,17 +46,22 @@ const KeywordSearchField = props => {
     </div>
   );
 };
-
-const LocationSearchField = props => {
-  const { desktopInputRootClass, intl, isMobile = false, inputRef, onLocationChange } = props;
-  const submitButton = ({}) => (
+const SubmitButton = props => {
+  const intl = useIntl();
+  return (
     <button
       className={css.searchSubmit}
       aria-label={intl.formatMessage({ id: 'TopbarDesktop.screenreader.search' })}
+      type="submit"
+      {...props}
     >
       <IconSearchDesktop />
     </button>
   );
+};
+
+const LocationSearchField = props => {
+  const { desktopInputRootClass, intl, isMobile = false, inputRef, onLocationChange } = props;
   return (
     <Field
       name="location"
@@ -75,6 +80,7 @@ const LocationSearchField = props => {
 
         return (
           <LocationAutocompleteInput
+            id={isMobile ? 'location-search-mobile' : 'location-search'}
             className={isMobile ? css.mobileInputRoot : desktopInputRootClass}
             iconClassName={isMobile ? css.mobileIcon : css.desktopIcon}
             inputClassName={isMobile ? css.mobileInput : css.desktopInput}
@@ -85,7 +91,7 @@ const LocationSearchField = props => {
             inputRef={inputRef}
             input={{ ...restInput, onChange: searchOnChange }}
             meta={meta}
-            submitButton={submitButton}
+            submitButton={SubmitButton}
             ariaLabel={intl.formatMessage({ id: 'TopbarDesktop.screenreader.search' })}
           />
         );
diff --git a/src/routing/Routes.js b/src/routing/Routes.js
index c31bcce183..b6950b28c6 100644
--- a/src/routing/Routes.js
+++ b/src/routing/Routes.js
@@ -92,6 +92,19 @@ const handleLocationChanged = (dispatch, location, routeConfiguration, delayed)
   dispatch(locationChanged({ location, canonicalPath: path }));
 };
 
+const handleFocusedElement = delayed => {
+  if (window.__focusedElementId__) {
+    delayed = window.setTimeout(() => {
+      const focusedElement = document.getElementById(window.__focusedElementId__);
+      if (focusedElement) {
+        focusedElement.focus();
+      } else {
+        window.__focusedElementId__ = null;
+      }
+    }, 300);
+  }
+};
+
 /**
  * RouteComponentRenderer handles loadData calls on client-side.
  * It also checks authentication and redirects unauthenticated users
@@ -123,6 +136,7 @@ class RouteComponentRenderer extends Component {
     // Calling loadData on initial rendering (on client side).
     callLoadData(this.props);
     handleLocationChanged(dispatch, location, routeConfiguration, this.delayed);
+    handleFocusedElement(this.focusedElementDelay);
   }
 
   componentDidUpdate(prevProps) {
@@ -136,12 +150,16 @@ class RouteComponentRenderer extends Component {
       callLoadData(this.props);
       handleLocationChanged(dispatch, location, routeConfiguration, this.delayed);
     }
+    handleFocusedElement(this.focusedElementDelay);
   }
 
   componentWillUnmount() {
     if (this.delayed) {
       window.clearTimeout(this.resetTimeoutId);
     }
+    if (this.focusedElementDelay) {
+      window.clearTimeout(this.focusedElementDelay);
+    }
   }
 
   render() {
diff --git a/src/translations/en.json b/src/translations/en.json
index d202eddee7..c987dfb7a9 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -204,6 +204,7 @@
   "EditListingAvailabilityPanel.WeeklyCalendar.fetchExceptionsError": "Fetching availability exception data failed",
   "EditListingAvailabilityPanel.WeeklyCalendar.notAvailable": "Not available",
   "EditListingAvailabilityPanel.WeeklyCalendar.scheduleTitle": "Schedule for",
+  "EditListingAvailabilityPanel.WeeklyCalendar.screenreader.weekNavigation": "{direction, select, next {Next week} other {Previous week}}",
   "EditListingAvailabilityPanel.WeeklyCalendar.seats": "{seats, plural, one {{seats} seat} other {{seats} seats}}",
   "EditListingAvailabilityPanel.addException": "Add an availability exception",
   "EditListingAvailabilityPanel.availabilityPlanInfo": "When is this listing available for booking? Start by setting a default weekly schedule. After that you can adjust the availability for specific dates.",
@@ -287,6 +288,7 @@
   "EditListingLocationPanel.createListingTitle": "Location",
   "EditListingLocationPanel.title": "Edit the location of {listingTitle}",
   "EditListingPage.loadingListingData": "Loading listing data…",
+  "EditListingPage.screenreader.removeImage": "Remove image",
   "EditListingPage.titleCreateListing": "Post a new listing | {panelHeading}",
   "EditListingPage.titleEditListing": "Edit listing | {panelHeading}",
   "EditListingPhotosForm.addImagesTip": "Tip: Upload 2-3 good-quality photos from different angles.",
@@ -932,7 +934,7 @@
   "SearchPage.schemaDescription": "Showing search results",
   "SearchPage.schemaForSearch": "a query",
   "SearchPage.schemaTitle": "Search results for {searchTitle} | {marketplaceName} | {h1}",
-  "SearchPage.screenreader.openFilterButton": "{label} filter. {status, select, active {Current selection: {values}.} other {Not in use.}}",
+  "SearchPage.screenreader.openFilterButton": "{label} filter. {status, select, active {Current selection: {values}.} other {Not in use.}} {mode, select, live {Changing filter values will update the search page immediately.} other {}}",
   "SearchResultsPanel.screenreader.pagination": "Pagination",
   "SearchPage.searchError": "Search failed. Please try again.",
   "SeatsFilter.labelSelected": "Seats: {seatCount}",
@@ -1132,6 +1134,7 @@
   "Topbar.menuIcon": "Open menu",
   "Topbar.mobileSearchHelp": "Find what you are looking for.",
   "Topbar.searchIcon": "Open search",
+  "Topbar.skipToMainContent": "Skip to content",
   "TopbarDesktop.LinksMenu.all": "Menu",
   "TopbarDesktop.LinksMenu.more": "More",
   "TopbarDesktop.accountSettingsLink": "Account settings",