From 5a5cbc291fb654ef2cabf9a384911f20f91c64cf Mon Sep 17 00:00:00 2001 From: Alan Harnum Date: Wed, 16 Sep 2015 09:57:28 -0400 Subject: [PATCH] FLOE-418: generate unique ID for pie to explicitly associate title and desc via aria-describedby --- demos/pieChart-screen-reader.html | 95 +++++++++++++++++++++++++++++++ src/js/pie.js | 18 +++++- 2 files changed, 110 insertions(+), 3 deletions(-) create mode 100644 demos/pieChart-screen-reader.html diff --git a/demos/pieChart-screen-reader.html b/demos/pieChart-screen-reader.html new file mode 100644 index 0000000..0f1efd3 --- /dev/null +++ b/demos/pieChart-screen-reader.html @@ -0,0 +1,95 @@ + + + + + + + + + + + + + + + + + + + + + + + + + Chart Authoring Tool + + + + + +
+
+
+ + + + + diff --git a/src/js/pie.js b/src/js/pie.js index 30f1ded..c8edec7 100644 --- a/src/js/pie.js +++ b/src/js/pie.js @@ -152,7 +152,9 @@ https://github.com/gpii/universal/LICENSE.txt colors = p.colors, outerRadius = p.outerRadius || width / 2, innerRadius = p.innerRadius || 0, - pieClass = that.classes.pie; + pieClass = that.classes.pie, + pieTitleId = "fluid-id-"+fluid.allocateGuid(), + pieDescId = "fluid-id-"+fluid.allocateGuid(); gpii.chartAuthoring.pieChart.pie.calcAutoscaleWidth(that); @@ -173,18 +175,28 @@ https://github.com/gpii/universal/LICENSE.txt "width": width, "height": height, "class": pieClass, - "viewBox": gpii.chartAuthoring.pieChart.getViewBoxConfiguration(0,0, width, height) + "viewBox": gpii.chartAuthoring.pieChart.getViewBoxConfiguration(0,0, width, height), + // Set aria role to image + "role": "img", + // Explicitly associate SVG title & desc via aria-describedby + "aria-describedby": pieTitleId + " " + pieDescId }); that.svg .append("title") + .attr({ + "id": pieTitleId + }) .text(that.options.strings.pieTitle); that.svg .append("desc") + .attr({ + "id": pieDescId + }) .text(that.options.strings.pieDescription); - that.pieGroup = that.svg.append("g") + that.pieGroup = that.svg.append("g") .attr({ "transform": "translate(" + outerRadius + "," + outerRadius + ")" });