From 25ed517f3c9b072c18ec0fe30f31c19205fa2326 Mon Sep 17 00:00:00 2001
From: Fahim Murshed <murshed4@gmail.com>
Date: Wed, 22 Jul 2026 05:13:56 +0600
Subject: [PATCH] Improved Accessibility and UI behavior

1. Accessibility for the provider/model details control
   - Replaced the non-semantic clickable container with an interactive element that supports keyboard access.
   - Added ARIA state attributes for expanded/collapsed popover behavior.
   - Improved keyboard handling for Enter, Space, and Escape keys.
   - Added a visible focus outline for keyboard users.

2. UI behavior
   - The provider details popover remains easier to open and dismiss with keyboard navigation.
   - The control now presents clearer interactive affordances for screen-reader and keyboard users.

Focused on improving WordPress admin accessibility and interaction quality in the request logs UI
---
 .../ai-request-logs/components/LogsTable.tsx   | 18 +++++++++++++++---
 src/admin/ai-request-logs/index.scss           | 13 +++++++++++++
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/admin/ai-request-logs/components/LogsTable.tsx b/src/admin/ai-request-logs/components/LogsTable.tsx
index e8bb96ffc..a78424639 100644
--- a/src/admin/ai-request-logs/components/LogsTable.tsx
+++ b/src/admin/ai-request-logs/components/LogsTable.tsx
@@ -11,7 +11,7 @@ import {
 } from '@wordpress/dataviews';
 import { dateI18n, getSettings } from '@wordpress/date';
 import { __, sprintf } from '@wordpress/i18n';
-import { useCallback, useMemo, useState } from '@wordpress/element';
+import { useCallback, useMemo, useRef, useState } from '@wordpress/element';
 import { rotateRight } from '@wordpress/icons';
 
 /**
@@ -293,6 +293,9 @@ const ProviderCell: React.FC< ProviderCellProps > = ( {
 	connectorsUrl,
 } ) => {
 	const [ isPopoverVisible, setIsPopoverVisible ] = useState( false );
+	const popoverId = useRef(
+		`ai-request-logs-provider-popover-${ Math.random().toString( 36 ).slice( 2 ) }`
+	);
 
 	if ( ! provider && ! model ) {
 		return <span className="ai-request-logs__cell-muted">-</span>;
@@ -317,14 +320,20 @@ const ProviderCell: React.FC< ProviderCellProps > = ( {
 
 	return (
 		<div
-			className="ai-request-logs__provider-cell"
+			className="ai-request-logs__provider-cell ai-request-logs__provider-trigger"
 			role="button"
 			tabIndex={ 0 }
 			onClick={ () => setIsPopoverVisible( ( prev ) => ! prev ) }
+			aria-haspopup="dialog"
+			aria-expanded={ isPopoverVisible }
+			aria-controls={ popoverId.current }
 			onKeyDown={ ( e ) => {
 				if ( 'Enter' === e.key || ' ' === e.key ) {
 					e.preventDefault();
 					setIsPopoverVisible( ( prev ) => ! prev );
+				} else if ( 'Escape' === e.key && isPopoverVisible ) {
+					e.preventDefault();
+					setIsPopoverVisible( false );
 				}
 			} }
 		>
@@ -347,7 +356,10 @@ const ProviderCell: React.FC< ProviderCellProps > = ( {
 					className="ai-request-logs__provider-popover"
 					onClose={ () => setIsPopoverVisible( false ) }
 				>
-					<div className="ai-request-logs__popover-content">
+					<div
+						id={ popoverId.current }
+						className="ai-request-logs__popover-content"
+					>
 						<div className="ai-request-logs__popover-header">
 							<span className="ai-request-logs__popover-icon">
 								{ renderProviderLogo( metadata ) }
diff --git a/src/admin/ai-request-logs/index.scss b/src/admin/ai-request-logs/index.scss
index c8a397fc3..6075e9554 100644
--- a/src/admin/ai-request-logs/index.scss
+++ b/src/admin/ai-request-logs/index.scss
@@ -140,6 +140,19 @@
 .ai-request-logs__provider-cell {
 	position: relative;
 	cursor: pointer;
+	width: 100%;
+	border: 0;
+	background: transparent;
+	padding: 0;
+	text-align: left;
+	color: inherit;
+	font: inherit;
+}
+
+.ai-request-logs__provider-trigger:focus-visible {
+	outline: 2px solid #2271b1;
+	outline-offset: 2px;
+	border-radius: 4px;
 }
 
 .ai-request-logs__provider-row {