From e0184f1f661f01913b15bf163bddbabbee213a6c Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Sat, 1 Jan 2022 08:08:52 +0530
Subject: [PATCH 1/4] accesibility issues fixes

---
 page-accordions.html | 170 +++++++++++++++++++++----------------------
 1 file changed, 85 insertions(+), 85 deletions(-)

diff --git a/page-accordions.html b/page-accordions.html
index 9a991a8e..02460cb0 100644
--- a/page-accordions.html
+++ b/page-accordions.html
@@ -40,7 +40,7 @@
 			<h2 class="sui-box-title">Flexbox Accordions</h2>
 		</div>
 
-		<div class="sui-box-body">
+		<div class="sui-box-body" tabindex="0">
 
 			<div class="sui-box-settings-row">
 
@@ -55,9 +55,9 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 						<div class="sui-accordion-header">
 
-							<div class="sui-accordion-col-4">Recommendation</div>
-							<div class="sui-accordion-col-4">Score / 100</div>
-							<div class="sui-accordion-col-4">Type</div>
+							<div class="sui-accordion-col-4" tabindex="0">Recommendation</div>
+							<div class="sui-accordion-col-4" tabindex="0">Score / 100</div>
+							<div class="sui-accordion-col-4" tabindex="0">Type</div>
 
 						</div>
 
@@ -65,11 +65,11 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 							<div id="test-parent-accordion-header" class="sui-accordion-item-header">
 
-								<div class="sui-accordion-item-title sui-accordion-col-4"><span aria-hidden="true" class="sui-icon-warning-alert sui-error"></span> Item</div>
+								<div class="sui-accordion-item-title sui-accordion-col-4" tabindex="0"><span aria-hidden="true" class="sui-icon-warning-alert sui-error"></span> Item</div>
 
-								<div class="sui-accordion-col-4"><div class="sui-circle-score sui-grade-f" data-score="8"></div></div>
+								<div class="sui-accordion-col-4"><div class="sui-circle-score sui-grade-f" tabindex="0" data-score="8"></div></div>
 
-								<div class="sui-accordion-col-4">More info on something <button class="sui-button-icon sui-accordion-open-indicator" aria-label="Open item">
+								<div class="sui-accordion-col-4" tabindex="0">More info on something <button class="sui-button-icon sui-accordion-open-indicator" aria-label="Open item">
 									<span class="sui-icon-chevron-down" aria-hidden="true"></span>
 								</button></div>
 
@@ -79,7 +79,7 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 								<div class="sui-box">
 
-									<div class="sui-box-body">
+									<div class="sui-box-body" tabindex="0">
 
 										<p>Item content – Hello!</p>
 
@@ -87,9 +87,9 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 											<div class="sui-accordion-header">
 
-												<div class="sui-accordion-col-4">Recommendation</div>
-												<div class="sui-accordion-col-4">Score / 100</div>
-												<div class="sui-accordion-col-4">Type</div>
+												<div class="sui-accordion-col-4" tabindex="0">Recommendation</div>
+												<div class="sui-accordion-col-4" tabindex="0">Score / 100</div>
+												<div class="sui-accordion-col-4" tabindex="0">Type</div>
 
 											</div>
 
@@ -97,11 +97,11 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 												<div class="sui-accordion-item-header">
 
-													<div class="sui-accordion-item-title sui-accordion-col-4"><span aria-hidden="true" class="sui-icon-warning-alert sui-error"></span> Item</div>
+													<div class="sui-accordion-item-title sui-accordion-col-4" tabindex="0"><span aria-hidden="true" class="sui-icon-warning-alert sui-error"></span> Item</div>
 
-													<div class="sui-accordion-col-4"><div class="sui-circle-score sui-grade-f" data-score="8"></div></div>
+													<div class="sui-accordion-col-4"><div class="sui-circle-score sui-grade-f" tabindex="0" data-score="8"></div></div>
 
-													<div class="sui-accordion-col-4">More info on something <button class="sui-button-icon sui-accordion-open-indicator" aria-label="Open item">
+													<div class="sui-accordion-col-4" tabindex="0">More info on something <button class="sui-button-icon sui-accordion-open-indicator" aria-label="Open item">
 														<span class="sui-icon-chevron-down" aria-hidden="true"></span>
 													</button></div>
 
@@ -111,7 +111,7 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 													<div class="sui-box">
 
-														<div class="sui-box-body">
+														<div class="sui-box-body" tabindex="0">
 
 															<p>Item content – Hello!</p>
 
@@ -127,11 +127,11 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 												<div class="sui-accordion-item-header">
 
-													<div class="sui-accordion-item-title sui-accordion-col-4"><span aria-hidden="true" class="sui-icon-warning-alert sui-warning"></span> Item</div>
+													<div class="sui-accordion-item-title sui-accordion-col-4" tabindex="0"><span aria-hidden="true" class="sui-icon-warning-alert sui-warning"></span> Item</div>
 
-													<div class="sui-accordion-col-4"><div class="sui-circle-score sui-grade-c" data-score="67"></div></div>
+													<div class="sui-accordion-col-4"><div class="sui-circle-score sui-grade-c" tabindex="0" data-score="67"></div></div>
 
-													<div class="sui-accordion-col-4">More info on something <button class="sui-button-icon sui-accordion-open-indicator" aria-label="Open item">
+													<div class="sui-accordion-col-4" tabindex="0">More info on something <button class="sui-button-icon sui-accordion-open-indicator" aria-label="Open item">
 														<span class="sui-icon-chevron-down" aria-hidden="true"></span>
 													</button></div>
 
