chore(ui): fix Expandable aria attributes (#37885)

Author: agg23

packages/web/src/components/expandable.tsx

@@ -25,19 +25,29 @@ export const Expandable: React.FunctionComponent<React.PropsWithChildren<{
   expandOnTitleClick?: boolean,
 }>> = ({ title, children, setExpanded, expanded, expandOnTitleClick }) => {
   const id = React.useId();
+
+  const onClick = React.useCallback(() => setExpanded(!expanded), [expanded, setExpanded]);
+
+  const chevron = <div
+    className={clsx('codicon', expanded ? 'codicon-chevron-down' : 'codicon-chevron-right')}
+    style={{ cursor: 'pointer', color: 'var(--vscode-foreground)', marginLeft: '5px' }}
+    onClick={!expandOnTitleClick ? onClick : undefined} />;
+
   return <div className={clsx('expandable', expanded && 'expanded')}>
-    <div
-      role='button'
-      aria-expanded={expanded}
-      aria-controls={id}
-      className='expandable-title'
-      onClick={() => expandOnTitleClick && setExpanded(!expanded)}>
+    {expandOnTitleClick ?
       <div
-        className={clsx('codicon', expanded ? 'codicon-chevron-down' : 'codicon-chevron-right')}
-        style={{ cursor: 'pointer', color: 'var(--vscode-foreground)', marginLeft: '5px' }}
-        onClick={() => !expandOnTitleClick && setExpanded(!expanded)} />
-      {title}
-    </div>
-    { expanded && <div id={id} role='region' style={{ marginLeft: 25 }}>{children}</div> }
+        role='button'
+        aria-expanded={expanded}
+        aria-controls={id}
+        className='expandable-title'
+        onClick={onClick}>
+        {chevron}
+        {title}
+      </div> :
+      <div className='expandable-title'>
+        {chevron}
+        {title}
+      </div>}
+    {expanded && <div id={id} role='region' style={{ marginLeft: 25 }}>{children}</div>}
   </div>;
 };