fix: Use responsive pattern for both examples of sortable tables

web/amplify/advanced-components/sortable-tables.html

@@ -90,33 +90,35 @@
 						<h1>Sortable tables</h1>
 					</div>
 					<div class="component">
-						<table data-component="sortable-table">
-							<caption>A sortable table, use column header buttons to sort</caption>
-							<colgroup>
-								<col>
-								<col>
-								<col>
-							</colgroup>
-							<thead>
-								<tr>
-									<th data-type="string" scope="col">Column header 1</th>
-									<th data-type="string" scope="col">Column header 2</th>
-									<th data-type="no-sort" scope="col">Sorting disabled</th>
-								</tr>
-							</thead>
-							<tbody>
-								<tr>
-									<td>AAA</td>
-									<td>BBB</td>
-									<td>CCC</td>
-								</tr>
-								<tr>
-									<td>BBB</td>
-									<td>AAA</td>
-									<td>CCC</td>
-								</tr>
-							</tbody>
-						</table>
+						<div role="region" aria-labelledby="caption1" tabindex="0" data-component="table-wrap">
+							<table data-component="sortable-table">
+								<caption id="caption1">A sortable table, use column header buttons to sort</caption>
+								<colgroup>
+									<col>
+									<col>
+									<col>
+								</colgroup>
+								<thead>
+									<tr>
+										<th data-type="string" scope="col">Column header 1</th>
+										<th data-type="string" scope="col">Column header 2</th>
+										<th data-type="no-sort" scope="col">Sorting disabled</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td>AAA</td>
+										<td>BBB</td>
+										<td>CCC</td>
+									</tr>
+									<tr>
+										<td>BBB</td>
+										<td>AAA</td>
+										<td>CCC</td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
 					</div>
 					<div class="component component--text">
 						<h2>Considerations</h2>
@@ -126,9 +128,9 @@ <h2>Considerations</h2>
 						<p>Where a table cell is holding a date, it must have a <code>data-date</code> attribute holding the date converted into UNIX timestamp, e.g. <code> data-date="191030400"</code>.</p>
 					</div>
 					<div class="component component--table">
-						<div role="region" aria-labelledby="unique-caption-id" tabindex="0" data-component="table-wrap">
+						<div role="region" aria-labelledby="caption2" tabindex="0" data-component="table-wrap">
 							<table data-component="sortable-table">
-								<caption id="unique-caption-id">Members of the Spice Girls, use column header buttons to sort</caption>
+								<caption id="caption2">Members of the Spice Girls, use column header buttons to sort</caption>
 								<colgroup>
 									<col>
 									<col>