@@ -141,7 +141,7 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 													<div class="sui-box">
 
-														<div class="sui-box-body">
+														<div class="sui-box-body" tabindex="0">
 
 															<p>Item content – Hello!</p>
 
@@ -157,11 +157,11 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 												<div class="sui-accordion-item-header">
 
-													<div class="sui-accordion-item-title sui-accordion-col-4"><span aria-hidden="true" class="sui-icon-warning-alert sui-success"></span> Item</div>
+													<div class="sui-accordion-item-title sui-accordion-col-4" tabindex="0"><span aria-hidden="true" class="sui-icon-warning-alert sui-success"></span> Item</div>
 
-													<div class="sui-accordion-col-4"><div class="sui-circle-score sui-grade-a" data-score="95"></div></div>
+													<div class="sui-accordion-col-4"><div class="sui-circle-score sui-grade-a" tabindex="0" data-score="95"></div></div>
 
-													<div class="sui-accordion-col-4">More info on something <button class="sui-button-icon sui-accordion-open-indicator" aria-label="Open item">
+													<div class="sui-accordion-col-4" tabindex="0">More info on something <button class="sui-button-icon sui-accordion-open-indicator" aria-label="Open item">
 														<span class="sui-icon-chevron-down" aria-hidden="true"></span>
 													</button></div>
 
@@ -171,7 +171,7 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 													<div class="sui-box">
 
-														<div class="sui-box-body">
+														<div class="sui-box-body" tabindex="0">
 
 															<p>Item content – Hello!</p>
 
@@ -197,11 +197,11 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 							<div class="sui-accordion-item-header">
 
-								<div class="sui-accordion-item-title sui-accordion-col-4"><span aria-hidden="true" class="sui-icon-warning-alert sui-warning"></span> Item</div>
+								<div class="sui-accordion-item-title sui-accordion-col-4" tabindex="0"><span aria-hidden="true" class="sui-icon-warning-alert sui-warning"></span> Item</div>
 
-								<div class="sui-accordion-col-4"><div class="sui-circle-score sui-grade-c" data-score="67"></div></div>
+								<div class="sui-accordion-col-4"><div class="sui-circle-score sui-grade-c" tabindex="0" data-score="67"></div></div>
 
-								<div class="sui-accordion-col-4">More info on something <button class="sui-button-icon sui-accordion-open-indicator" aria-label="Open item">
+								<div class="sui-accordion-col-4" tabindex="0">More info on something <button class="sui-button-icon sui-accordion-open-indicator" aria-label="Open item">
 									<span class="sui-icon-chevron-down" aria-hidden="true"></span>
 								</button></div>
 
@@ -211,7 +211,7 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 								<div class="sui-box">
 
-									<div class="sui-box-body">
+									<div class="sui-box-body" tabindex="0">
 
 										<p>Item content – Hello!</p>
 
@@ -227,11 +227,11 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 							<div class="sui-accordion-item-header">
 
-								<div class="sui-accordion-item-title sui-accordion-col-4"><span aria-hidden="true" class="sui-icon-warning-alert sui-success"></span> Item</div>
+								<div class="sui-accordion-item-title sui-accordion-col-4" tabindex="0"><span aria-hidden="true" class="sui-icon-warning-alert sui-success"></span> Item</div>
 
-								<div class="sui-accordion-col-4"><div class="sui-circle-score sui-grade-a" data-score="95"></div></div>
+								<div class="sui-accordion-col-4"><div class="sui-circle-score sui-grade-a" tabindex="0" data-score="95"></div></div>
 
-								<div class="sui-accordion-col-4">More info on something <button class="sui-button-icon sui-accordion-open-indicator" aria-label="Open item">
+								<div class="sui-accordion-col-4" tabindex="0">More info on something <button class="sui-button-icon sui-accordion-open-indicator" aria-label="Open item">
 									<span class="sui-icon-chevron-down" aria-hidden="true"></span>
 								</button></div>
 
@@ -241,7 +241,7 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 								<div class="sui-box">
 
-									<div class="sui-box-body">
+									<div class="sui-box-body" tabindex="0">
 
 										<p>Item content – Hello!</p>
 
@@ -257,11 +257,11 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 							<div class="sui-accordion-item-header">
 
-								<div class="sui-accordion-item-title sui-accordion-col-4"><span aria-hidden="true" class="sui-icon-warning-alert"></span> Item</div>
+								<div class="sui-accordion-item-title sui-accordion-col-4" tabindex="0"><span aria-hidden="true" class="sui-icon-warning-alert"></span> Item</div>
 
-								<div class="sui-accordion-col-4"><div class="sui-circle-score  sui-grade-default" data-score="50"></div></div>
+								<div class="sui-accordion-col-4"><div class="sui-circle-score  sui-grade-default" tabindex="0" data-score="50"></div></div>
 
-								<div class="sui-accordion-col-4">More info on something <button class="sui-button-icon sui-accordion-open-indicator" aria-label="Open item">
+								<div class="sui-accordion-col-4" tabindex="0">More info on something <button class="sui-button-icon sui-accordion-open-indicator" aria-label="Open item">
 									<span class="sui-icon-chevron-down" aria-hidden="true"></span>
 								</button></div>
 
@@ -271,7 +271,7 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 								<div class="sui-box">
 
