Merge pull request #200 from bearfriend/d2l-table-role

Fix a11y of d2l-table
BrightspaceUI · Feb 20, 2019 · 3de8bde · 3de8bde
2 parents 816c455 + 868fc4f
commit 3de8bde
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git a/d2l-scroll-wrapper.js b/d2l-scroll-wrapper.js
@@ -216,7 +216,7 @@ $_documentContainer.innerHTML = `<dom-module id="d2l-scroll-wrapper">
 			<d2l-table-circle-button class="right action" icon="[[endIcon]]" on-tap="handleTapRight" tabindex="-1" aria-hidden="true" type="button"></d2l-table-circle-button>
 		</d2l-sticky-element>
 		<div id="wrapper" class="wrapper">
-			<div class="inner-wrapper"><slot></slot></div>
+			<div class="inner-wrapper" role$="[[_role]]"><slot></slot></div>
 		</div>
 	</template>
 	
@@ -360,6 +360,12 @@ Polymer({
 			type: Boolean,
 			reflectToAttribute: true
 		},
+
+		needsTable: {
+			type: Boolean,
+			value: false
+		},
+
 		/** IE and Edge requires the value to be 1 in some cases **/
 		/**
 			Background: In some occasions in IE and Edge, there is a
@@ -374,6 +380,10 @@ Polymer({
 		_stickyIsDisabled: {
 			type: Boolean,
 			computed: '_computeStickyIsDisabled(scrollbarLeft, scrollbarRight)'
+		},
+		_role: {
+			type: String,
+			computed: '_computeRole(needsTable)'
 		}
 	},
 
@@ -501,5 +511,9 @@ Polymer({
 
 	_computeStickyIsDisabled: function(scrollbarLeft, scrollbarRight) {
 		return Boolean(scrollbarLeft) && Boolean(scrollbarRight);
+	},
+
+	_computeRole: function(needsTable) {
+		return needsTable ? 'table' : null;
 	}
 });
diff --git a/d2l-table.js b/d2l-table.js
@@ -161,7 +161,7 @@ $_documentContainer.innerHTML = `<dom-module id="d2l-table">
 				};
 			}
 		</style>
-		<d2l-scroll-wrapper show-actions="">
+		<d2l-scroll-wrapper show-actions="" needs-table>
 			<slot id="slot"></slot>
 		</d2l-scroll-wrapper>
 	</template>
@@ -177,13 +177,6 @@ Polymer({
 	listeners: {
 		'd2l-table-local-observer': '_handleLocalObserver'
 	},
-	properties: {
-		role: {
-			type: String,
-			value: 'table',
-			reflectToAttribute: true
-		}
-	},
 	__applyInQueue: false,
 	attached: function() {
 		afterNextRender(this, function() {