From df9fab0c2c4ca7d5da73b73d2c252e26573fb676 Mon Sep 17 00:00:00 2001
From: Nicola Saunders <nicola@studio24.net>
Date: Tue, 30 Jan 2024 17:18:00 +0000
Subject: [PATCH] fix: Use responsive pattern for both examples of sortable
 tables

---
 .../advanced-components/sortable-tables.html  | 60 ++++++++++---------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/web/amplify/advanced-components/sortable-tables.html b/web/amplify/advanced-components/sortable-tables.html
index 394b4bc..a4a706f 100644
--- a/web/amplify/advanced-components/sortable-tables.html
+++ b/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>