-									<div class="sui-box-body">
+									<div class="sui-box-body" tabindex="0">
 
 										<p>Item content – Hello!</p>
 
@@ -328,7 +328,7 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 								<div class="sui-box">
 
-									<div class="sui-box-body">
+									<div class="sui-box-body" tabindex="0">
 
 										<p>Item content – Hello!</p>
 
@@ -368,7 +368,7 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 								<div class="sui-box">
 
-									<div class="sui-box-body">
+									<div class="sui-box-body" tabindex="0">
 
 										<p>Item content – Hello!</p>
 
@@ -408,7 +408,7 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 								<div class="sui-box">
 
-									<div class="sui-box-body">
+									<div class="sui-box-body" tabindex="0">
 
 										<p>Item content – Hello!</p>
 
@@ -441,9 +441,9 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 			<div class="sui-accordion-header">
 
-				<div class="sui-accordion-col-4">Recommendation</div>
-				<div class="sui-accordion-col-4">Score / 100</div>
-				<div class="sui-accordion-col-4">Type</div>
+				<div class="sui-accordion-col-4" tabindex="0">Recommendation</div>
+				<div class="sui-accordion-col-4" tabindex="0">Score / 100</div>
+				<div class="sui-accordion-col-4" tabindex="0">Type</div>
 
 			</div>
 
@@ -451,11 +451,11 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 				<div class="sui-accordion-item-header">
 
-					<div class="sui-accordion-item-title sui-accordion-col-4"><span aria-hidden="true" class="sui-icon-warning-alert sui-error"></span> Item</div>
+					<div class="sui-accordion-item-title sui-accordion-col-4" tabindex="0"><span aria-hidden="true" class="sui-icon-warning-alert sui-error"></span> Item</div>
 
-					<div class="sui-accordion-col-4"><div class="sui-circle-score sui-grade-f" data-score="8"></div></div>
+					<div class="sui-accordion-col-4"><div class="sui-circle-score sui-grade-f" tabindex="0" data-score="8"></div></div>
 
-					<div class="sui-accordion-col-4">More info on something <button class="sui-button-icon sui-accordion-open-indicator" aria-label="Open item">
+					<div class="sui-accordion-col-4" tabindex="0">More info on something <button class="sui-button-icon sui-accordion-open-indicator" aria-label="Open item">
 						<span class="sui-icon-chevron-down" aria-hidden="true"></span>
 					</button></div>
 
@@ -465,7 +465,7 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 					<div class="sui-box">
 
-						<div class="sui-box-body">
+						<div class="sui-box-body" tabindex="0">
 
 							<p>Item content – Hello!</p>
 
@@ -481,11 +481,11 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 				<div class="sui-accordion-item-header">
 
-					<div class="sui-accordion-item-title sui-accordion-col-4"><span aria-hidden="true" class="sui-icon-warning-alert sui-warning"></span> Item</div>
+					<div class="sui-accordion-item-title sui-accordion-col-4" tabindex="0"><span aria-hidden="true" class="sui-icon-warning-alert sui-warning"></span> Item</div>
 
-					<div class="sui-accordion-col-4"><div class="sui-circle-score sui-grade-c" data-score="67"></div></div>
+					<div class="sui-accordion-col-4"><div class="sui-circle-score sui-grade-c" tabindex="0" data-score="67"></div></div>
 
-					<div class="sui-accordion-col-4">More info on something <button class="sui-button-icon sui-accordion-open-indicator" aria-label="Open item">
+					<div class="sui-accordion-col-4" tabindex="0">More info on something <button class="sui-button-icon sui-accordion-open-indicator" aria-label="Open item">
 						<span class="sui-icon-chevron-down" aria-hidden="true"></span>
 					</button></div>
 
@@ -495,7 +495,7 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 					<div class="sui-box">
 
-						<div class="sui-box-body">
+						<div class="sui-box-body" tabindex="0">
 
 							<p>Item content – Hello!</p>
 
@@ -511,11 +511,11 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 				<div class="sui-accordion-item-header">
 
-					<div class="sui-accordion-item-title sui-accordion-col-4"><span aria-hidden="true" class="sui-icon-warning-alert sui-success"></span> Item</div>
+					<div class="sui-accordion-item-title sui-accordion-col-4" tabindex="0"><span aria-hidden="true" class="sui-icon-warning-alert sui-success"></span> Item</div>
 
-					<div class="sui-accordion-col-4"><div class="sui-circle-score sui-grade-a" data-score="95"></div></div>
+					<div class="sui-accordion-col-4"><div class="sui-circle-score sui-grade-a" tabindex="0" data-score="95"></div></div>
 
-					<div class="sui-accordion-col-4">More info on something <button class="sui-button-icon sui-accordion-open-indicator" aria-label="Open item">
+					<div class="sui-accordion-col-4" tabindex="0">More info on something <button class="sui-button-icon sui-accordion-open-indicator" aria-label="Open item">
 						<span class="sui-icon-chevron-down" aria-hidden="true"></span>
 					</button></div>
 
@@ -525,7 +525,7 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 					<div class="sui-box">
 
-						<div class="sui-box-body">
+						<div class="sui-box-body" tabindex="0">
 
 							<p>Item content – Hello!</p>
 
@@ -548,7 +548,7 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 			<h2 class="sui-box-title">Table Accordions</h2>
 		</div>
 
-		<div class="sui-box-body">
+		<div class="sui-box-body" tabindex="0">
 
 			<div class="sui-box-settings-row">
 
