feat(core): aria label for legend title and content

Generate a unique identifier for the legend title, then refer to that with aria-labelledby to create a more explicit association between the legend content and the title.

source/legend.js

@@ -12,6 +12,7 @@ import { encodingField } from './encodings.js'
 import { feature } from './feature.js'
 import { key, mark } from './helpers.js'
 import { layerPrimary } from './views.js'
+import { extension } from './extensions.js'
 import { parseScales } from './scales.js'
 import { renderStyles } from './styles.js'
 import { list } from './text.js'
@@ -48,6 +49,19 @@ const legendTitle = s => {
 	return s.encoding.color.legend?.title || s.encoding.color.title || encodingField(s, 'color')
 }
 
+/**
+ * a string for identifiying the legend in the DOM
+ * @param {object} s specification
+ * @return {string|null} legend title identifier string
+ */
+const legendIdentifier = s => {
+	if (extension(s, 'id')) {
+		return `legend-title-${extension(s, 'id')}`
+	} else {
+		return null
+	}
+}
+
 /**
  * generate a written description for the legend
  * @param {object} s Vega Lite specification
@@ -124,6 +138,7 @@ const swatches = s => {
  */
 const swatch = s => {
 	const renderer = selection => {
+		const titleIdentifier = feature(s).hasLegendTitle() ? selection.select('h3').attr('id') : null
 		try {
 			const dispatcher = dispatchers.get(selection.node())
 
@@ -143,6 +158,8 @@ const swatch = s => {
 			const more = d3.create('ul').classed('items-more', true)
 			const moreHeader = more.append('h3')
 
+			main.attr('aria-labelledby', titleIdentifier)
+
 			let target = main
 
 			const items = swatches(s).map((_, index) => createLegendItem(itemConfig(s, index)))
@@ -207,12 +224,16 @@ const swatch = s => {
  */
 const legend = _s => {
 	let s = feature(_s).hasLayers() ? layerPrimary(_s) : _s
+	const id = legendIdentifier(_s)
 	return selection => {
 		if (feature(s).hasLegendTitle()) {
-			selection
+			const title = selection
 				.append('h3')
 				.classed('title', true)
 				.text(legendTitle(s))
+			if (id) {
+				title.attr('id', id)
+			}
 		}
 		if (feature(s).hasLegend() && (feature(s).isMulticolor() || feature(s).isCircular())) {
 			selection.call(swatch(s))

source/markup.js

@@ -25,6 +25,7 @@ const selectors = [
 	'.point title',
 	'.tick',
 	'.legend',
+	'.legend .title',
 	'.legend .pair',
 	'.legend .items-main',
 	'.legend .items-more',

tests/integration/legend-test.js

@@ -59,4 +59,16 @@ module('integration > legend', function() {
 
 		assert.notOk(element.querySelector(testSelector('legend-items-more')))
 	})
+
+	test('uses aria-labelledby to associate legend title and content', assert => {
+		const spec = specificationFixture('circular')
+		spec.usermeta = { id: 'abdefg' }
+		const element = render(spec)
+		const legend = element.querySelector(testSelector('legend'))
+		const title = legend.querySelector(testSelector('legend-title'))
+		const id = title.getAttribute('id')
+		const content = legend.querySelector('ul')
+		assert.ok(id)
+		assert.ok(content)
+	})
 })