@tpzdsp/next-toolkit 1.4.3 → 1.4.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tpzdsp/next-toolkit",
-  "version": "1.4.3",
+  "version": "1.4.5",
   "description": "A reusable React component library for Next.js applications",
   "type": "module",
   "private": false,

package/src/assets/styles/globals.css

@@ -23,6 +23,10 @@
 
 /* Component-specific styles */
 @layer components {
+  .focus-yellow {
+    @apply z-20 focus:border-[#ffbf47] focus:outline focus:outline-[3px] focus:outline-[#ffbf47];
+  }
+
   .library-button {
     @apply inline-flex items-center justify-center rounded-md font-medium transition-colors;
   }

package/src/assets/styles/ol.css

@@ -1,44 +1,170 @@
 @import 'ol/ol.css';
 @import 'ol-geocoder/dist/ol-geocoder.min.css';
 
+/* Universal OpenLayers control focus style */
+#map:focus,
+.ol-viewport:focus,
+.ol-control:focus,
+.ol-control button:focus,
+.ol-control button:focus-visible,
+.ol-attribution:focus,
+.ol-attribution button:focus,
+.ol-zoom:focus,
+.ol-zoom button:focus,
+.ol-layer-switcher-toggle:focus,
+.ol-layer-switcher-close:focus,
+.ol-layer-switcher-panel button:focus,
+.ol-attribution ul li a:focus,
+.ol-attribution ul li a:focus-visible,
+.ol-geocoder ul.gcd-txt-result > li > a:focus,
+.ol-geocoder ul.gcd-txt-result > li > a:focus-visible {
+  outline: 3px solid #ffbf47 !important;
+  border-color: #ffbf47 !important;
+  z-index: 2;
+}
+
+.ol-geocoder #gcd-input-search:focus,
+.ol-geocoder .gcd-txt-search:focus,
+.ol-geocoder .gcd-txt-search:focus-visible {
+  background-color: #ffbf47 !important;
+  z-index: 2;
+}
+
+.ol-geocoder .gcd-txt-input:focus,
+.ol-geocoder .gcd-txt-input:focus-visible {
+  box-shadow:
+    inset 0 0 0 1px #ffbf47,
+    inset 0 0 6px #ffbf47;
+}
+
+/* Zoom control container */
 .ol-zoom {
+  top: 1.5rem;
+  right: 1rem;
   left: unset;
-  right: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  z-index: 10;
+}
+
+/* Zoom buttons */
+.ol-zoom button,
+.ol-control button {
+  width: 40px;
+  height: 40px;
+  background: #fff;
+  color: #0b0c0c;
+  font-size: 2rem;
+  font-weight: bold;
+  line-height: 1;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+  cursor: pointer;
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s,
+    background 0.2s;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ol-zoom button:hover,
+.ol-control button:hover {
+  background: #f3f2f1;
+  border-color: #1d70b8;
+  outline: unset;
 }
 
+/* Layer switcher styles */
 .ol-layer-switcher {
-  top: 65px;
-  right: 0.5rem;
+  top: 0px;
+  right: 1rem;
 }
 
-.ol-btn {
-  display: flex !important;
-  justify-content: center;
+.ol-layer-switcher-toggle {
+  position: absolute;
+  top: 110px;
+  right: 0px;
+}
+
+.ol-layer-switcher-toggle button {
+  width: 40px;
+  height: 40px;
+  background: #fff;
+  border: 2px solid #505a5f;
+  color: #0b0c0c;
+  font-size: 1.5rem;
+  font-weight: bold;
+  line-height: 1;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+  cursor: pointer;
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s,
+    background 0.2s;
+  margin: 0;
+  padding: 0;
+  display: flex;
   align-items: center;
+  justify-content: center;
 }
 
 .ol-layer-switcher-panel {
   position: absolute;
-  top: 0;
-  right: -100%; /* Start off-screen */
-  min-width: fit-content;
-  max-width: 80vw;
-  background-color: #008938;
+  top: 110px;
+  right: -100%;
   display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 10px;
-  gap: 10px;
+  flex-direction: column;
+  align-items: stretch;
+  padding: 1rem 1rem;
+  min-width: 220px;
+  background: #fff;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  gap: 0.5rem;
   transition: right 0.3s ease-in-out;
-  overflow: hidden;
-  white-space: nowrap;
 }
 
 .ol-layer-switcher-panel.open {
-  right: 1.5rem; /* Slide into view */
+  right: 3rem;
 }
 
-.ol-layer-switcher-panel button {
+/* Header for the close button, aligns it to the top-right */
+.ol-layer-switcher-header {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  width: 100%;
+}
+
+/* Small, circular close button */
+.ol-layer-switcher-close {
+  font-size: 1.25rem;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  background: none;
+  border: none;
+  color: #505a5f;
+  cursor: pointer;
+  border-radius: 50%;
+  transition: background 0.2s;
+}
+
+.ol-layer-switcher-close:hover,
+.ol-layer-switcher-close:focus {
+  background: #e1e1e1;
+}
+
+/* Content area for basemap buttons */
+.ol-layer-switcher-content {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+}
+
+.ol-layer-switcher-content button {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -51,41 +177,42 @@
   color: #000;
 }
 
-.ol-layer-switcher-panel button:hover {
+.ol-layer-switcher-content button:hover {
   background-color: #ddd;
 }
 
-.ol-layer-switcher-panel button.active {
-  background-color: #007bff; /* Bright blue background */
-  color: white; /* White text */
-  border-color: #0056b3; /* Darker border for contrast */
-  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3); /* Subtle shadow effect */
-  transform: scale(1.05); /* Slightly scale the active button */
-  transition: all 0.2s ease; /* Smooth transition for all styles */
+.ol-layer-switcher-content button.active {
+  background-color: #007bff;
+  color: white;
+  border-color: #0056b3;
+  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
+  transform: scale(1.05);
+  transition: all 0.2s ease;
 }
 
-.ol-layer-switcher-panel button.active img {
-  filter: brightness(1.2); /* Makes the image brighter */
+.ol-layer-switcher-content button.active img {
+  filter: brightness(1.2);
 }
 
-.ol-layer-switcher-panel button:not(.active) img {
-  filter: grayscale(1); /* Apply grayscale to inactive images */
+.ol-layer-switcher-content button:not(.active) img {
+  filter: grayscale(1);
 }
 
-.ol-layer-switcher-panel button img {
+.ol-layer-switcher-content button img {
   max-width: 80px;
   height: auto;
   border: 2px solid #000;
-  border-radius: 0.3rem;
 }
 
-.ol-layer-switcher-panel button div {
+.ol-layer-switcher-content button div {
   font-size: 14px;
   padding-top: 0.5rem;
 }
 
+/* Geocoder tweaks */
 
-#gcd-container, .ol-geocoder .gcd-txt-control {
+#gcd-container,
+.ol-geocoder .gcd-txt-control {
   height: unset !important;
 }
 
@@ -94,30 +221,12 @@
   top: unset !important;
 }
 
-.ol-geocoder ul.gcd-txt-result > li:nth-child(odd) {
-  background-color: #008938;
-}
-
+.ol-geocoder ul.gcd-txt-result > li:nth-child(odd),
 .ol-geocoder ul.gcd-txt-result > li:nth-child(even) {
-  background-color: #bddabd;
-}
-
-.ol-geocoder ul.gcd-txt-result > li > a:hover {
+  background-color: #fff;
   background-color: #fff;
 }
 
-/* Change the text color on hover */
-.ol-geocoder ul.gcd-txt-result > li > a:hover .gcd-address,
-.ol-geocoder ul.gcd-txt-result > li > a:hover .gcd-road,
-.ol-geocoder ul.gcd-txt-result > li > a:hover .gcd-city,
-.ol-geocoder ul.gcd-txt-result > li > a:hover .gcd-country {
-  color: #000;
-}
-
-/* Ensure the text color when not hovering */
-.ol-geocoder ul.gcd-txt-result .gcd-address,
-.ol-geocoder ul.gcd-txt-result .gcd-road,
-.ol-geocoder ul.gcd-txt-result .gcd-city,
-.ol-geocoder ul.gcd-txt-result .gcd-country {
-  color: #fff;
+.ol-geocoder ul.gcd-txt-result > li > a:hover {
+  background-color: #f3f2f1;
 }

package/src/components/SlidingPanel/SlidingPanel.tsx

@@ -20,6 +20,67 @@ export const SlidingPanel = ({
   const [isVisible, setIsVisible] = useState(defaultOpen);
   const [panelDimensions, setPanelDimensions] = useState({ width: 0, height: 0 });
   const panelRef = useRef<HTMLDivElement>(null);
+  const toggleBtnRef = useRef<HTMLButtonElement>(null);
+
+  // Focus trap: cycle focus within panel when open
+  useEffect(() => {
+    if (!isVisible || !panelRef.current) {
+      return;
+    }
+
+    const panel = panelRef.current;
+    const focusableSelectors = [
+      'a[href]',
+      'button:not([disabled])',
+      'textarea:not([disabled])',
+      'input:not([disabled])',
+      'select:not([disabled])',
+      '[tabindex]:not([tabindex="-1"])',
+    ];
+    const getFocusable = () =>
+      Array.from(panel.querySelectorAll<HTMLElement>(focusableSelectors.join(','))).filter(
+        (el) => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'),
+      );
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setIsVisible(false);
+        // Return focus to toggle button after closing
+        toggleBtnRef.current?.focus();
+      }
+
+      if (e.key === 'Tab') {
+        const focusableEls = getFocusable();
+
+        if (focusableEls.length === 0) {
+          return;
+        }
+
+        const first = focusableEls[0];
+        const last = focusableEls[focusableEls.length - 1];
+
+        if (!e.shiftKey && document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        } else if (e.shiftKey && document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      }
+    };
+
+    panel.addEventListener('keydown', handleKeyDown);
+    // Focus the first focusable element in the panel
+    const focusableEls = getFocusable();
+
+    if (focusableEls.length) {
+      focusableEls[0].focus();
+    }
+
+    return () => {
+      panel.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isVisible]);
 
   // Measure panel dimensions when visible
   useEffect(() => {
@@ -51,6 +112,45 @@ export const SlidingPanel = ({
     }
   }, [isVisible, panelDimensions.height, panelDimensions.width]);
 
+  useEffect(() => {
+    if (!panelRef.current) {
+      return;
+    }
+
+    const focusableSelectors = [
+      'a[href]',
+      'button:not([disabled])',
+      'textarea:not([disabled])',
+      'input:not([disabled])',
+      'select:not([disabled])',
+      '[tabindex]:not([tabindex="-1"])',
+    ];
+    const focusableEls = Array.from(
+      panelRef.current.querySelectorAll<HTMLElement>(focusableSelectors.join(',')),
+    );
+
+    if (!isVisible) {
+      // Remove from tab order
+      focusableEls.forEach((el) => {
+        el.dataset.prevTabIndex = el.getAttribute('tabindex') ?? '';
+        el.setAttribute('tabindex', '-1');
+      });
+    } else {
+      // Restore previous tabIndex
+      focusableEls.forEach((el) => {
+        if (el.dataset.prevTabIndex !== undefined) {
+          if (el.dataset.prevTabIndex === '') {
+            el.removeAttribute('tabindex');
+          } else {
+            el.setAttribute('tabindex', el.dataset.prevTabIndex);
+          }
+
+          delete el.dataset.prevTabIndex;
+        }
+      });
+    }
+  }, [isVisible]);
+
   const panelBase =
     'absolute bg-white shadow-lg p-4 flex flex-col transition-transform duration-300 ease-in-out overflow-auto z-30';
 
@@ -113,18 +213,21 @@ export const SlidingPanel = ({
   return (
     <div className="absolute inset-0 overflow-hidden pointer-events-none z-30">
       <button
-        className={`pointer-events-auto ${buttonPosition} bg-gray-700 text-white z-40`}
+        ref={toggleBtnRef}
+        className={`pointer-events-auto ${buttonPosition} bg-gray-700 text-white z-40 focus-yellow`}
         style={getButtonStyle}
         onClick={() => setIsVisible((prev) => !prev)}
+        aria-expanded={isVisible}
+        aria-controls="sliding-panel"
       >
         {isVisible ? `Close ${tabLabel}` : `Open ${tabLabel}`}
       </button>
 
       <div
         ref={panelRef}
+        id="sliding-panel"
         className={`${panelBase} ${panelLayout} pointer-events-auto`}
         aria-hidden={!isVisible}
-        inert={!isVisible}
       >
         <div className="mt-4">{children}</div>
       </div>

package/src/components/accordion/Accordion.tsx

@@ -22,7 +22,8 @@ export const Accordion = ({ title, children, defaultOpen = false }: AccordionPro
       <button
         aria-expanded={isOpen}
         aria-controls={contentId}
-        className="flex justify-between items-center px-2 py-1 bg-neutral-100 rounded-md"
+        className="flex justify-between items-center px-2 py-1 bg-neutral-100 rounded-md
+          focus-yellow"
         id={buttonId}
         onClick={() => setIsOpen(!isOpen)}
         type="button"

package/src/components/skipLink/SkipLink.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Link } from '../link/Link';
 
 export type SkipLinkProps = {
@@ -5,12 +7,30 @@ export type SkipLinkProps = {
 };
 
 export const SkipLink = ({ mainContentId = 'main-content' }: SkipLinkProps) => {
+  const handleActivate = () => {
+    // Let the browser scroll first, then move focus
+    setTimeout(() => {
+      const main = document.getElementById(mainContentId);
+
+      if (main) {
+        main.focus();
+      }
+    }, 0);
+  };
+
   return (
     <nav aria-label="Skip navigation">
       <Link
         className="bg-focus focus:relative focus:top-0 w-full absolute -top-full text-black
           visited:text-black hover:text-black p-3 skip-link"
         href={`#${mainContentId}`}
+        onClick={handleActivate}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault(); // Prevent default scroll/jump
+            handleActivate();
+          }
+        }}
       >
         Skip to main content
       </Link>

package/src/map/LayerSwitcherControl.ts

@@ -1,53 +1,106 @@
 /* eslint-disable no-restricted-syntax */
-import type { StaticImageData } from 'next/image';
 import { Map } from 'ol';
 import { Control } from 'ol/control';
 import type { Options as ControlOptions } from 'ol/control/Control';
 import BaseLayer from 'ol/layer/Base';
 
-import OpenLayersLogo from './images/openlayers-logo.png';
+const TIMEOUT = 300; // Match CSS transition duration
+const ARIA_LABEL = 'aria-label';
+
+const MAP_LOGO =
+  '<path d="M20.5 3l-5.7 2.1-6-2L3.5 5c-.3.1-.5.5-.5.8v15.2c0 .3.2.6.5.7l5.7-2.1 6 2 5.3-1.9c.3-.1.5-.4.5-.7V3.8c0-.3-.2-.6-.5-.8zM10 5.2l4 1.3v12.3l-4-1.3V5.2zm-6 1.1l4-1.4v12.3l-4 1.4V6.3zm16 12.4l-4 1.4V7.8l4-1.4v12.3z"/>';
 
 export class LayerSwitcherControl extends Control {
   map!: Map;
   panel!: HTMLElement;
+  liveRegion!: HTMLElement;
   isCollapsed = true;
 
   constructor(layers: BaseLayer[], options?: ControlOptions) {
     const button = document.createElement('button');
 
-    button.setAttribute('aria-labelledby', 'Button to toggle layer switcher');
-    button.setAttribute('aria-label', 'Button to toggle layer switcher');
+    button.setAttribute(ARIA_LABEL, 'Button to toggle layer switcher');
     button.setAttribute('title', 'Basemap switcher');
-    button.className = 'ol-layer-switcher ol-btn';
-
-    const switcherImage = document.createElement('img');
+    button.setAttribute('aria-expanded', 'false');
+    button.className = 'ol-layer-switcher-toggle ol-btn';
 
-    const openLayersLogoData = OpenLayersLogo as unknown as StaticImageData;
+    const switcherIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
 
-    switcherImage.src = openLayersLogoData.src;
-    switcherImage.setAttribute('alt', 'Openlayers logo');
-    switcherImage.setAttribute('width', '20px');
-    switcherImage.setAttribute('height', '20px');
-    button.appendChild(switcherImage);
+    switcherIcon.setAttribute('width', '20');
+    switcherIcon.setAttribute('height', '20');
+    switcherIcon.setAttribute('viewBox', '0 0 24 24');
+    switcherIcon.setAttribute('fill', 'currentColor');
+    switcherIcon.innerHTML = MAP_LOGO;
+    button.appendChild(switcherIcon);
 
     const element = document.createElement('div');
 
     element.className = 'ol-layer-switcher ol-unselectable ol-control';
     element.appendChild(button);
 
+    // Create a live region for screen reader announcements
+    const liveRegion = document.createElement('div');
+
+    liveRegion.setAttribute('aria-live', 'polite');
+    liveRegion.setAttribute('role', 'status');
+    liveRegion.className = 'ol-layer-switcher-live-region';
+    liveRegion.style.position = 'absolute';
+    liveRegion.style.width = '1px';
+    liveRegion.style.height = '1px';
+    liveRegion.style.margin = '-1px';
+    liveRegion.style.border = '0';
+    liveRegion.style.padding = '0';
+    liveRegion.style.overflow = 'hidden';
+    liveRegion.style.clipPath = 'inset(50%)';
+    element.appendChild(liveRegion);
+
     super({
       element,
       target: options?.target,
     });
 
+    // Assign the live region to the class property so it can be used in other functions.
+    this.liveRegion = liveRegion;
+
     this.panel = document.createElement('div');
     this.panel.className = 'ol-layer-switcher-panel';
+    this.panel.setAttribute('role', 'dialog');
+    this.panel.setAttribute('aria-modal', 'true');
+    this.panel.setAttribute(ARIA_LABEL, 'Basemap switcher');
+
+    // Add a keydown listener to the panel for Escape key
+    this.panel.addEventListener('keydown', this.handlePanelKeyDown);
 
+    // Create the header for the close button
+    const header = document.createElement('div');
+
+    header.className = 'ol-layer-switcher-header';
+
+    // Create the close button
+    const closeBtn = document.createElement('button');
+
+    closeBtn.className = 'ol-layer-switcher-close ol-btn';
+    closeBtn.setAttribute(ARIA_LABEL, 'Close basemap switcher');
+    closeBtn.innerHTML = '&times;';
+    closeBtn.type = 'button';
+    closeBtn.addEventListener('click', () => {
+      this.toggleLayerSwitcher();
+      this.focusToggleButton();
+    });
+    header.appendChild(closeBtn);
+
+    // Create the content area for basemap buttons
+    const content = document.createElement('div');
+
+    content.className = 'ol-layer-switcher-content';
+
+    // Add a button for each basemap layer
     layers.forEach((layer) => {
       const img = document.createElement('img');
 
       img.src = layer.get('image') as string;
       img.setAttribute('title', layer.get('name'));
+      img.setAttribute('alt', `Preview of ${layer.get('name')}`);
 
       const switcherText = document.createElement('div');
 
@@ -55,19 +108,64 @@ export class LayerSwitcherControl extends Control {
 
       const btn = document.createElement('button');
 
+      btn.setAttribute('type', 'button');
+      btn.setAttribute('aria-pressed', btn.classList.contains('active') ? 'true' : 'false');
       btn.appendChild(img);
       btn.appendChild(switcherText);
 
-      btn.addEventListener(
-        'click',
-        this.selectBasemap.bind(this, layer.get('name') as string),
-        false,
-      );
+      btn.addEventListener('click', () => this.selectBasemap(layer.get('name') as string), false);
 
-      this.panel.appendChild(btn);
+      content.appendChild(btn);
     });
 
-    button.addEventListener('click', this.toggleLayerSwitcher.bind(this), false);
+    // Assemble the panel
+    this.panel.appendChild(header);
+    this.panel.appendChild(content);
+
+    button.addEventListener('click', this.toggleLayerSwitcher, false);
+  }
+
+  private getCurrentBasemap(): BaseLayer | undefined {
+    return this.getMap()
+      ?.getLayers()
+      .getArray()
+      .filter((layer: BaseLayer) => layer.get('basemap') === true)
+      .find((layer: BaseLayer) => layer.getVisible() === true);
+  }
+
+  private getBasemapByName(layerName: string): BaseLayer | undefined {
+    return this.getMap()
+      ?.getLayers()
+      .getArray()
+      .find((layer: BaseLayer) => layer.get('name') === layerName);
+  }
+
+  private focusFirstButton() {
+    const firstBtn = this.panel.querySelector(
+      'button:not(.ol-layer-switcher-close)',
+    ) as HTMLButtonElement | null;
+
+    firstBtn?.focus();
+  }
+
+  private focusToggleButton() {
+    const toggleBtn = this.element.querySelector(
+      'button.ol-layer-switcher-toggle',
+    ) as HTMLButtonElement | null;
+
+    toggleBtn?.focus();
+  }
+
+  private announceBasemapChange(layerName: string) {
+    if (this.liveRegion) {
+      this.liveRegion.textContent = `Basemap changed to ${layerName}`;
+      // Optionally clear the message after a short delay to allow repeated announcements
+      setTimeout(() => {
+        if (this.liveRegion) {
+          this.liveRegion.textContent = '';
+        }
+      }, 1000);
+    }
   }
 
   setMap(map: Map) {
@@ -75,73 +173,105 @@ export class LayerSwitcherControl extends Control {
 
     if (map) {
       // Ensure we only set the initial active layer when the map is assigned
-      map.once('rendercomplete', this.setInitialActiveLayer.bind(this));
+      map.once('rendercomplete', this.setInitialActiveLayer);
     }
   }
 
-  toggleLayerSwitcher() {
+  // Arrow function: 'this' is always bound to the class instance
+  toggleLayerSwitcher = () => {
     if (this.isCollapsed) {
       this.element.appendChild(this.panel);
       requestAnimationFrame(() => {
         this.panel.classList.add('open'); // Ensure animation works after adding to DOM
+
+        // Focus the first basemap button (skip the close button)
+        this.focusFirstButton();
       });
     } else {
       this.panel.classList.remove('open');
       setTimeout(() => {
         this.element.removeChild(this.panel);
-      }, 300); // Matches CSS transition time to prevent flickering
+      }, TIMEOUT); // Matches CSS transition time to prevent flickering
     }
 
     this.isCollapsed = !this.isCollapsed;
-  }
 
-  selectBasemap(layerName: string) {
-    const currentBasemap = this.getMap()
-      ?.getLayers()
-      .getArray()
-      .filter((layer: BaseLayer) => layer.get('basemap') === true)
-      .find((layer: BaseLayer) => layer.getVisible() === true);
+    // Update aria-expanded on the toggle button
+    const toggleBtn = this.element.querySelector('button.ol-layer-switcher-toggle');
 
-    const newBasemap = this.getMap()
-      ?.getLayers()
-      .getArray()
-      .find((layer: BaseLayer) => layer.get('name') === layerName);
+    if (toggleBtn) {
+      toggleBtn.setAttribute('aria-expanded', (!this.isCollapsed).toString());
+    }
+  };
+
+  // Arrow function for panel keydown
+  handlePanelKeyDown = (event: KeyboardEvent) => {
+    // Focus trap: cycle focus within the panel
+    if (event.key === 'Tab') {
+      const focusable = Array.from(this.panel.querySelectorAll('button')) as HTMLButtonElement[];
+
+      if (focusable.length === 0) {
+        return;
+      }
+
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+
+      if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      } else if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      }
+    }
+
+    // Escape closes the panel and returns focus to the toggle button
+    if (event.key === 'Escape') {
+      this.toggleLayerSwitcher();
+
+      // Focus back on the basemap switcher button
+      this.focusToggleButton();
+    }
+  };
+
+  selectBasemap = (layerName: string) => {
+    const currentBasemap = this.getCurrentBasemap();
+
+    const newBasemap = this.getBasemapByName(layerName);
 
     currentBasemap?.setVisible(false);
     newBasemap?.setVisible(true);
 
     this.updateActiveButton(layerName); // Update the active button style
-  }
 
-  setInitialActiveLayer() {
+    this.announceBasemapChange(layerName);
+  };
+
+  setInitialActiveLayer = () => {
     const map = this.getMap();
 
     if (!map) {
       return;
     }
 
-    const currentBasemap = this.getMap()
-      ?.getLayers()
-      .getArray()
-      .filter((layer: BaseLayer) => layer.get('basemap') === true)
-      .find((layer: BaseLayer) => layer.getVisible() === true);
+    const currentBasemap = this.getCurrentBasemap();
 
     if (currentBasemap) {
       const activeLayerName = currentBasemap.get('name');
 
       this.updateActiveButton(activeLayerName);
     }
-  }
+  };
 
-  updateActiveButton(layerName: string) {
+  updateActiveButton = (layerName: string) => {
     const buttons = this.panel.querySelectorAll('button');
 
     buttons.forEach((btn: HTMLButtonElement) => {
-      if (btn.textContent?.trim() === layerName) {
-        btn.classList.add('active');
-      } else {
-        btn.classList.remove('active');
-      }
+      const isActive = btn.textContent?.trim() === layerName;
+
+      btn.classList.toggle('active', isActive);
+      btn.setAttribute('aria-pressed', isActive ? 'true' : 'false');
     });
-  }
+  };
 }

package/src/map/MapComponent.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useRef, useState } from 'react';
 
 import { Map, Overlay, View } from 'ol';
-import { Control, ScaleLine, defaults as defaultControls } from 'ol/control';
+import { Attribution, Control, ScaleLine, Zoom } from 'ol/control';
 import { fromLonLat } from 'ol/proj';
 
 import { initializeBasemapLayers } from './basemaps';
@@ -77,19 +77,24 @@ export const MapComponent = ({
     // Initialise map's basemap layers.
     const layers = initializeBasemapLayers();
 
-    const scaleLine = new ScaleLine({
-      units: 'metric',
-    });
-
     const target = mapRef.current;
 
     if (!target) {
       return;
     }
 
+    // Create controls individually
+    const mapZoom = new Zoom();
+    const scaleLine = new ScaleLine({ units: 'metric' });
+    const attribution = new Attribution();
+    const layerSwitcher = new LayerSwitcherControl(layers);
+
+    // Add controls in the desired order
+    const controls = [mapZoom, layerSwitcher, scaleLine, attribution];
+
     const newMap = new Map({
       target,
-      controls: defaultControls().extend([scaleLine]),
+      controls,
       layers,
       view: new View({
         projection: 'EPSG:3857',
@@ -123,8 +128,6 @@ export const MapComponent = ({
       }
     }
 
-    newMap.addControl(new LayerSwitcherControl(layers));
-
     // Setup popup overlay
     const overlay = new Overlay({
       element: document.getElementById('popup-container') ?? undefined,
@@ -170,7 +173,15 @@ export const MapComponent = ({
 
   return (
     <div className="flex flex-grow min-h-0">
-      <div ref={mapRef} className="flex flex-grow relative z-10" id="map">
+      <div
+        ref={mapRef}
+        className="flex flex-grow relative z-10"
+        id="map"
+        role="application"
+        aria-label="Map"
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex={0}
+      >
         {isLoading ? (
           <div className="absolute inset-0 flex items-center justify-center bg-white/50 z-10">
             <div