@@ -562,9 +562,9 @@ <h2 class="sui-box-title">Table Accordions</h2>
 					<table class="sui-table sui-accordion">
 
 						<thead><tr>
-							<th>Recommendation</th>
-							<th>Score / 100</th>
-							<th>Type</th>
+							<th scope="col">Recommendation</th>
+							<th scope="col">Score / 100</th>
+							<th scope="col">Type</th>
 						</tr></thead>
 
 						<tbody>
@@ -573,16 +573,16 @@ <h2 class="sui-box-title">Table Accordions</h2>
 
 								<td class="sui-table-item-title"><span aria-hidden="true" class="sui-icon-warning-alert sui-error"></span> Item</td>
 
-								<td><div class="sui-circle-score sui-grade-f" data-score="6"></div></td>
+								<td><div class="sui-circle-score sui-grade-f" tabindex="0" data-score="6"></div></td>
 
-								<td>More info on something. <span class="sui-accordion-open-indicator" aria-label="Expand"><span class="sui-icon-chevron-down" aria-hidden="true"></span></span><button type="button" class="sui-screen-reader-text">Expand</button></td>
+								<td>More info on something. <span class="sui-accordion-open-indicator" aria-label="Expand" tabindex="0"><span class="sui-icon-chevron-down" aria-hidden="true"></span></span><button type="button" class="sui-screen-reader-text">Expand</button></td>
 
 							</tr>
 
 							<tr class="sui-accordion-item-content">
 
 								<td colspan="3"><div class="sui-box">
-									<div class="sui-box-body"><p>Item content – Hello!</p></div>
+									<div class="sui-box-body" tabindex="0"><p>Item content – Hello!</p></div>
 								</div></td>
 
 							</tr>
@@ -591,16 +591,16 @@ <h2 class="sui-box-title">Table Accordions</h2>
 
 								<td class="sui-table-item-title"><span aria-hidden="true" class="sui-icon-warning-alert sui-warning"></span> Item</td>
 
-								<td><div class="sui-circle-score sui-grade-d" data-score="80"></div></td>
+								<td><div class="sui-circle-score sui-grade-d" tabindex="0" data-score="80"></div></td>
 
-								<td>More info on something. <span class="sui-accordion-open-indicator" aria-label="Expand"><span class="sui-icon-chevron-down" aria-hidden="true"></span></span><button type="button" class="sui-screen-reader-text">Expand</button></td>
+								<td>More info on something. <span class="sui-accordion-open-indicator" aria-label="Expand" tabindex="0"><span class="sui-icon-chevron-down" aria-hidden="true"></span></span><button type="button" class="sui-screen-reader-text">Expand</button></td>
 
 							</tr>
 
 							<tr class="sui-accordion-item-content">
 
 								<td colspan="3"><div class="sui-box">
-									<div class="sui-box-body"><p>Item content – Hello!</p></div>
+									<div class="sui-box-body" tabindex="0"><p>Item content – Hello!</p></div>
 								</div></td>
 
 							</tr>
@@ -609,16 +609,16 @@ <h2 class="sui-box-title">Table Accordions</h2>
 
 								<td class="sui-table-item-title"><span aria-hidden="true" class="sui-icon-warning-alert sui-success"></span> Item</td>
 
-								<td><div class="sui-circle-score sui-grade-a" data-score="100"></div></td>
+								<td><div class="sui-circle-score sui-grade-a" tabindex="0" data-score="100"></div></td>
 
-								<td>More info on something. <span class="sui-accordion-open-indicator" aria-label="Expand"><span class="sui-icon-chevron-down" aria-hidden="true"></span></span><button type="button" class="sui-screen-reader-text">Expand</button></td>
+								<td>More info on something. <span class="sui-accordion-open-indicator" aria-label="Expand" tabindex="0"><span class="sui-icon-chevron-down" aria-hidden="true"></span></span><button type="button" class="sui-screen-reader-text">Expand</button></td>
 
 							</tr>
 
 							<tr class="sui-accordion-item-content">
 
 								<td colspan="3"><div class="sui-box">
-									<div class="sui-box-body"><p>Item content – Hello!</p></div>
+									<div class="sui-box-body" tabindex="0"><p>Item content – Hello!</p></div>
 								</div></td>
 
 							</tr>
@@ -627,16 +627,16 @@ <h2 class="sui-box-title">Table Accordions</h2>
 
 								<td class="sui-table-item-title"><span aria-hidden="true" class="sui-icon-warning-alert"></span> Item</td>
 
-								<td><div class="sui-circle-score sui-grade-default" data-score="50"></div></td>
+								<td><div class="sui-circle-score sui-grade-de tabindex="0"fault" data-score="50"></div></td>
 
-								<td>More info on something. <span class="sui-accordion-open-indicator" aria-label="Expand"><span class="sui-icon-chevron-down" aria-hidden="true"></span></span><button type="button" class="sui-screen-reader-text">Expand</button></td>
+								<td>More info on something. <span class="sui-accordion-open-indicator" aria-label="Expand" tabindex="0"><span class="sui-icon-chevron-down" aria-hidden="true"></span></span><button type="button" class="sui-screen-reader-text">Expand</button></td>
 
 							</tr>
 
 							<tr class="sui-accordion-item-content sui-table-item-last">
 
 								<td colspan="3"><div class="sui-box">
