@defra/interactive-map 0.0.21-alpha → 0.0.23-alpha

package/src/App/components/Markers/Markers.test.jsx

@@ -11,6 +11,12 @@ jest.mock('../../store/mapContext.js', () => ({ useMap: jest.fn() }))
 jest.mock('../../store/serviceContext.js', () => ({ useService: jest.fn() }))
 jest.mock('../../../config/appConfig.js', () => ({ scaleFactor: { small: 1, medium: 1.5, large: 2 } }))
 
+const MARKER_ID = 'marker-1'
+const SEL_CHANGE = 'interact:selectionchange'
+const INTERACT_ACTIVE = 'interact:active'
+const SELECTED_CLASS = 'im-c-marker--selected'
+const SVG_SEL = 'svg'
+
 const makeEventBus = () => {
   const listeners = {}
   return {
@@ -29,7 +35,7 @@ const makeSymbolRegistry = (overrides = {}) => ({
 })
 
 const makeMarker = (overrides = {}) => ({
-  id: 'marker-1', isVisible: true, symbol: 'pin', ...overrides
+  id: MARKER_ID, isVisible: true, symbol: 'pin', ...overrides
 })
 
 const setup = ({ markers = [], mapSize = 'small', eventBus, symbolRegistry, mapStyle = 'outdoor' } = {}) => {
@@ -41,36 +47,62 @@ const setup = ({ markers = [], mapSize = 'small', eventBus, symbolRegistry, mapS
   useService.mockReturnValue({ symbolRegistry: sr, eventBus: eb })
   useMarkers.mockReturnValue({
     markers: { items: markers, markerRefs },
-    markerRef: (id) => (el) => { if (el) markerRefs.set(id, el) }
+    markerRef: (id) => (el) => { if (el) { markerRefs.set(id, el) } }
   })
   return { eb, sr, result: render(<Markers />) }
 }
 
-describe('Markers', () => {
+// ─── Markers — basic rendering ────────────────────────────────────────────────
+
+describe('Markers — basic rendering', () => {
   it('renders nothing when mapStyle is not set', () => {
     expect(setup({ mapStyle: null }).result.container.firstChild).toBeNull()
   })
 
   it('renders nothing when there are no markers', () => {
-    expect(setup().result.container.querySelectorAll('svg')).toHaveLength(0)
+    expect(setup().result.container.querySelectorAll(SVG_SEL)).toHaveLength(0)
   })
 
   it('renders one svg per marker with correct id and classes', () => {
-    const { result } = setup({ markers: [makeMarker(), makeMarker({ id: 'b', symbol: undefined })] })
-    const [svg1, svg2] = result.container.querySelectorAll('svg')
+    const { result } = setup({ markers: [makeMarker(), makeMarker({ id: 'b', symbol: null })] })
+    const [svg1, svg2] = result.container.querySelectorAll(SVG_SEL)
     expect(svg1.getAttribute('id')).toBe('test-app-marker-marker-1')
     expect(svg1).toHaveClass('im-c-marker', 'im-c-marker--pin')
     expect(svg2).toHaveClass('im-c-marker--pin')
   })
+})
 
-  it.each([
-    [true, 'block'],
-    [false, 'none']
-  ])('display is %s when isVisible=%s', (isVisible, display) => {
-    const svg = setup({ markers: [makeMarker({ isVisible })] }).result.container.querySelector('svg')
-    expect(svg).toHaveStyle({ display })
+// ─── Markers — routing ────────────────────────────────────────────────────────
+
+describe('Markers — routing', () => {
+  it('renders a LabelMarker for a marker with symbol: null', () => {
+    const marker = makeMarker({ id: 'lbl', label: 'My label', symbol: null, symbolSvgContent: null })
+    const { result } = setup({ markers: [marker] })
+    const wrapper = result.container.querySelector('.im-c-marker-wrapper--label')
+    expect(wrapper).toBeTruthy()
+    expect(wrapper.querySelector('.im-c-marker__label--standalone').textContent).toBe('My label')
+    expect(result.container.querySelector(SVG_SEL)).toBeNull()
   })
 
+  it('renders a SymbolLabelMarker when showLabel is true', () => {
+    const marker = makeMarker({ label: 'Tooltip', showLabel: true })
+    const { result } = setup({ markers: [marker] })
+    const wrapper = result.container.querySelector('.im-c-marker-wrapper')
+    expect(wrapper).toBeTruthy()
+    expect(wrapper.querySelector('.im-c-marker__label').textContent).toBe('Tooltip')
+    expect(wrapper.querySelector(SVG_SEL)).toBeTruthy()
+  })
+
+  it('renders an svg without label when showLabel is false or absent', () => {
+    const { result } = setup({ markers: [makeMarker({ label: 'hidden', showLabel: false })] })
+    expect(result.container.querySelector(SVG_SEL)).toBeTruthy()
+    expect(result.container.querySelector('.im-c-marker__label')).toBeNull()
+  })
+})
+
+// ─── Markers — symbol resolution ─────────────────────────────────────────────
+
+describe('Markers — symbol resolution', () => {
   it('uses inline symbolSvgContent over the symbol registry', () => {
     const sr = makeSymbolRegistry()
     setup({ markers: [makeMarker({ symbolSvgContent: '<rect/>' })], symbolRegistry: sr })
@@ -81,23 +113,23 @@ describe('Markers', () => {
     const sr = makeSymbolRegistry({
       getDefaults: jest.fn(() => ({ symbolSvgContent: '<default-svg/>', viewBox: '0 0 38 38', anchor: [0.5, 1] }))
     })
-    setup({ markers: [makeMarker({ symbol: undefined })], symbolRegistry: sr })
+    setup({ markers: [makeMarker({ symbol: null })], symbolRegistry: sr })
     expect(sr.get).not.toHaveBeenCalled()
   })
 
   it('uses marker.viewBox when provided', () => {
-    const svg = setup({ markers: [makeMarker({ viewBox: '0 0 50 60' })] }).result.container.querySelector('svg')
+    const svg = setup({ markers: [makeMarker({ viewBox: '0 0 50 60' })] }).result.container.querySelector(SVG_SEL)
     expect(svg.getAttribute('viewBox')).toBe('0 0 50 60')
     expect(svg.getAttribute('width')).toBe('50')
     expect(svg.getAttribute('height')).toBe('60')
   })
 
-  it("falls back to '0 0 38 38' viewBox when none is provided", () => {
+  it("falls back to '0 0 44 44' viewBox when none is provided", () => {
     const sr = makeSymbolRegistry({
       get: jest.fn(() => ({ svg: '<circle/>' })),
       getDefaults: jest.fn(() => ({ symbol: 'pin' }))
     })
-    expect(setup({ markers: [makeMarker()], symbolRegistry: sr }).result.container.querySelector('svg').getAttribute('viewBox')).toBe('0 0 38 38')
+    expect(setup({ markers: [makeMarker()], symbolRegistry: sr }).result.container.querySelector(SVG_SEL).getAttribute('viewBox')).toBe('0 0 44 44')
   })
 
   it.each([
@@ -105,8 +137,8 @@ describe('Markers', () => {
     ['symbolDef.anchor', makeMarker(), { get: jest.fn(() => ({ svg: '<circle/>', viewBox: '0 0 38 38', anchor: [0, 0.5] })), getDefaults: jest.fn(() => ({ symbol: 'pin', viewBox: '0 0 38 38' })) }, '0px', '-19px'],
     ['[0.5, 0.5] fallback', makeMarker(), { get: jest.fn(() => ({ svg: '<circle/>', viewBox: '0 0 38 38' })), getDefaults: jest.fn(() => ({ symbol: 'pin', viewBox: '0 0 38 38' })) }, '-19px', '-19px']
   ])('resolveAnchor uses %s', (_, marker, srOverrides, left, top) => {
-    const sr = srOverrides ? makeSymbolRegistry(srOverrides) : undefined
-    expect(setup({ markers: [marker], symbolRegistry: sr }).result.container.querySelector('svg')).toHaveStyle({ marginLeft: left, marginTop: top })
+    const sr = srOverrides ? makeSymbolRegistry(srOverrides) : null
+    expect(setup({ markers: [marker], symbolRegistry: sr }).result.container.querySelector(SVG_SEL)).toHaveStyle({ marginLeft: left, marginTop: top })
   })
 
   it.each([
@@ -115,24 +147,37 @@ describe('Markers', () => {
     ['large', '76', '76'],
     ['huge', '38', '38']
   ])('scales svg dimensions for mapSize=%s', (mapSize, width, height) => {
-    const svg = setup({ markers: [makeMarker()], mapSize }).result.container.querySelector('svg')
+    const svg = setup({ markers: [makeMarker()], mapSize }).result.container.querySelector(SVG_SEL)
     expect(svg.getAttribute('width')).toBe(width)
     expect(svg.getAttribute('height')).toBe(height)
   })
 
   it('scales anchor offsets for medium mapSize', () => {
-    expect(setup({ markers: [makeMarker()], mapSize: 'medium' }).result.container.querySelector('svg'))
+    expect(setup({ markers: [makeMarker()], mapSize: 'medium' }).result.container.querySelector(SVG_SEL))
       .toHaveStyle({ marginLeft: '-28.5px', marginTop: '-57px' })
   })
+})
+
+// ─── Markers — selection ──────────────────────────────────────────────────────
 
+describe('Markers — selection', () => {
   it('adds selected class and calls resolveSelected when marker is selected', () => {
     const { eb, sr, result } = setup({ markers: [makeMarker()] })
-    act(() => eb.emit('interact:selectionchange', { selectedMarkers: ['marker-1'] }))
-    expect(result.container.querySelector('svg')).toHaveClass('im-c-marker--selected')
+    act(() => eb.emit(SEL_CHANGE, { selectedMarkers: [MARKER_ID] }))
+    expect(result.container.querySelector(SVG_SEL)).toHaveClass(SELECTED_CLASS)
     expect(sr.resolveSelected).toHaveBeenCalled()
     expect(sr.resolve).not.toHaveBeenCalledAfter?.(sr.resolveSelected)
   })
 
+  it('calls resolveActive when the marker is the active listbox item', () => {
+    const SET_ACTIVE = 'map:setactivefeature'
+    const sr = makeSymbolRegistry({ resolveActive: jest.fn(() => '<circle class="active"/>') })
+    const { eb } = setup({ markers: [makeMarker()], symbolRegistry: sr })
+    act(() => eb.emit(SET_ACTIVE, { id: MARKER_ID }))
+    expect(sr.resolveActive).toHaveBeenCalled()
+    expect(sr.resolveSelected).not.toHaveBeenCalled()
+  })
+
   it('uses resolve (not resolveSelected) for unselected markers', () => {
     const { sr } = setup({ markers: [makeMarker()] })
     expect(sr.resolve).toHaveBeenCalled()
@@ -144,103 +189,35 @@ describe('Markers', () => {
     ['missing selectedMarkers key', {}]
   ])('deselects when selectionchange has %s', (_, payload) => {
     const { eb, result } = setup({ markers: [makeMarker()] })
-    act(() => eb.emit('interact:selectionchange', { selectedMarkers: ['marker-1'] }))
-    act(() => eb.emit('interact:selectionchange', payload))
-    expect(result.container.querySelector('svg')).not.toHaveClass('im-c-marker--selected')
+    act(() => eb.emit(SEL_CHANGE, { selectedMarkers: [MARKER_ID] }))
+    act(() => eb.emit(SEL_CHANGE, payload))
+    expect(result.container.querySelector(SVG_SEL)).not.toHaveClass(SELECTED_CLASS)
+  })
+
+  it('handles interact:active with selectMarker in interactionModes', () => {
+    const { eb } = setup()
+    expect(() => act(() => eb.emit(INTERACT_ACTIVE, { active: true, interactionModes: ['selectMarker'] }))).not.toThrow()
+  })
+
+  it('handles interact:active with no interactionModes (uses default [])', () => {
+    const { eb } = setup()
+    expect(() => act(() => eb.emit(INTERACT_ACTIVE, { active: true }))).not.toThrow()
   })
 
   it('wires interact:active and interact:selectionchange on mount and removes them on unmount', () => {
     const { eb, result } = setup()
-    expect(eb.on).toHaveBeenCalledWith('interact:active', expect.any(Function))
-    expect(eb.on).toHaveBeenCalledWith('interact:selectionchange', expect.any(Function))
+    expect(eb.on).toHaveBeenCalledWith(INTERACT_ACTIVE, expect.any(Function))
+    expect(eb.on).toHaveBeenCalledWith(SEL_CHANGE, expect.any(Function))
     result.unmount()
-    expect(eb.off).toHaveBeenCalledWith('interact:active', expect.any(Function))
-    expect(eb.off).toHaveBeenCalledWith('interact:selectionchange', expect.any(Function))
+    expect(eb.off).toHaveBeenCalledWith(INTERACT_ACTIVE, expect.any(Function))
+    expect(eb.off).toHaveBeenCalledWith(SEL_CHANGE, expect.any(Function))
   })
 
-  describe('useMarkerCursor', () => {
-    let viewport
-
-    beforeEach(() => {
-      viewport = document.createElement('div')
-      viewport.className = 'im-c-viewport'
-      document.body.appendChild(viewport)
-    })
-
-    afterEach(() => {
-      if (viewport.parentNode) document.body.removeChild(viewport)
-    })
-
-    const activate = (eb) => act(() => eb.emit('interact:active', { active: true, interactionModes: ['selectMarker'] }))
-    const deactivate = (eb) => act(() => eb.emit('interact:active', { active: false, interactionModes: ['selectMarker'] }))
-    const fireMove = (clientX, clientY) => act(() => {
-      viewport.dispatchEvent(new MouseEvent('mousemove', { bubbles: true, clientX, clientY }))
-    })
-
-    const setupCursor = (markerBounds) => {
-      const eb = makeEventBus()
-      const markerRefs = new Map()
-      if (markerBounds) markerRefs.set('marker-1', { getBoundingClientRect: () => markerBounds })
-      useConfig.mockReturnValue({ id: 'test-app' })
-      useMap.mockReturnValue({ mapStyle: 'outdoor', mapSize: 'small' })
-      useService.mockReturnValue({ symbolRegistry: makeSymbolRegistry(), eventBus: eb })
-      useMarkers.mockReturnValue({ markers: { items: [makeMarker()], markerRefs }, markerRef: () => () => {} })
-      render(<Markers />)
-      return eb
-    }
-
-    it('does not track mousemove when interact is not active', () => {
-      setupCursor({ left: 0, top: 0, right: 50, bottom: 50 })
-      fireMove(20, 20)
-      expect(viewport.style.cursor).toBe('')
-    })
-
-    it('does not track mousemove when selectMarker is not in interactionModes', () => {
-      const eb = setupCursor({ left: 10, top: 10, right: 50, bottom: 50 })
-      act(() => eb.emit('interact:active', { active: true, interactionModes: ['selectFeature'] }))
-      fireMove(20, 20)
-      expect(viewport.style.cursor).toBe('')
-    })
-
-    it('does not track mousemove when interactionModes is absent from payload', () => {
-      const eb = setupCursor({ left: 10, top: 10, right: 50, bottom: 50 })
-      act(() => eb.emit('interact:active', { active: true }))
-      fireMove(20, 20)
-      expect(viewport.style.cursor).toBe('')
-    })
-
-    it('does not track mousemove when viewport element is absent', () => {
-      document.body.removeChild(viewport)
-      const eb = setupCursor({ left: 0, top: 0, right: 50, bottom: 50 })
-      activate(eb)
-      expect(viewport.style.cursor).toBe('')
-    })
-
-    it('sets cursor to pointer when mousemove lands inside a marker', () => {
-      const eb = setupCursor({ left: 10, top: 10, right: 50, bottom: 50 })
-      activate(eb)
-      fireMove(20, 20)
-      expect(viewport.style.cursor).toBe('pointer')
-    })
-
-    it.each([
-      ['outside all markers', 100, 100],
-      ['marker has no ref element', 20, 20]
-    ])('cursor stays empty when %s', (label, x, y) => {
-      const bounds = label.includes('no ref') ? null : { left: 10, top: 10, right: 50, bottom: 50 }
-      const eb = setupCursor(bounds)
-      activate(eb)
-      fireMove(x, y)
-      expect(viewport.style.cursor).toBe('')
-    })
-
-    it('clears cursor and stops tracking when interact becomes inactive', () => {
-      const eb = setupCursor({ left: 10, top: 10, right: 50, bottom: 50 })
-      activate(eb)
-      fireMove(20, 20)
-      expect(viewport.style.cursor).toBe('pointer')
-      deactivate(eb)
-      expect(viewport.style.cursor).toBe('')
-    })
+  it('adds selected class to SymbolLabelMarker wrapper and svg when selected', () => {
+    const { eb, result } = setup({ markers: [makeMarker({ label: 'Test', showLabel: true })] })
+    act(() => eb.emit(SEL_CHANGE, { selectedMarkers: [MARKER_ID] }))
+    const wrapper = result.container.querySelector('.im-c-marker-wrapper')
+    expect(wrapper).toHaveClass('im-c-marker-wrapper--selected')
+    expect(wrapper.querySelector(SVG_SEL)).toHaveClass(SELECTED_CLASS)
   })
 })

package/src/App/components/Markers/SymbolLabelMarker.jsx

@@ -0,0 +1,43 @@
+import { stringToKebab } from '../../../utils/stringToKebab.js'
+
+const SymbolLabelMarker = ({ marker, mapId, markerRef, isSelected, symbolProps }) => { // NOSONAR: project does not use PropTypes
+  const { resolvedSvg, viewBox, anchor, shapeId, scaledWidth, scaledHeight } = symbolProps
+  return (
+    <div
+      ref={markerRef(marker.id)}
+      id={`${mapId}-marker-${marker.id}`}
+      className={[
+        'im-c-marker-wrapper',
+        `im-c-marker-wrapper--${stringToKebab(shapeId)}`,
+        isSelected && 'im-c-marker-wrapper--selected'
+      ].filter(Boolean).join(' ')}
+      style={{
+        display: marker.isVisible ? 'block' : 'none',
+        marginLeft: `${-anchor[0] * scaledWidth}px`,
+        marginTop: `${-anchor[1] * scaledHeight}px`,
+        width: `${scaledWidth}px`,
+        height: `${scaledHeight}px`
+      }}
+    >
+      <svg
+        className={[
+          'im-c-marker__svg',
+          `im-c-marker--${stringToKebab(shapeId)}`,
+          isSelected && 'im-c-marker--selected'
+        ].filter(Boolean).join(' ')}
+        width={scaledWidth}
+        height={scaledHeight}
+        viewBox={viewBox}
+        overflow='visible'
+        aria-hidden='true'
+      >
+        <g dangerouslySetInnerHTML={{ __html: resolvedSvg }} />
+      </svg>
+      <div role='note' className='im-c-marker__label'>
+        {marker.label}
+      </div>
+    </div>
+  )
+}
+
+export default SymbolLabelMarker

package/src/App/components/Markers/SymbolLabelMarker.test.jsx

@@ -0,0 +1,56 @@
+import { render } from '@testing-library/react'
+import SymbolLabelMarker from './SymbolLabelMarker.jsx'
+
+const makeMarker = (overrides = {}) => ({ id: 'marker-1', isVisible: true, symbol: 'pin', label: 'Test', ...overrides })
+const markerRef = () => () => {}
+const makeSymbolProps = (overrides = {}) => ({
+  resolvedSvg: '<circle/>',
+  viewBox: '0 0 38 38',
+  anchor: [0.5, 0.5],
+  shapeId: 'pin',
+  scaledWidth: 38,
+  scaledHeight: 38,
+  ...overrides
+})
+
+describe('SymbolLabelMarker', () => {
+  it('renders the label text', () => {
+    const { getByText } = render(<SymbolLabelMarker marker={makeMarker()} mapId='map' markerRef={markerRef} isSelected={false} symbolProps={makeSymbolProps()} />)
+    expect(getByText('Test')).toBeTruthy()
+  })
+
+  it('has wrapper id of mapId-marker-markerId', () => {
+    const { container } = render(<SymbolLabelMarker marker={makeMarker()} mapId='my-map' markerRef={markerRef} isSelected={false} symbolProps={makeSymbolProps()} />)
+    expect(container.querySelector('.im-c-marker-wrapper').getAttribute('id')).toBe('my-map-marker-marker-1')
+  })
+
+  it('applies shapeId to wrapper and svg class names', () => {
+    const { container } = render(<SymbolLabelMarker marker={makeMarker()} mapId='map' markerRef={markerRef} isSelected={false} symbolProps={makeSymbolProps({ shapeId: 'flag' })} />)
+    expect(container.querySelector('.im-c-marker-wrapper')).toHaveClass('im-c-marker-wrapper--flag')
+    expect(container.querySelector('svg')).toHaveClass('im-c-marker--flag')
+  })
+
+  it('adds selected classes to wrapper and svg when isSelected', () => {
+    const { container } = render(<SymbolLabelMarker marker={makeMarker()} mapId='map' markerRef={markerRef} isSelected symbolProps={makeSymbolProps()} />)
+    expect(container.querySelector('.im-c-marker-wrapper')).toHaveClass('im-c-marker-wrapper--selected')
+    expect(container.querySelector('svg')).toHaveClass('im-c-marker--selected')
+  })
+
+  it('svg is aria-hidden', () => {
+    const { container } = render(<SymbolLabelMarker marker={makeMarker()} mapId='map' markerRef={markerRef} isSelected={false} symbolProps={makeSymbolProps()} />)
+    expect(container.querySelector('svg').getAttribute('aria-hidden')).toBe('true')
+  })
+
+  it('label element has role note', () => {
+    const { container } = render(<SymbolLabelMarker marker={makeMarker()} mapId='map' markerRef={markerRef} isSelected={false} symbolProps={makeSymbolProps()} />)
+    expect(container.querySelector('.im-c-marker__label').getAttribute('role')).toBe('note')
+  })
+
+  it.each([
+    [true, 'block'],
+    [false, 'none']
+  ])('display is %s when isVisible=%s', (isVisible, display) => {
+    const { container } = render(<SymbolLabelMarker marker={makeMarker({ isVisible })} mapId='map' markerRef={markerRef} isSelected={false} symbolProps={makeSymbolProps()} />)
+    expect(container.querySelector('.im-c-marker-wrapper')).toHaveStyle({ display })
+  })
+})

package/src/App/components/Markers/SymbolMarker.jsx

@@ -0,0 +1,31 @@
+import { stringToKebab } from '../../../utils/stringToKebab.js'
+
+const SymbolMarker = ({ marker, mapId, markerRef, isSelected, symbolProps }) => { // NOSONAR: project does not use PropTypes
+  const { resolvedSvg, viewBox, anchor, shapeId, scaledWidth, scaledHeight } = symbolProps
+  return (
+    <svg // NOSONAR: role='img' with aria-label is the correct ARIA pattern for SVG icons; <img> is not appropriate here
+      ref={markerRef(marker.id)}
+      id={`${mapId}-marker-${marker.id}`}
+      className={[
+        'im-c-marker',
+        `im-c-marker--${stringToKebab(shapeId)}`,
+        isSelected && 'im-c-marker--selected'
+      ].filter(Boolean).join(' ')}
+      width={scaledWidth}
+      height={scaledHeight}
+      viewBox={viewBox}
+      overflow='visible'
+      role='img'
+      aria-label={marker.label || 'Map marker'}
+      style={{
+        display: marker.isVisible ? 'block' : 'none',
+        marginLeft: `${-anchor[0] * scaledWidth}px`,
+        marginTop: `${-anchor[1] * scaledHeight}px`
+      }}
+    >
+      <g dangerouslySetInnerHTML={{ __html: resolvedSvg }} />
+    </svg>
+  )
+}
+
+export default SymbolMarker

package/src/App/components/Markers/SymbolMarker.test.jsx

@@ -0,0 +1,72 @@
+import { render } from '@testing-library/react'
+import SymbolMarker from './SymbolMarker.jsx'
+
+const makeMarker = (overrides = {}) => ({ id: 'marker-1', isVisible: true, symbol: 'pin', ...overrides })
+const markerRef = () => () => {}
+const makeSymbolProps = (overrides = {}) => ({
+  resolvedSvg: '<circle/>',
+  viewBox: '0 0 38 38',
+  anchor: [0.5, 0.5],
+  shapeId: 'pin',
+  scaledWidth: 38,
+  scaledHeight: 38,
+  ...overrides
+})
+
+describe('SymbolMarker', () => {
+  it('has id of mapId-marker-markerId', () => {
+    const { container } = render(<SymbolMarker marker={makeMarker()} mapId='my-map' markerRef={markerRef} isSelected={false} symbolProps={makeSymbolProps()} />)
+    expect(container.querySelector('svg').getAttribute('id')).toBe('my-map-marker-marker-1')
+  })
+
+  it('has role img', () => {
+    const { container } = render(<SymbolMarker marker={makeMarker()} mapId='map' markerRef={markerRef} isSelected={false} symbolProps={makeSymbolProps()} />)
+    expect(container.querySelector('svg').getAttribute('role')).toBe('img')
+  })
+
+  it('aria-label uses marker.label', () => {
+    const { container } = render(<SymbolMarker marker={makeMarker({ label: 'My location' })} mapId='map' markerRef={markerRef} isSelected={false} symbolProps={makeSymbolProps()} />)
+    expect(container.querySelector('svg').getAttribute('aria-label')).toBe('My location')
+  })
+
+  it('aria-label falls back to Map marker when no label', () => {
+    const { container } = render(<SymbolMarker marker={makeMarker()} mapId='map' markerRef={markerRef} isSelected={false} symbolProps={makeSymbolProps()} />)
+    expect(container.querySelector('svg').getAttribute('aria-label')).toBe('Map marker')
+  })
+
+  it('applies shapeId class', () => {
+    const { container } = render(<SymbolMarker marker={makeMarker()} mapId='map' markerRef={markerRef} isSelected={false} symbolProps={makeSymbolProps({ shapeId: 'flag' })} />)
+    expect(container.querySelector('svg')).toHaveClass('im-c-marker--flag')
+  })
+
+  it('adds selected class when isSelected', () => {
+    const { container } = render(<SymbolMarker marker={makeMarker()} mapId='map' markerRef={markerRef} isSelected symbolProps={makeSymbolProps()} />)
+    expect(container.querySelector('svg')).toHaveClass('im-c-marker--selected')
+  })
+
+  it('does not add selected class when not selected', () => {
+    const { container } = render(<SymbolMarker marker={makeMarker()} mapId='map' markerRef={markerRef} isSelected={false} symbolProps={makeSymbolProps()} />)
+    expect(container.querySelector('svg')).not.toHaveClass('im-c-marker--selected')
+  })
+
+  it.each([
+    [true, 'block'],
+    [false, 'none']
+  ])('display is %s when isVisible=%s', (isVisible, display) => {
+    const { container } = render(<SymbolMarker marker={makeMarker({ isVisible })} mapId='map' markerRef={markerRef} isSelected={false} symbolProps={makeSymbolProps()} />)
+    expect(container.querySelector('svg')).toHaveStyle({ display })
+  })
+
+  it('sets width, height and viewBox from symbolProps', () => {
+    const { container } = render(<SymbolMarker marker={makeMarker()} mapId='map' markerRef={markerRef} isSelected={false} symbolProps={makeSymbolProps({ scaledWidth: 50, scaledHeight: 60, viewBox: '0 0 50 60' })} />)
+    const svg = container.querySelector('svg')
+    expect(svg.getAttribute('width')).toBe('50')
+    expect(svg.getAttribute('height')).toBe('60')
+    expect(svg.getAttribute('viewBox')).toBe('0 0 50 60')
+  })
+
+  it('sets marginLeft and marginTop from anchor and dimensions', () => {
+    const { container } = render(<SymbolMarker marker={makeMarker()} mapId='map' markerRef={markerRef} isSelected={false} symbolProps={makeSymbolProps({ anchor: [0.5, 1], scaledWidth: 38, scaledHeight: 38 })} />)
+    expect(container.querySelector('svg')).toHaveStyle({ marginLeft: '-19px', marginTop: '-38px' })
+  })
+})

package/src/App/components/Panel/Panel.jsx

@@ -11,7 +11,7 @@ const computePanelState = (bpConfig, triggeringElement, focus, focusOnOpen) => {
   const isDialog = !isAside && bpConfig.dismissible
   const isModal = bpConfig.modal === true
   const isDismissible = bpConfig.dismissible !== false
-  const shouldFocus = isModal || (focusOnOpen !== false && (focusOnOpen === true || focus === true || Boolean(triggeringElement)))
+  const shouldFocus = isModal || focusOnOpen === true || (focusOnOpen !== false && focus !== false && (focus === true || Boolean(triggeringElement)))
   const buttonContainerEl = bpConfig.slot.endsWith('button') ? triggeringElement?.parentNode : undefined
   return { isAside, isDialog, isModal, isDismissible, shouldFocus, buttonContainerEl }
 }

package/src/App/components/Panel/Panel.module.scss

@@ -10,6 +10,7 @@
         $is-inset: false,
         $type: panel
     );
+    position: relative;
 
     display: flex;
     flex-direction: column;