// CDN build: `ApexMaps` is a global (see index.html). With a bundler:
//   import ApexMaps from 'apexmaps'

// Accessibility is configuration, not extra code. a11y.description: 'auto' writes
// an aria-label and <desc> from the spec and the data (map type, area count,
// range, extremes, how many areas have no data). dataTable: true emits a real,
// visually-hidden table alongside the map. There is one tab stop for the whole
// map; arrow keys then walk the features in reading order, with a polite live
// region announcing each. dataTable is free in every licence tier.

const data = [
  { key: 'DE', value: 78 }, { key: 'FR', value: 64 }, { key: 'IT', value: 52 },
  { key: 'ES', value: 47 }, { key: 'PL', value: 39 }, { key: 'NL', value: 71 },
  { key: 'SE', value: 58 }, { key: 'IE', value: 66 }, { key: 'PT', value: 34 },
  { key: 'EL', value: 29 }, { key: 'FI', value: 61 },
]

const map = new ApexMaps(document.getElementById('map'), {
  chart: { height: 420 },
  geo: { map: 'eu/nuts0@20m' },
  series: [{ name: 'Adoption', joinBy: ['nuts_id', 'key'], data, scale: { palette: 'purples' } }],
  a11y: { enabled: true, description: 'auto', dataTable: true },
})

map.render().then(() => {
  const svg = document.querySelector('#map svg')
  // What assistive technology reads: the generated label and description, plus
  // the keyboard walk order the arrow keys follow.
  console.log('aria-label:', svg.getAttribute('aria-label'))
  console.log('<desc>:', svg.querySelector('desc').textContent)
  console.log(`${map.a11y.order.length} features reachable by keyboard`)
})

// Move focus to the map, then use the arrow keys to walk its features.
document.getElementById('focus').addEventListener('click', () => {
  document.querySelector('#map svg').focus()
})