-									<div class="sui-box-body"><p>Item content – Hello!</p></div>
+									<div class="sui-box-body" tabindex="0"><p>Item content – Hello!</p></div>
 								</div></td>
 
 							</tr>
@@ -664,7 +664,7 @@ <h2 class="sui-box-title">Table Accordions</h2>
 
 							<tr class="sui-accordion-item sui-table-item-first">
 
-								<td class="sui-table-item-title"><label for="table-accordion-sample-item-1" class="sui-toggle"><input type="checkbox" id="table-accordion-sample-item-1" checked="checked"><span aria-hidden="true" class="sui-toggle-slider"></span><span class="sui-screen-reader-text">Toggle</span></label>Item <span class="sui-accordion-open-indicator" aria-label="Expand"><span class="sui-icon-chevron-down" aria-hidden="true"></span></span></td>
+								<td class="sui-table-item-title"><label for="table-accordion-sample-item-1" class="sui-toggle"><input type="checkbox" id="table-accordion-sample-item-1" checked="checked"><span aria-hidden="true" class="sui-toggle-slider"></span><span class="sui-screen-reader-text">Toggle</span></label>Item <span class="sui-accordion-open-indicator" aria-label="Expand" tabindex="0"><span class="sui-icon-chevron-down" aria-hidden="true"></span></span></td>
 
 							</tr>
 
@@ -672,7 +672,7 @@ <h2 class="sui-box-title">Table Accordions</h2>
 
 								<td><div class="sui-box">
 
-									<div class="sui-box-body">
+									<div class="sui-box-body" tabindex="0">
 
 										<p>Item content – Hello!</p>
 
@@ -684,7 +684,7 @@ <h2 class="sui-box-title">Table Accordions</h2>
 
 							<tr class="sui-accordion-item">
 
-								<td class="sui-table-item-title"><label for="table-accordion-sample-item-2" class="sui-toggle"><input type="checkbox" id="table-accordion-sample-item-2" checked="checked"><span aria-hidden="true" class="sui-toggle-slider"></span><span class="sui-screen-reader-text">Toggle</span></label>Item <span class="sui-accordion-open-indicator" aria-label="Expand"><span class="sui-icon-chevron-down" aria-hidden="true"></span></span></td>
+								<td class="sui-table-item-title"><label for="table-accordion-sample-item-2" class="sui-toggle"><input type="checkbox" id="table-accordion-sample-item-2" checked="checked"><span aria-hidden="true" class="sui-toggle-slider"></span><span class="sui-screen-reader-text">Toggle</span></label>Item <span class="sui-accordion-open-indicator" aria-label="Expand" tabindex="0"><span class="sui-icon-chevron-down" aria-hidden="true"></span></span></td>
 
 							</tr>
 
@@ -692,7 +692,7 @@ <h2 class="sui-box-title">Table Accordions</h2>
 
 								<td><div class="sui-box">
 
-									<div class="sui-box-body">
+									<div class="sui-box-body" tabindex="0">
 
 										<p>Item content – Hello!</p>
 
@@ -710,7 +710,7 @@ <h2 class="sui-box-title">Table Accordions</h2>
 										<span aria-hidden="true" class="sui-toggle-slider"></span>
 										<span class="sui-screen-reader-text">Toggle</span>
 									</label>
-									Item <span class="sui-accordion-open-indicator" aria-label="Expand"><span class="sui-icon-chevron-down" aria-hidden="true"></span></span>
+									Item <span class="sui-accordion-open-indicator" aria-label="Expand" tabindex="0"><span class="sui-icon-chevron-down" aria-hidden="true"></span></span>
 								</td>
 
 							</tr>
@@ -719,7 +719,7 @@ <h2 class="sui-box-title">Table Accordions</h2>
 
 								<td><div class="sui-box">
 
-									<div class="sui-box-body">
+									<div class="sui-box-body" tabindex="0">
 
 										<p>Item content – Hello!</p>
 
@@ -762,9 +762,9 @@ <h2 class="sui-box-title">Table Accordions</h2>
 
 					<td class="sui-table-item-title"><span aria-hidden="true" class="sui-icon-warning-alert sui-error"></span> Item</td>
 
-					<td><div class="sui-circle-score sui-grade-f" data-score="6"></div></td>
+					<td><div class="sui-circle-score sui-grade-f" tabindex="0" data-score="6"></div></td>
 
-					<td>More info on something. <span class="sui-accordion-open-indicator" aria-label="Expand"><span class="sui-icon-chevron-down" aria-hidden="true"></span></span><button type="button" class="sui-screen-reader-text">Expand</button></td>
+					<td>More info on something. <span class="sui-accordion-open-indicator" aria-label="Expand" tabindex="0"><span class="sui-icon-chevron-down" aria-hidden="true"></span></span><button type="button" class="sui-screen-reader-text">Expand</button></td>
 
 				</tr>
 
@@ -772,7 +772,7 @@ <h2 class="sui-box-title">Table Accordions</h2>
 
 					<td colspan="3"><div class="sui-box">
 
-						<div class="sui-box-body">
+						<div class="sui-box-body" tabindex="0">
 
 							<table class="sui-table">
 
@@ -816,16 +816,16 @@ <h2 class="sui-box-title">Table Accordions</h2>
 
 					<td class="sui-table-item-title"><span aria-hidden="true" class="sui-icon-warning-alert sui-warning"></span> Item</td>
 
-					<td><div class="sui-circle-score sui-grade-d" data-score="80"></div></td>
+					<td><div class="sui-circle-score sui-grade-d" tabindex="0" data-score="80"></div></td>
 
