Semantically associate the controls for screen reader users

app/src/ui/check-runs/ci-check-run-list-item.tsx

@@ -143,6 +143,7 @@ export class CICheckRunListItem extends React.PureComponent<
     return (
       <div className="ci-check-list-item-detail">
         <TooltippedContent
+          id={`check-run-header-${checkRun.id}`}
           className="ci-check-name"
           tooltip={name}
           onlyWhenOverflowed={true}
@@ -233,7 +234,8 @@ export class CICheckRunListItem extends React.PureComponent<
       <Button
         className="ci-check-status-button"
         onClick={this.toggleCheckRunExpansion}
-        ariaExpanded={this.props.isCheckRunExpanded}
+        ariaExpanded={!selectable ? this.props.isCheckRunExpanded : undefined}
+        ariaControls={`checkRun-${checkRun.id}`}
         disabled={disabled}
       >
         {this.renderCheckStatusSymbol()}
@@ -277,10 +279,16 @@ export class CICheckRunListItem extends React.PureComponent<
           </span>
         </div>
         {isCheckRunExpanded && checkRun.actionJobSteps !== undefined ? (
-          <CICheckRunActionsJobStepList
-            steps={checkRun.actionJobSteps}
-            onViewJobStep={this.onViewJobStep}
-          />
+          <div
+            role="region"
+            id={`checkrun-${checkRun.id}`}
+            aria-labelledby={`check-run-header-${checkRun.id}`}
+          >
+            <CICheckRunActionsJobStepList
+              steps={checkRun.actionJobSteps}
+              onViewJobStep={this.onViewJobStep}
+            />
+          </div>
         ) : null}
       </div>
     )

app/src/ui/lib/tooltipped-content.tsx

@@ -14,6 +14,9 @@ interface ITooltippedContentProps
   /** The wrapper element tag name, defaults to span */
   readonly tagName?: keyof HTMLElementTagNameMap
 
+  /** The html id of the element */
+  readonly id?: string
+
   /**
    * An optional additional class name to set on the tooltip in order to be able
    * to apply specific styles to the tooltip
@@ -47,6 +50,7 @@ export class TooltippedContent extends React.Component<ITooltippedContentProps>
       this.props
 
     return React.createElement(tagName ?? 'span', {
+      id: this.props.id,
       ref: this.wrapperRef,
       className: className,
       children: (

app/src/ui/notifications/pull-request-checks-failed.tsx

@@ -208,7 +208,14 @@ export class PullRequestChecksFailed extends React.Component<
     }
 
     return (
-      <div className="ci-check-run-job-steps-container">{stepsContent}</div>
+      <div
+        className="ci-check-run-job-steps-container"
+        role="region"
+        id={`checkrun-${selectedCheck.id}`}
+        aria-labelledby={`check-run-header-${selectedCheck.id}`}
+      >
+        {stepsContent}
+      </div>
     )
   }