Surface a11y fix (#1500)

iTwin · Aug 18, 2023 · fe78a33 · fe78a33
1 parent b6a8091
commit fe78a33
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 17 deletions.
diff --git a/examples/Surface.headerfooter.tsx b/examples/Surface.headerfooter.tsx
@@ -14,7 +14,7 @@ export default () => {
           <Text variant='subheading' as='h2'>
             Custom surface
           </Text>
-          <IconButton styleType='borderless'>
+          <IconButton label='Settings' styleType='borderless'>
             <SvgSettings />
           </IconButton>
         </Flex>

diff --git a/examples/Surface.nopadding.tsx b/examples/Surface.nopadding.tsx
@@ -16,44 +16,49 @@ export default () => {
   return (
     <Surface elevation={3} style={cardStyle}>
       <Surface.Header>
-        <Text variant='subheading' as='h2'>
+        <Text id='surface-header' variant='subheading' as='h2'>
           Surface with overflow & no body padding
         </Text>
       </Surface.Header>
-      <Surface.Body isPadded={false}>
+      <Surface.Body
+        tabIndex={0}
+        role='group'
+        aria-labelledby='surface-header'
+        isPadded={false}
+      >
         <Flex flexDirection='column' style={{ flex: '1' }}>
-          <ul
+          <div
             style={{
               width: '100%',
               listStyle: 'none',
               margin: 0,
               padding: 0,
             }}
           >
-            <li style={listStyle}>
+            <div style={listStyle}>
               <Anchor>Daily log</Anchor>
-            </li>
+            </div>
             <Divider />
-            <li style={listStyle}>
+            <div style={listStyle}>
               <Anchor>Inspections</Anchor>
-            </li>
+            </div>
             <Divider />
-            <li style={listStyle}>
+            <div style={listStyle}>
               <Anchor>Issues</Anchor>
-            </li>
+            </div>
             <Divider />
-            <li style={listStyle}>
+            <div style={listStyle}>
               <Anchor>Observations</Anchor>
-            </li>
+            </div>
             <Divider />
-            <li style={listStyle}>
+            <div style={listStyle}>
               <Anchor>RFIs</Anchor>
-            </li>
+            </div>
             <Divider />
-            <li style={listStyle}>
+            <div style={listStyle}>
               <Anchor>Weather delay notices</Anchor>
-            </li>
-          </ul>
+            </div>
+          </div>
         </Flex>
       </Surface.Body>
     </Surface>