-					<td>More info on something. <span class="sui-accordion-open-indicator" aria-label="Expand"><span class="sui-icon-chevron-down" aria-hidden="true"></span></span><button type="button" class="sui-screen-reader-text">Expand</button></td>
+					<td>More info on something. <span class="sui-accordion-open-indicator" aria-label="Expand" tabindex="0"><span class="sui-icon-chevron-down" aria-hidden="true"></span></span><button type="button" class="sui-screen-reader-text">Expand</button></td>
 
 				</tr>
 
 				<tr class="sui-accordion-item-content">
 
 					<td colspan="3"><div class="sui-box">
-						<div class="sui-box-body">Item content – Hello!</div>
+						<div class="sui-box-body" tabindex="0">Item content – Hello!</div>
 					</div></td>
 
 				</tr>
@@ -834,16 +834,16 @@ <h2 class="sui-box-title">Table Accordions</h2>
 
 					<td class="sui-table-item-title"><span aria-hidden="true" class="sui-icon-warning-alert sui-success"></span> Item</td>
 
-					<td><div class="sui-circle-score sui-grade-a" data-score="100"></div></td>
+					<td><div class="sui-circle-score sui-grade-a" tabindex="0" data-score="100"></div></td>
 
-					<td>More info on something. <span class="sui-accordion-open-indicator" aria-label="Expand"><span class="sui-icon-chevron-down" aria-hidden="true"></span></span><button type="button" class="sui-screen-reader-text">Expand</button></td>
+					<td>More info on something. <span class="sui-accordion-open-indicator" aria-label="Expand" tabindex="0"><span class="sui-icon-chevron-down" aria-hidden="true"></span></span><button type="button" class="sui-screen-reader-text">Expand</button></td>
 
 				</tr>
 
 				<tr class="sui-accordion-item-content sui-table-item-last">
 
 					<td colspan="3"><div class="sui-box">
-						<div class="sui-box-body">Item content – Hello!</div>
+						<div class="sui-box-body" tabindex="0">Item content – Hello!</div>
 					</div></td>
 
 				</tr>
@@ -1097,7 +1097,7 @@ <h2 class="sui-box-title">Table Accordions</h2>
 			<h2 class="sui-box-title">Documentation</h2>
 		</div>
 
-		<div class="sui-box-body">
+		<div class="sui-box-body" tabindex="0">
 
 			<div class="sui-notice sui-notice-warning">
 				<p>If you are using individual js components, <code>accordion.js</code> is required.</p>

From fb303de5537c5e611d41c679b6ce3871062b5d9c Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Sat, 1 Jan 2022 08:09:02 +0530
Subject: [PATCH 2/4] accesibility issues fixes

---
 page-accordions.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/page-accordions.html b/page-accordions.html
index 02460cb0..85f4a6fc 100644
--- a/page-accordions.html
+++ b/page-accordions.html
@@ -562,9 +562,9 @@ <h2 class="sui-box-title">Table Accordions</h2>
 					<table class="sui-table sui-accordion">
 
 						<thead><tr>
-							<th scope="col">Recommendation</th>
-							<th scope="col">Score / 100</th>
-							<th scope="col">Type</th>
+							<th>Recommendation</th>
+							<th>Score / 100</th>
+							<th>Type</th>
 						</tr></thead>
 
 						<tbody>

From b6ed2f4478b78857a65a944b459d678a2aa965aa Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Sun, 2 Jan 2022 06:39:20 +0530
Subject: [PATCH 3/4] documentation

---
 page-accordions.html | 56 ++++++++++++++++++++++----------------------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/page-accordions.html b/page-accordions.html
index 85f4a6fc..465bd762 100644
--- a/page-accordions.html
+++ b/page-accordions.html
@@ -51,9 +51,9 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 				<div class="sui-box-settings-col-2">
 
-					<div class="sui-accordion">
+					<div class="sui-accordion" tabindex="0" aria-label="Accordin">
 
-						<div class="sui-accordion-header">
+						<div class="sui-accordion-header" tabindex="0" aria-label="Accordin Title">
 
 							<div class="sui-accordion-col-4" tabindex="0">Recommendation</div>
 							<div class="sui-accordion-col-4" tabindex="0">Score / 100</div>
@@ -61,7 +61,7 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 						</div>
 
-						<div id="test-parent-accordion" class="sui-accordion-item sui-error">
+						<div id="test-parent-accordion" class="sui-accordion-item sui-error" tabindex="0" aria-label="Accordin Item">
 
 							<div id="test-parent-accordion-header" class="sui-accordion-item-header">
 
@@ -83,9 +83,9 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 										<p>Item content – Hello!</p>
 
-										<div class="sui-accordion">
+										<div class="sui-accordion" tabindex="0" aria-label="Accordin">
 
-											<div class="sui-accordion-header">
+											<div class="sui-accordion-header" tabindex="0" aria-label="Accordin Title">
 
 												<div class="sui-accordion-col-4" tabindex="0">Recommendation</div>
 												<div class="sui-accordion-col-4" tabindex="0">Score / 100</div>
@@ -93,7 +93,7 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 											</div>
 
-											<div id="test-child-accordion" class="sui-accordion-item sui-error">
+											<div id="test-child-accordion" class="sui-accordion-item sui-error" tabindex="0" aria-label="Accordin Item">
 
 												<div class="sui-accordion-item-header">
 
