Update accordion styling

code/addons/a11y/src/components/Report/Info.tsx

@@ -1,22 +1,18 @@
 import type { FC } from 'react';
 import React from 'react';
 
+import { Link } from 'storybook/internal/components';
 import { styled } from 'storybook/internal/theming';
 
 import type { Result } from 'axe-core';
 
 const Wrapper = styled.div({
-  padding: 12,
+  padding: '0 15px',
   marginBottom: 10,
 });
+
 const Description = styled.p({
-  margin: '0 0 12px',
+  margin: '0 0 10px',
-});
-const Link = styled.a({
-  marginTop: 12,
-  textDecoration: 'underline',
-  color: 'inherit',
-  display: 'block',
 });
 
 interface InfoProps {
@@ -26,9 +22,11 @@ interface InfoProps {
 export const Info: FC<InfoProps> = ({ item }) => {
   return (
     <Wrapper>
-      <Description>{item.description}</Description>
+      <Description>
-      <Link href={item.helpUrl} target="_blank">
+        {item.description.endsWith('.') ? item.description : `${item.description}.`}
-        More info...
+      </Description>
+      <Link href={item.helpUrl} target="_blank" withArrow>
+        Learn how to resolve this violation
       </Link>
     </Wrapper>
   );

code/addons/a11y/src/components/Report/Item.tsx

@@ -1,5 +1,6 @@
 import React, { Fragment, useState } from 'react';
 
+import { IconButton } from 'storybook/internal/components';
 import { styled } from 'storybook/internal/theming';
 
 import { ChevronSmallDownIcon } from '@storybook/icons';
@@ -13,33 +14,29 @@ import { Tags } from './Tags';
 
 const Wrapper = styled.div(({ theme }) => ({
   display: 'flex',
+  flexDirection: 'column',
   width: '100%',
   borderBottom: `1px solid ${theme.appBorderColor}`,
-  '&:hover': {
-    background: theme.background.hoverable,
-  },
 }));
 
 const Icon = styled(ChevronSmallDownIcon)({
-  marginRight: 10,
   transition: 'transform 0.1s ease-in-out',
-  verticalAlign: 'inherit',
 });
 
 const HeaderBar = styled.div(({ theme }) => ({
-  padding: theme.layoutMargin,
+  display: 'flex',
-  paddingLeft: theme.layoutMargin - 3,
+  justifyContent: 'space-between',
-  lineHeight: '20px',
+  alignItems: 'center',
+  padding: 5,
+  paddingLeft: 15,
+  minHeight: 40,
   background: 'none',
   color: 'inherit',
   textAlign: 'left',
   cursor: 'pointer',
-  borderLeft: '3px solid transparent',
   width: '100%',
-
+  '&:hover': {
-  '&:focus': {
+    color: theme.color.secondary,
-    outline: '0 none',
-    borderLeft: `3px solid ${theme.color.secondary}`,
   },
 }));
 
@@ -55,17 +52,13 @@ export const Item = (props: ItemProps) => {
   const { item, type } = props;
 
   return (
-    <Fragment>
+    <Wrapper>
-      <Wrapper>
+      <HeaderBar onClick={() => onToggle(!open)} role="button">
-        <HeaderBar onClick={() => onToggle(!open)} role="button">
+        <strong>{item.help}</strong>
-          <Icon
+        <IconButton onClick={() => onToggle(!open)}>
-            style={{
+          <Icon style={{ transform: `rotate(${open ? -180 : 0}deg)` }} />
-              transform: `rotate(${open ? 0 : -90}deg)`,
+        </IconButton>
-            }}
+      </HeaderBar>
-          />
-          {item.help}
-        </HeaderBar>
-      </Wrapper>
       {open ? (
         <Fragment>
           <Info item={item} key="info" />
@@ -73,6 +66,6 @@ export const Item = (props: ItemProps) => {
           <Tags tags={item.tags} key="tags" />
         </Fragment>
       ) : null}
-    </Fragment>
+    </Wrapper>
   );
 };