feat(core angular react): Resolve DAP violations

Resolve DAP violations
carbon-design-system · Aug 30, 2018 · 86f6e05 · 86f6e05
1 parent 6ae6348
commit 86f6e05
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 17 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -23,3 +23,5 @@ deploy:
     skip_cleanup: true
     true:
       branch: master
+notifications:
+  email: false
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
 		"charts"
 	],
 	"author": "IBM",
-	"license": "Apache-2",
+	"license": "Apache-2.0",
 	"scripts": {
 		"commit": "git-cz",
 		"postinstall": "lerna bootstrap",

diff --git a/packages/angular/README.md b/packages/angular/README.md
@@ -0,0 +1,18 @@
+# `@carbon/charts-angular`
+
+> Angular wrappers for the Carbon Charts components
+
+## Getting Started
+
+Run the following command using [npm](https://www.npmjs.com/):
+
+```bash
+npm install -S @carbon/charts-angular
+```
+
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
+instead:
+
+```bash
+yarn add @carbon/charts-angular
+```
diff --git a/packages/angular/package.json b/packages/angular/package.json
@@ -7,7 +7,7 @@
 		"type": "git",
 		"url": "git@github.com:IBM/carbon-charts.git"
 	},
-	"license": "Apache-2",
+	"license": "Apache-2.0",
 	"author": "IBM",
 	"peerDependencies": {
 		"@angular/animations": "^6.0.0",

diff --git a/packages/core/README.md b/packages/core/README.md
@@ -0,0 +1,18 @@
+# `@carbon/charts`
+
+> Carbon Charting components
+
+## Getting Started
+
+Run the following command using [npm](https://www.npmjs.com/):
+
+```bash
+npm install -S @carbon/charts
+```
+
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
+instead:
+
+```bash
+yarn add @carbon/charts
+```
diff --git a/packages/core/demo/index.html b/packages/core/demo/index.html
@@ -1,4 +1,4 @@
-<html>
+<html lang="en">
 	<head>
 		<title>Carbon Charts</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -33,7 +33,7 @@ <h3>Basic chart types: Demo</h3>
 
 		<!-- Donut Chart -->
 		<div class="chart-holder has-actions" id="classy-donut-chart-holder"></div>
-		<div class="chart-demo-actions" id="actions-donut">
+		<div class="chart-demo-actions" id="actions-donut" role="region" aria-label="Donut chart actions">
 			<button class="bx--btn bx--btn--primary" id="change-data-donut" type="button">
 				Update Data
 			</button>
@@ -45,7 +45,7 @@ <h3>Basic chart types: Demo</h3>
 
 		<!-- Pie Chart -->
 		<div class="chart-holder has-actions" id="classy-pie-chart-holder"></div>
-		<div class="chart-demo-actions" id="actions-pie">
+		<div class="chart-demo-actions" id="actions-pie" role="region" aria-label="Pie chart actions">
 			<button class="bx--btn bx--btn--primary" id="change-data-pie" type="button">
 				Update Data
 			</button>
@@ -57,7 +57,7 @@ <h3>Basic chart types: Demo</h3>
 
 		<!-- Bar Chart -->
 		<div class="chart-holder has-actions" id="classy-grouped-bar-chart-holder"></div>
-		<div class="chart-demo-actions" id="actions-grouped-bar">
+		<div class="chart-demo-actions" id="actions-grouped-bar" role="region" aria-label="Grouped bar chart actions">
 			<button class="bx--btn bx--btn--primary" id="change-data-grouped-bar" type="button">
 				Update Data
 			</button>
@@ -68,7 +68,7 @@ <h3>Basic chart types: Demo</h3>
 		</div>
 
 		<div class="chart-holder has-actions" id="classy-simple-bar-accessible-chart-holder"></div>
-		<div class="chart-demo-actions" id="actions-simple-bar-accessible">
+		<div class="chart-demo-actions" id="actions-simple-bar-accessible" role="region" aria-label="Simple accessible bar chart actions">
 			<button class="bx--btn bx--btn--primary" id="change-data-simple-bar-accessible" type="button">
 				Update Data
 			</button>
@@ -79,7 +79,7 @@ <h3>Basic chart types: Demo</h3>
 		</div>
 
 		<div class="chart-holder has-actions" id="classy-stacked-bar-chart-holder"></div>
-		<div class="chart-demo-actions" id="actions-stacked-bar">
+		<div class="chart-demo-actions" id="actions-stacked-bar" role="region" aria-label="Stacked bar chart actions">
 			<button class="bx--btn bx--btn--primary" id="change-data-stacked-bar" type="button">
 				Update Data
 			</button>
@@ -90,7 +90,7 @@ <h3>Basic chart types: Demo</h3>
 		</div>
 
 		<div class="chart-holder has-actions" id="classy-simple-bar-chart-holder"></div>
-		<div class="chart-demo-actions" id="actions-simple-bar">
+		<div class="chart-demo-actions" id="actions-simple-bar" role="region" aria-label="Simple bar chart actions">
 			<button class="bx--btn bx--btn--primary" id="change-data-simple-bar" type="button">
 				Update Data
 			</button>
@@ -101,7 +101,7 @@ <h3>Basic chart types: Demo</h3>
 		</div>
 
 		<div class="chart-holder has-actions" id="classy-stacked-bar-accessible-chart-holder"></div>
-		<div class="chart-demo-actions" id="actions-stacked-bar-accessible">
+		<div class="chart-demo-actions" id="actions-stacked-bar-accessible" role="region" aria-label="Stacked accessible bar chart actions">
 			<button class="bx--btn bx--btn--primary" id="change-data-stacked-bar-accessible" type="button">
 				Update Data
 			</button>
@@ -113,7 +113,7 @@ <h3>Basic chart types: Demo</h3>
 
 		<!-- Line Chart -->
 		<div class="chart-holder has-actions" id="classy-curved-line-chart-holder"></div>
-		<div class="chart-demo-actions" id="actions-curved-line">
+		<div class="chart-demo-actions" id="actions-curved-line" role="region" aria-label="Curved line chart actions">
 			<button class="bx--btn bx--btn--primary" id="change-data-curved-line" type="button">
 				Update Data
 			</button>
@@ -124,7 +124,7 @@ <h3>Basic chart types: Demo</h3>
 		</div>
 
 		<div class="chart-holder has-actions" id="classy-line-chart-holder"></div>
-		<div class="chart-demo-actions" id="actions-line">
+		<div class="chart-demo-actions" id="actions-line" role="region" aria-label="Line chart actions">
 			<button class="bx--btn bx--btn--primary" id="change-data-line" type="button">
 				Update Data
 			</button>
@@ -135,7 +135,7 @@ <h3>Basic chart types: Demo</h3>
 		</div>
 
 		<div class="chart-holder has-actions" id="classy-line-step-chart-holder"></div>
-		<div class="chart-demo-actions" id="actions-line-step">
+		<div class="chart-demo-actions" id="actions-line-step" role="region" aria-label="Step chart actions">
 			<button class="bx--btn bx--btn--primary" id="change-data-line-step" type="button">
 				Update Data
 			</button>

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -21,7 +21,7 @@
     "charts"
   ],
   "author": "IBM",
-  "license": "Apache-2",
+  "license": "Apache-2.0",
   "dependencies": {
     "d3": "4.11.0"
   },

diff --git a/packages/core/src/base-chart.ts b/packages/core/src/base-chart.ts
@@ -332,8 +332,13 @@ export class BaseChart {
 			container.attr("chart-id", chartId)
 				.classed("chart-wrapper", true);
 			if (container.select(".legend-wrapper").nodes().length === 0) {
-				const legendWrapper = container.append("div").attr("class", "legend-wrapper");
-				legendWrapper.append("ul").attr("class", "legend");
+				const legendWrapper = container.append("div")
+					.attr("class", "legend-wrapper")
+					.attr("role", "region")
+					.attr("aria-label", `Chart ${chartId} Legend`);
+
+				legendWrapper.append("ul")
+					.attr("class", "legend");
 			}
 		}
 		return {chartId, container};

diff --git a/packages/core/src/services/patterns.ts b/packages/core/src/services/patterns.ts
@@ -82,6 +82,8 @@ export default class PatternsService {
 				const patternElement = mountedSVG.querySelector("pattern");
 				patternElement.id = `carbon-${chartContainerID}-pattern-${id}`;
 
+				mountedSVG.querySelector("g").removeAttribute("id");
+
 				// Apply fills to everything
 				const allElementsInsideSVG = Array.prototype.slice.call(mountedSVG.querySelectorAll("pattern g *"));
 				allElementsInsideSVG.forEach((element, elementIndex) => {
@@ -96,6 +98,11 @@ export default class PatternsService {
 					element.removeAttribute("class");
 				});
 
+				const allRectsInsideSVG = Array.prototype.slice.call(mountedSVG.querySelectorAll("rect"));
+				allRectsInsideSVG.forEach(rectElement => {
+					rectElement.removeAttribute("id");
+				});
+
 				// Update pattern widths & heights
 				patternElement.setAttribute("width", `${Configuration.charts.patternFills.width}`);
 				patternElement.setAttribute("height", `${Configuration.charts.patternFills.height}`);

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -15,7 +15,7 @@
 		"type": "git",
 		"url": "git@github.com:IBM/carbon-charts.git"
 	},
-	"license": "Apache-2",
+	"license": "Apache-2.0",
 	"author": "IBM",
 	"bugs": {
 		"url": "https://github.com/IBM/carbon-charts/issues"