From c718773e678bcdeeed3fc17c7db2f53c1903148d Mon Sep 17 00:00:00 2001
From: Jessica Filben <54560994+jcfilben@users.noreply.github.com>
Date: Tue, 19 Nov 2024 10:43:33 -0700
Subject: [PATCH 1/2] fix a11y issues in Filter Cards example

---
 .../FilteringCards/FilteringCards.js          | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/aries-site/src/examples/templates/filtering/FilteringCards/FilteringCards.js b/aries-site/src/examples/templates/filtering/FilteringCards/FilteringCards.js
index 9cda84ed2..d74ddafc5 100644
--- a/aries-site/src/examples/templates/filtering/FilteringCards/FilteringCards.js
+++ b/aries-site/src/examples/templates/filtering/FilteringCards/FilteringCards.js
@@ -6,7 +6,6 @@ import {
   DataFilters,
   DataSearch,
   DataSummary,
-  Grid,
   Heading,
   Page,
   PageContent,
@@ -35,19 +34,19 @@ export const FilteringCards = () => (
       <Heading level={2} margin="none">
         Users
       </Heading>
-      <Grid
+      {/* <Grid
         // Use Grid with height prop for sticky header and scrollable results
         height={{ min: 'medium' }}
-      >
-        <Data data={users} properties={properties}>
-          <Toolbar>
-            <DataSearch responsive />
-            <DataFilters layer />
-          </Toolbar>
-          <DataSummary />
-          <Users />
-        </Data>
-      </Grid>
+      > */}
+      <Data data={users} properties={properties}>
+        <Toolbar>
+          <DataSearch responsive />
+          <DataFilters layer />
+        </Toolbar>
+        <DataSummary />
+        <Users />
+      </Data>
+      {/* </Grid> */}
     </PageContent>
   </Page>
 );
@@ -56,13 +55,15 @@ const Users = () => {
   const breakpoint = useContext(ResponsiveContext);
 
   return (
-    <Box flex overflow="auto">
+    <Box flex overflow="auto" pad={{ bottom: 'medium' }}>
       <Cards
         columns={!['xsmall', 'small'].includes(breakpoint) ? 'small' : ['auto']}
         gap={!['xsmall', 'small'].includes(breakpoint) ? 'medium' : 'small'}
       >
         {datum => (
           <Card
+            as="li"
+            aria-label={`User card for ${datum.name}`}
             key={datum.id}
             // margin ensures focus on cards is not cutoff
             margin="xxsmall"

From ec615864c369a727be0683bf77df418cbbdf1388 Mon Sep 17 00:00:00 2001
From: Jessica Filben <54560994+jcfilben@users.noreply.github.com>
Date: Tue, 19 Nov 2024 11:12:43 -0700
Subject: [PATCH 2/2] add grid back in

---
 .../FilteringCards/FilteringCards.js          | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/aries-site/src/examples/templates/filtering/FilteringCards/FilteringCards.js b/aries-site/src/examples/templates/filtering/FilteringCards/FilteringCards.js
index d74ddafc5..b89dd7674 100644
--- a/aries-site/src/examples/templates/filtering/FilteringCards/FilteringCards.js
+++ b/aries-site/src/examples/templates/filtering/FilteringCards/FilteringCards.js
@@ -6,6 +6,7 @@ import {
   DataFilters,
   DataSearch,
   DataSummary,
+  Grid,
   Heading,
   Page,
   PageContent,
@@ -34,19 +35,19 @@ export const FilteringCards = () => (
       <Heading level={2} margin="none">
         Users
       </Heading>
-      {/* <Grid
+      <Grid
         // Use Grid with height prop for sticky header and scrollable results
         height={{ min: 'medium' }}
-      > */}
-      <Data data={users} properties={properties}>
-        <Toolbar>
-          <DataSearch responsive />
-          <DataFilters layer />
-        </Toolbar>
-        <DataSummary />
-        <Users />
-      </Data>
-      {/* </Grid> */}
+      >
+        <Data data={users} properties={properties}>
+          <Toolbar>
+            <DataSearch responsive />
+            <DataFilters layer />
+          </Toolbar>
+          <DataSummary />
+          <Users />
+        </Data>
+      </Grid>
     </PageContent>
   </Page>
 );
@@ -55,7 +56,7 @@ const Users = () => {
   const breakpoint = useContext(ResponsiveContext);
 
   return (
-    <Box flex overflow="auto" pad={{ bottom: 'medium' }}>
+    <Box flex overflow="auto">
       <Cards
         columns={!['xsmall', 'small'].includes(breakpoint) ? 'small' : ['auto']}
         gap={!['xsmall', 'small'].includes(breakpoint) ? 'medium' : 'small'}