fix(ui5-table): improve accessibility (#2534)

SAP · Dec 2, 2020 · e06d6f3 · e06d6f3
1 parent 5f8e0e2
commit e06d6f3
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 6 deletions.
diff --git a/packages/main/src/Table.hbs b/packages/main/src/Table.hbs
@@ -1,7 +1,7 @@
-<table border="0" cellspacing="0" cellpadding="0" @keydown="{{_onkeydown}}">
+<table border="0" cellspacing="0" cellpadding="0" @keydown="{{_onkeydown}}" role="table">
 
 	<thead>
-		<tr id="{{_id}}-columnHeader" class="ui5-table-header-row" tabindex="0" style="height: 48px" @click="{{_onColumnHeaderClick}}">
+		<tr id="{{_id}}-columnHeader" role="row" class="ui5-table-header-row" tabindex="0" style="height: 48px" @click="{{_onColumnHeaderClick}}">
 			{{#each visibleColumns}}
 				<slot name="{{this._individualSlot}}"></slot>
 			{{/each}}
@@ -15,8 +15,8 @@
 
 		{{#unless rows.length}}
 			{{#if showNoData}}
-				<tr class="ui5-table-no-data-row-root">
-					<td colspan="{{visibleColumnsCount}}">
+				<tr class="ui5-table-no-data-row-root" role="row">
+					<td colspan="{{visibleColumnsCount}}" role="cell">
 
 						<div class="ui5-table-no-data-row">
 							<span>{{noDataText}}</span>

diff --git a/packages/main/src/TableCell.hbs b/packages/main/src/TableCell.hbs
@@ -1,6 +1,7 @@
 <td
 	tabindex="-1"
 	part="cell"
+	role="cell"
 >
 	<slot></slot>
 </td>
diff --git a/packages/main/src/TableColumn.hbs b/packages/main/src/TableColumn.hbs
@@ -1,6 +1,7 @@
 <th
 	scope="col"
 	part="column"
+	role="columnheader"
 >
 	<slot></slot>
 </th>
diff --git a/packages/main/src/TableRow.hbs b/packages/main/src/TableRow.hbs
@@ -6,6 +6,7 @@
 	aria-label="{{ariaLabelText}}"
 	data-sap-focus-ref
 	part="row"
+	role="row"
 >
 	{{#if shouldPopin}}
 		{{#each visibleCells}}
@@ -20,8 +21,8 @@
 
 {{#if shouldPopin}}
 	{{#each popinCells}}
-		<tr part="popin-row" class="{{this.classes}}" @click="{{../_onrowclick}}">
-			<td colspan="{{../visibleCellsCount}}">
+		<tr part="popin-row" role="row" class="{{this.classes}}" @click="{{../_onrowclick}}">
+			<td colspan="{{../visibleCellsCount}}" role="cell">
 				{{#if this.popinText}}
 					<span class="ui5-table-row-popin-title">{{this.popinText}}:</span>
 				{{/if}}