ActionList: a11y fixes (#1958)

* role=none without a parent role is invalid

* Add example with Heading

* Add focus styles for high contrast mode

* Create actionlist-a11y-fixes.md

Author: siddharthkp

.changeset/actionlist-a11y-fixes.md

@@ -0,0 +1,6 @@
+---
+"@primer/react": patch
+---
+
+ActionList: Add focus styles for Windows high contrast mode
+ActionList: Fix incorrect role for ActionList.Group outside ActionMenu

src/ActionList/Group.tsx

@@ -50,7 +50,7 @@ export const Group: React.FC<ActionListGroupProps> = ({
   return (
     <Box
       as="li"
-      role="none"
+      role={listRole ? 'none' : undefined}
       sx={{
         '&:not(:first-child)': {marginTop: 2},
         listStyle: 'none', // hide the ::marker inserted by browser's stylesheet

src/ActionList/Item.tsx

@@ -159,6 +159,14 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
         }
       },
 
+      '@media (forced-colors: active)': {
+        ':focus': {
+          // we set color to be transparent and let the high contrast rules
+          // decide what color with contrast should that be corrected to
+          outline: 'solid 1px transparent !important'
+        }
+      },
+
       /** Divider styles */
       '[data-component="ActionList.Item--DividerContainer"]': {
         position: 'relative'

src/stories/ActionList/examples.stories.tsx

@@ -15,7 +15,7 @@ import {
   XIcon
 } from '@primer/octicons-react'
 
-import {ThemeProvider} from '../..'
+import {Heading, ThemeProvider} from '../..'
 import {ActionList} from '../../ActionList'
 import BaseStyles from '../../BaseStyles'
 import Avatar from '../../Avatar'
@@ -49,9 +49,16 @@ export function WithLinks(): JSX.Element {
     <>
       <h1>With Links</h1>
 
-      <p>This pattern can be seen in the repository sidebar, containing a list of links</p>
+      <p>This pattern can be seen in the repository sidebar, containing a list of links. </p>
+      <p>
+        The heading &quot;Details&quot; is outside the ActionList and needs to have an <code>id</code> which is passed
+        to ActionList with <code>aria-labelledby</code>.
+      </p>
 
-      <ActionList>
+      <Heading as="h1" id="list-heading" sx={{fontSize: 1}}>
+        Details
+      </Heading>
+      <ActionList aria-labelledby="list-heading">
         <ActionList.LinkItem href="https://github.com/primer/react#readme">
           <ActionList.LeadingVisual>
             <BookIcon />