diff --git a/assets/src/scripts/accessibility.js b/assets/src/scripts/accessibility.js index 186e279d42941434dcbaac6de94ee2265ea3c024..92ca09e234197e998008959c38088bdadc28068a 100644 --- a/assets/src/scripts/accessibility.js +++ b/assets/src/scripts/accessibility.js @@ -7,9 +7,13 @@ * @param {Boolean} isInteractive */ function addSVGAccessibility(svg, {title, description, isInteractive}) { - svg.attr('title', title) - .attr('desc', description) - .attr('aria-labelledby', 'title desc'); + svg.selectAll('title, desc').remove(); + + svg.insert('desc', ':first-child') + .html(description); + svg.insert('title', ':first-child') + .html(title); + svg.attr('aria-labelledby', 'title desc'); if (isInteractive) { svg.attr('tabindex', 0); } diff --git a/assets/src/scripts/accessibility.spec.js b/assets/src/scripts/accessibility.spec.js index adfb21322ec203444aa63e7ff123783d9bc10577..7aca4d51bd965e73e53a31a2e40a1580341fdcc1 100644 --- a/assets/src/scripts/accessibility.spec.js +++ b/assets/src/scripts/accessibility.spec.js @@ -13,20 +13,47 @@ describe('svgAccessibility tests', () => { svg.remove(); }); - it('Should add a title, desc, and aria attributes', () => { + it('Should add a title and desc tags and aria attributes', () => { addSVGAccessibility(svg, { title: 'This is a title', description: 'This is a description', isInteractive: false }); - expect(svg.attr('title')).toBe('This is a title'); - expect(svg.attr('desc')).toBe('This is a description'); + const title = svg.selectAll('title'); + const desc = svg.selectAll('desc'); + + expect(title.size()).toBe(1); + expect(desc.size()).toBe(1); + expect(title.html()).toEqual('This is a title'); + expect(desc.html()).toEqual('This is a description'); const labelledBy = svg.attr('aria-labelledby'); expect(labelledBy).toContain('title'); expect(labelledBy).toContain('desc'); }); + it('Should remove the previous title and desc tags when called again', () => { + addSVGAccessibility(svg, { + title: 'This is a title', + description: 'This is a description', + isInteractive: false + }); + + addSVGAccessibility(svg, { + title: 'That is a title', + description: 'That is a description', + isInteractive: false + }); + + const title = svg.selectAll('title'); + const desc = svg.selectAll('desc'); + + expect(title.size()).toBe(1); + expect(desc.size()).toBe(1); + expect(title.html()).toEqual('That is a title'); + expect(desc.html()).toEqual('That is a description'); + }); + it('Should not add a tabindex if isInteractive is false', () => { addSVGAccessibility(svg, { title: 'This is a title',