@@ -123,7 +123,7 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 											</div>
 
-											<div class="sui-accordion-item sui-warning">
+											<div class="sui-accordion-item sui-warning" tabindex="0" aria-label="Accordin Item">
 
 												<div class="sui-accordion-item-header">
 
@@ -153,7 +153,7 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 											</div>
 
-											<div class="sui-accordion-item sui-success">
+											<div class="sui-accordion-item sui-success" tabindex="0" aria-label="Accordin Item">
 
 												<div class="sui-accordion-item-header">
 
@@ -193,7 +193,7 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 						</div>
 
-						<div class="sui-accordion-item sui-warning">
+						<div class="sui-accordion-item sui-warning" tabindex="0" aria-label="Accordin Item">
 
 							<div class="sui-accordion-item-header">
 
@@ -223,7 +223,7 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 						</div>
 
-						<div class="sui-accordion-item sui-success">
+						<div class="sui-accordion-item sui-success" tabindex="0" aria-label="Accordin Item">
 
 							<div class="sui-accordion-item-header">
 
@@ -253,7 +253,7 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 						</div>
 
-						<div class="sui-accordion-item sui-default">
+						<div class="sui-accordion-item sui-default" tabindex="0" aria-label="Accordin Item">
 
 							<div class="sui-accordion-item-header">
 
@@ -298,7 +298,7 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 				<div class="sui-box-settings-col-2">
 
-					<div class="sui-accordion">
+					<div class="sui-accordion" tabindex="0" aria-label="Accordin">
 
 						<div class="sui-accordion-item">
 
@@ -439,7 +439,7 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 		<div class="sui-accordion sui-accordion-flushed">
 
-			<div class="sui-accordion-header">
+			<div class="sui-accordion-header" tabindex="0" aria-label="Accordin Title">
 
 				<div class="sui-accordion-col-4" tabindex="0">Recommendation</div>
 				<div class="sui-accordion-col-4" tabindex="0">Score / 100</div>
@@ -447,7 +447,7 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 			</div>
 
-			<div class="sui-accordion-item sui-error">
+			<div class="sui-accordion-item sui-error" tabindex="0" aria-label="Accordin Item">
 
 				<div class="sui-accordion-item-header">
 
@@ -477,7 +477,7 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 			</div>
 
-			<div class="sui-accordion-item sui-warning">
+			<div class="sui-accordion-item sui-warning" tabindex="0" aria-label="Accordin Item">
 
 				<div class="sui-accordion-item-header">
 
@@ -507,7 +507,7 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 
 			</div>
 
-			<div class="sui-accordion-item sui-success">
+			<div class="sui-accordion-item sui-success" tabindex="0" aria-label="Accordin Item">
 
 				<div class="sui-accordion-item-header">
 
@@ -569,7 +569,7 @@ <h2 class="sui-box-title">Table Accordions</h2>
 
 						<tbody>
 
-							<tr class="sui-accordion-item sui-error">
+							<tr class="sui-accordion-item sui-error" tabindex="0" aria-label="Accordin Item">
 
 								<td class="sui-table-item-title"><span aria-hidden="true" class="sui-icon-warning-alert sui-error"></span> Item</td>
 
@@ -587,7 +587,7 @@ <h2 class="sui-box-title">Table Accordions</h2>
 
 							</tr>
 
-							<tr class="sui-accordion-item sui-warning">
+							<tr class="sui-accordion-item sui-warning" tabindex="0" aria-label="Accordin Item">
 
 								<td class="sui-table-item-title"><span aria-hidden="true" class="sui-icon-warning-alert sui-warning"></span> Item</td>
 
@@ -605,7 +605,7 @@ <h2 class="sui-box-title">Table Accordions</h2>
 
 							</tr>
 
-							<tr class="sui-accordion-item sui-success">
+							<tr class="sui-accordion-item sui-success" tabindex="0" aria-label="Accordin Item">
 
 								<td class="sui-table-item-title"><span aria-hidden="true" class="sui-icon-warning-alert sui-success"></span> Item</td>
 
@@ -623,7 +623,7 @@ <h2 class="sui-box-title">Table Accordions</h2>
 
 							</tr>
 
-							<tr class="sui-accordion-item sui-default sui-table-item-last">
+							<tr class="sui-accordion-item sui-default sui-table-item-last" tabindex="0" aria-label="Accordin Item">
 
 								<td class="sui-table-item-title"><span aria-hidden="true" class="sui-icon-warning-alert"></span> Item</td>
 
@@ -662,7 +662,7 @@ <h2 class="sui-box-title">Table Accordions</h2>
 
 						<tbody>
 
-							<tr class="sui-accordion-item sui-table-item-first">
+							<tr class="sui-accordion-item sui-table-item-first" tabindex="0" aria-label="Accordin Item">
 
 								<td class="sui-table-item-title"><label for="table-accordion-sample-item-1" class="sui-toggle"><input type="checkbox" id="table-accordion-sample-item-1" checked="checked"><span aria-hidden="true" class="sui-toggle-slider"></span><span class="sui-screen-reader-text">Toggle</span></label>Item <span class="sui-accordion-open-indicator" aria-label="Expand" tabindex="0"><span class="sui-icon-chevron-down" aria-hidden="true"></span></span></td>
 
@@ -702,7 +702,7 @@ <h2 class="sui-box-title">Table Accordions</h2>
 
 							</tr>
 
