diff --git a/CHANGELOG.md b/CHANGELOG.md index 032080b6..4b994cb4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed +## [7.5.0] - 2022-08-12 + +### Added + +- `templates/__common__/app/scripts/utils/d3-base.js` - add `alttext` parameter for `createBase` for screen reader description. +- `templates/__common__/config/tasks/nunjucks.js` - add Nunjucks filter ai2html graphic screen reader alttext. + +### Changed + +- `templates/graphic/app/templates/base.html` - change document title to the graphic's title by default. +- `templates/graphic/app/templates/graphic-static.html` - apply new Nunjucks filter to ai2html graphics. + ## [7.4.0] - 2022-06-06 ### Changed diff --git a/package-lock.json b/package-lock.json index ca173e97..b8d952fe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@data-visuals/create", - "version": "7.4.0", + "version": "7.5.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@data-visuals/create", - "version": "7.4.0", + "version": "7.5.0", "license": "MIT", "dependencies": { "ansi-colors": "^3.2.4", diff --git a/package.json b/package.json index d1ac62c2..aa6e4531 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@data-visuals/create", - "version": "7.4.0", + "version": "7.5.0", "description": "Create graphics and features the Data Visuals way.", "scripts": { "build:docs": "doctoc README.md --github", diff --git a/templates/__common__/app/scripts/utils/d3-base.js b/templates/__common__/app/scripts/utils/d3-base.js index e4405d28..71d54583 100644 --- a/templates/__common__/app/scripts/utils/d3-base.js +++ b/templates/__common__/app/scripts/utils/d3-base.js @@ -8,6 +8,7 @@ export default function createBase({ height, x, y, + alttext, xAxis = axisBottom(), yAxis = axisLeft(), xAxisGap = 5, @@ -29,6 +30,17 @@ export default function createBase({ .attr('width', containerWidth) .attr('height', containerHeight); + if (!alttext) { + console.warn('Alternative text was not provided'); + } else { + svg + .attr('role', 'img') + .attr('aria-describedby', 'description') + .append('desc') + .attr('id', 'description') + .text(alttext); + } + const g = svg .append('g') .attr('transform', `translate(${margin.left},${margin.top})`); diff --git a/templates/__common__/config/tasks/nunjucks.js b/templates/__common__/config/tasks/nunjucks.js index 56e0a347..e26adff2 100644 --- a/templates/__common__/config/tasks/nunjucks.js +++ b/templates/__common__/config/tasks/nunjucks.js @@ -149,6 +149,26 @@ env.addGlobal( env.addFilter('makeArray', input => (Array.isArray(input) ? input : [input])); +/* + Adds accessibility tags to ai2html output + */ +env.addFilter('addA11yAttributes', (html, alttext) => { + return html + .replace( + /
/, + `