Skip to content

Commit e76971b

Browse files
committed
fix: add localized tooltip and aria-label to attribution summary
The <summary> disclosure in the attribution control had no accessible name or hover tooltip. Set title and aria-label to locale.btnAttribution so the info button is labelled consistently across languages, mirroring the container's aria-label. Add e2e test verifying the summary's title and aria-label.
1 parent 6581b5a commit e76971b

2 files changed

Lines changed: 12 additions & 1 deletion

File tree

‎src/mapml/control/AttributionButton.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export var AttributionButton = Control.Attribution.extend({
6060
}
6161
let locale = this._getLocale();
6262
this._container.innerHTML =
63-
`<summary><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 0 24 24" width="30px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"></path></svg></summary>` +
63+
`<summary title="${locale.btnAttribution}" aria-label="${locale.btnAttribution}"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 0 24 24" width="30px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"></path></svg></summary>` +
6464
'<div class="mapml-attribution-container">' +
6565
`<button onclick="this.closest(\'.leaflet-container\').querySelector(\'.shortcuts-dialog\').showModal()" class="shortcuts-button mapml-button">${locale.kbdShortcuts}</button> | ` +
6666
prefixAndAttribs.join(' <span aria-hidden="true">|</span> ') +

‎test/e2e/mapml-viewer/mapml-viewer.test.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,17 @@ test.describe('Playwright mapml-viewer Element Tests', () => {
5454
expect(arialabel).toEqual('Map data attribution');
5555
});
5656

57+
test('Ensure attribution summary has a localized title tooltip', async () => {
58+
let title = await page.evaluate(
59+
`document.querySelector('mapml-viewer')._map.attributionControl._container.querySelector('summary').getAttribute('title')`
60+
);
61+
expect(title).toEqual('Map data attribution');
62+
let arialabel = await page.evaluate(
63+
`document.querySelector('mapml-viewer')._map.attributionControl._container.querySelector('summary').getAttribute('aria-label')`
64+
);
65+
expect(arialabel).toEqual('Map data attribution');
66+
});
67+
5768
test('Initial map element extent', async () => {
5869
await page.waitForTimeout(500);
5970
const extent = await page.$eval('body > mapml-viewer', (map) => map.extent);

0 commit comments

Comments
 (0)