fix: make repository and organization cards keyboard accessible

components/OrganizationItem.tsx

@@ -11,6 +11,7 @@ type OrganizationItemProps = {
 export const OrganizationItem = ({ organization }: OrganizationItemProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const [isClosing, setIsClosing] = useState(false);
+  const detailsPanelId = `org-details-${organization.id}`;
 
   const isContentVisible = isOpen || isClosing;
 
@@ -32,7 +33,9 @@ export const OrganizationItem = ({ organization }: OrganizationItemProps) => {
       <div id={`org-${organization.id}`}>
         <div onClick={handleToggle}>
           <OrganizationItemTopBar
+            detailsPanelId={detailsPanelId}
             isOpen={isOpen}
+            onToggleDetails={handleToggle}
             organizationName={organization.name}
             organizationUrl={organization.url}
           />
@@ -46,7 +49,7 @@ export const OrganizationItem = ({ organization }: OrganizationItemProps) => {
             />
           </div>
         </div>
-        <div className={`repo-item__issues-warper ${isOpen ? "open" : ""}`}>
+        <div id={detailsPanelId} className={`repo-item__issues-warper ${isOpen ? "open" : ""}`}>
           {isContentVisible && (
             <div className="repo-item__issue-list">
               <p>{organization.project_ask}</p>

components/OrganizationItemTopBar.tsx

@@ -2,13 +2,17 @@ import { Organization } from "../types";
 import { RepositoryIssueNumberIndicator } from "./RepositoryIssueNumberIndicator";
 
 type OrganizationItemTopBarProps = {
+  detailsPanelId: string;
   isOpen: boolean;
+  onToggleDetails: () => void;
   organizationName: Organization["name"];
   organizationUrl: Organization["url"];
 };
 
 export const OrganizationItemTopBar = ({
+  detailsPanelId,
   isOpen,
+  onToggleDetails,
   organizationName,
   organizationUrl
 }: OrganizationItemTopBarProps) => {
@@ -26,7 +30,12 @@ export const OrganizationItemTopBar = ({
         </h3>
       </a>
 
-      <RepositoryIssueNumberIndicator isIssueOpen={isOpen} />
+      <RepositoryIssueNumberIndicator
+        controlsId={detailsPanelId}
+        isIssueOpen={isOpen}
+        label={`details for ${organizationName}`}
+        onToggle={onToggleDetails}
+      />
     </div>
   );
 };

components/RepositoryIssueNumberIndicator.tsx

@@ -1,12 +1,31 @@
-import { FaChevronDown } from "react-icons/fa";
-import { FaChevronUp } from "react-icons/fa";
+import { FaChevronDown, FaChevronUp } from "react-icons/fa";
 
 type RepositoryIssueNumberIndicatorProps = {
+  controlsId: string;
   isIssueOpen: boolean;
+  label: string;
+  onToggle: () => void;
 };
 
 export const RepositoryIssueNumberIndicator = ({
-  isIssueOpen
+  controlsId,
+  isIssueOpen,
+  label,
+  onToggle
 }: RepositoryIssueNumberIndicatorProps) => {
-  return <span>{isIssueOpen ? <FaChevronUp /> : <FaChevronDown />}</span>;
+  return (
+    <button
+      type="button"
+      className="repo-item__toggle"
+      aria-controls={controlsId}
+      aria-expanded={isIssueOpen}
+      aria-label={`${isIssueOpen ? "Hide" : "Show"} ${label}`}
+      onClick={(event) => {
+        event.stopPropagation();
+        onToggle();
+      }}
+    >
+      {isIssueOpen ? <FaChevronUp aria-hidden="true" /> : <FaChevronDown aria-hidden="true" />}
+    </button>
+  );
 };

components/RepositoryItem.tsx

@@ -15,6 +15,7 @@ type RepositoryItemProps = {
 export const RepositoryItem = ({ repository }: RepositoryItemProps) => {
   const [isIssueOpen, setIsIssueOpen] = useState(false);
   const [isIssuesListVisible, setIsIssuesListVisible] = useState(false);
+  const issuesPanelId = `repo-issues-${repository.id}`;
 
   dayjs.extend(relativeTime);
   const useLastModified = (date: string) => {
@@ -41,6 +42,8 @@ export const RepositoryItem = ({ repository }: RepositoryItemProps) => {
         <div onClick={() => setIsIssueOpen(!isIssueOpen)}>
           <RepositoryItemTopBar
             isIssueOpen={isIssueOpen}
+            issuesPanelId={issuesPanelId}
+            onToggleIssues={() => setIsIssueOpen(!isIssueOpen)}
             repositoryHasNewIssues={repository.has_new_issues}
             repositoryName={repository.name}
             repositoryNumIssues={repository.issues.length}
@@ -60,7 +63,7 @@ export const RepositoryItem = ({ repository }: RepositoryItemProps) => {
             />
           </div>
         </div>
-        <div className={`repo-item__issues-warper ${isIssueOpen ? "open" : ""}`}>
+        <div id={issuesPanelId} className={`repo-item__issues-warper ${isIssueOpen ? "open" : ""}`}>
           {isIssuesListVisible && <IssuesList issues={repository.issues} />}
         </div>
       </div>

components/RepositoryItemTopBar.tsx

@@ -3,6 +3,8 @@ import { RepositoryIssueNumberIndicator } from "./RepositoryIssueNumberIndicator
 
 type RepositoryItemTopBarProps = {
   isIssueOpen: boolean;
+  issuesPanelId: string;
+  onToggleIssues: () => void;
   repositoryHasNewIssues: boolean;
   repositoryName: Repository["name"];
   repositoryNumIssues: number;
@@ -13,6 +15,8 @@ type RepositoryItemTopBarProps = {
 
 export const RepositoryItemTopBar = ({
   isIssueOpen,
+  issuesPanelId,
+  onToggleIssues,
   repositoryName,
   repositoryOwner,
   repositoryUrl
@@ -24,6 +28,7 @@ export const RepositoryItemTopBar = ({
         rel="noopener noreferrer"
         target="_blank"
         title={`Open ${repositoryOwner}/${repositoryName} on GitHub`}
+        onClick={(event) => event.stopPropagation()}
       >
         <h3>
           <div className="repo-item__owner">{repositoryOwner}</div>
@@ -32,7 +37,12 @@ export const RepositoryItemTopBar = ({
         </h3>
       </a>
 
-      <RepositoryIssueNumberIndicator isIssueOpen={isIssueOpen} />
+      <RepositoryIssueNumberIndicator
+        controlsId={issuesPanelId}
+        isIssueOpen={isIssueOpen}
+        label={`issues for ${repositoryOwner}/${repositoryName}`}
+        onToggle={onToggleIssues}
+      />
     </div>
   );
 };

styles/globals.scss

@@ -190,6 +190,26 @@ base, html {
   }
 }
 
+.repo-item__toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 4px;
+  margin: -4px;
+  color: inherit;
+  font-size: inherit;
+  background: transparent;
+  border: 0;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 2px solid #096BDE;
+    outline-offset: 2px;
+  }
+}
+
 .repo-item__desc {
   color: var(--light-text-secondary, #57606A);
   font-size: 14px;