-							<tr class="sui-accordion-item sui-table-item-last">
+							<tr class="sui-accordion-item sui-table-item-last" tabindex="0" aria-label="Accordin Item">
 
 								<td class="sui-table-item-title">
 									<label for="table-accordion-sample-item-3" class="sui-toggle">
@@ -758,7 +758,7 @@ <h2 class="sui-box-title">Table Accordions</h2>
 
 			<tbody>
 
-				<tr class="sui-accordion-item sui-error">
+				<tr class="sui-accordion-item sui-error" tabindex="0" aria-label="Accordin Item">
 
 					<td class="sui-table-item-title"><span aria-hidden="true" class="sui-icon-warning-alert sui-error"></span> Item</td>
 
@@ -812,7 +812,7 @@ <h2 class="sui-box-title">Table Accordions</h2>
 
 				</tr>
 
-				<tr class="sui-accordion-item sui-warning">
+				<tr class="sui-accordion-item sui-warning" tabindex="0" aria-label="Accordin Item">
 
 					<td class="sui-table-item-title"><span aria-hidden="true" class="sui-icon-warning-alert sui-warning"></span> Item</td>
 
@@ -830,7 +830,7 @@ <h2 class="sui-box-title">Table Accordions</h2>
 
 				</tr>
 
-				<tr class="sui-accordion-item sui-success sui-table-item-last">
+				<tr class="sui-accordion-item sui-success sui-table-item-last" tabindex="0" aria-label="Accordin Item">
 
 					<td class="sui-table-item-title"><span aria-hidden="true" class="sui-icon-warning-alert sui-success"></span> Item</td>
 
@@ -1118,15 +1118,15 @@ <h2 class="sui-box-title">Documentation</h2>
 
 					<div class="demo-code-block">
 <pre class="sui-code-snippet html">
-&lt;div class=&quot;sui-accordion&quot;&gt;
+&lt;div class=&quot;sui-accordion&quot; tabindex=&quot;0&quot; aria-label=&quot;Accordin&quot;&gt;
 
-	&lt;div class=&quot;sui-accordion-header&quot;&gt;
+	&lt;div class=&quot;sui-accordion-header&quot; tabindex=&quot;0&quot; aria-label=&quot;Accordin Title&quot;&gt;
 		&lt;div&gt;Recommendation&lt;/div&gt;
 		&lt;div&gt;Score / 100&lt;/div&gt;
 		&lt;div&gt;Type&lt;/div&gt;
 	&lt;/div&gt;
 
-	&lt;div class=&quot;sui-accordion-item&quot;&gt;
+	&lt;div class=&quot;sui-accordion-item&quot; tabindex=&quot;0&quot; aria-label=&quot;Accordin Item&quot;&gt;
 
 		&lt;div class=&quot;sui-accordion-item-header&quot;&gt;
 			&lt;div class=&quot;sui-accordion-item-title&quot;&gt;&lt;span aria-hidden=&quot;true&quot; class=&quot;sui-icon-warning-alert sui-error&quot;&gt;&lt;/span&gt; Item&lt;/div&gt;

From d54143995e9b17917cbdc0eacd981ff50e83882b Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Sun, 2 Jan 2022 06:55:35 +0530
Subject: [PATCH 4/4] documentation

---
 page-accordions.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/page-accordions.html b/page-accordions.html
index 465bd762..4028ba60 100644
--- a/page-accordions.html
+++ b/page-accordions.html
@@ -40,7 +40,7 @@
 			<h2 class="sui-box-title">Flexbox Accordions</h2>
 		</div>
 
-		<div class="sui-box-body" tabindex="0">
+		<div class="sui-box-body">
 
 			<div class="sui-box-settings-row">
 
@@ -548,7 +548,7 @@ <h2 class="sui-box-title">Flexbox Accordions</h2>
 			<h2 class="sui-box-title">Table Accordions</h2>
 		</div>
 
-		<div class="sui-box-body" tabindex="0">
+		<div class="sui-box-body">
 
 			<div class="sui-box-settings-row">
 
@@ -772,7 +772,7 @@ <h2 class="sui-box-title">Table Accordions</h2>
 
 					<td colspan="3"><div class="sui-box">
 
-						<div class="sui-box-body" tabindex="0">
+						<div class="sui-box-body">
 
 							<table class="sui-table">
 
@@ -825,7 +825,7 @@ <h2 class="sui-box-title">Table Accordions</h2>
 				<tr class="sui-accordion-item-content">
 
 					<td colspan="3"><div class="sui-box">
-						<div class="sui-box-body" tabindex="0">Item content – Hello!</div>
+						<div class="sui-box-body">Item content – Hello!</div>
 					</div></td>
 
 				</tr>
@@ -843,7 +843,7 @@ <h2 class="sui-box-title">Table Accordions</h2>
 				<tr class="sui-accordion-item-content sui-table-item-last">
 
 					<td colspan="3"><div class="sui-box">
-						<div class="sui-box-body" tabindex="0">Item content – Hello!</div>
+						<div class="sui-box-body">Item content – Hello!</div>
 					</div></td>
 
 				</tr>
@@ -1097,7 +1097,7 @@ <h2 class="sui-box-title">Table Accordions</h2>
 			<h2 class="sui-box-title">Documentation</h2>
 		</div>
 
-		<div class="sui-box-body" tabindex="0">
+		<div class="sui-box-body">
 
 			<div class="sui-notice sui-notice-warning">
 				<p>If you are using individual js components, <code>accordion.js</code> is required.</p>