Skip to content

Issue - 65 | Keyboard Navigation | Accessibility of Application | Tab focus #66

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 16, 2025
Merged

Issue - 65 | Keyboard Navigation | Accessibility of Application | Tab focus #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1238,7 +1238,7 @@ function App() {
</div>
{/* Mobile: Social + Actions grouped and centered, Desktop: inline */}
<div className="flex flex-col items-center w-full sm:hidden">
<div className="w-full max-w-sm bg-gray-50 rounded-xl py-2 px-2 shadow-sm mt-2">
<div className="w-full max-w-sm bg-gray-50 rounded-xl py-2 px-2 shadow-sm mt-2 dark:bg-gray-800">
<div className="flex items-center justify-center space-x-2 mb-2">
<SocialShare />
</div>
Expand Down Expand Up @@ -1952,10 +1952,10 @@ function App() {
{roleBindings.map((rb, i) => {
const isSelected = selectedRoleBindingIndex === i;
return (
<div
<button
key={i}
onClick={() => setSelectedRoleBindingIndex(i)}
className={`p-2 border rounded-lg cursor-pointer transition-all duration-200 hover:shadow-md hover:bg-blue-50 focus-within:ring-2 focus-within:ring-blue-200 outline-none group
className={`p-2 border rounded-lg w-full text-left cursor-pointer transition-all duration-200 hover:shadow-md hover:bg-blue-50 focus-within:ring-2 focus-within:ring-blue-200 outline-none group
${isSelected
? rb.isClusterRoleBinding
? 'border-blue-500 bg-blue-50 shadow-md dark:border-blue-600 dark:bg-blue-600 dark:shadow-blue-600'
Expand Down Expand Up @@ -2064,7 +2064,7 @@ function App() {
<div>This action cannot be undone.</div>
</div>
)}
</div>
</button>
);
})}
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/components/ConfigMapsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,9 @@ export function ConfigMapsList({
return (
<div className="space-y-1 p-4">
{configMaps.map((configMap, index) => (
<div
<button
key={configMap.name}
className={`p-3 rounded-lg border cursor-pointer transition-all duration-200 ${
className={`p-3 rounded-lg border cursor-pointer transition-all w-full text-left duration-200 ${
selectedIndex === index
? 'bg-green-50 border-green-200 ring-1 ring-green-200 dark:bg-green-700 dark:border-green-800 dark:ring-green-800'
: 'bg-white border-gray-200 hover:bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:hover:bg-gray-600'
Expand Down Expand Up @@ -199,7 +199,7 @@ export function ConfigMapsList({
</div>
</div>
)}
</div>
</button>
))}
</div>
);
Expand Down
6 changes: 3 additions & 3 deletions src/components/DaemonSetsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,9 +74,9 @@ export function DaemonSetsList({
{daemonSets.map((daemonSet, index) => {
const summary = getDaemonSetSummary(daemonSet);
return (
<div
<button
key={index}
className={`p-3 rounded-lg border cursor-pointer transition-all duration-200 ${
className={`p-3 rounded-lg w-full text-left border cursor-pointer transition-all duration-200 ${
selectedDaemonSet === index
? 'bg-blue-50 border-blue-200 ring-1 ring-blue-200 dark:bg-blue-900 dark:border-blue-800 dark:ring-blue-800'
: 'bg-white border-gray-200 hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700'
Expand Down Expand Up @@ -181,7 +181,7 @@ export function DaemonSetsList({
</div>
</div>
)}
</div>
</button>
);
})}
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/DeploymentsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export function DeploymentsList({
const summary = getDeploymentSummary(deployment);

return (
<div
<button
key={index}
className={`p-3 rounded-lg border cursor-pointer transition-all duration-200 text-left w-full ${
selectedIndex === index
Expand Down Expand Up @@ -170,7 +170,7 @@ export function DeploymentsList({
</div>
</div>
)}
</div>
</button>
);
})}
</div>
Expand Down
44 changes: 22 additions & 22 deletions src/components/DockerRunPopup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export function DockerRunPopup({ isOpen, onClose }: DockerRunPopupProps) {
/>

{/* Popup Container */}
<div className="relative bg-white rounded-xl shadow-2xl w-full max-w-4xl mx-auto overflow-hidden max-h-[90vh] flex flex-col">
<div className="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-4xl mx-auto overflow-hidden max-h-[90vh] flex flex-col">
{/* Header */}
<div className="flex items-center justify-between p-4 sm:p-6 border-b border-gray-200 bg-gradient-to-r from-blue-600 to-blue-700 text-white flex-shrink-0">
<div className="flex items-center space-x-3 min-w-0 flex-1">
Expand All @@ -66,17 +66,17 @@ export function DockerRunPopup({ isOpen, onClose }: DockerRunPopupProps) {
{/* Content */}
<div className="flex-1 overflow-y-auto p-4 sm:p-6 space-y-4 sm:space-y-6">
{/* Quick Start */}
<div className="bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg p-3 sm:p-4 border border-green-200">
<div className="bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg p-3 sm:p-4 border border-green-200 dark:bg-gradient-to-r dark:from-green-900 dark:to-emerald-900 dark:border-green-800">
<div className="flex items-center space-x-2 mb-3">
<Play className="w-4 h-4 sm:w-5 sm:h-5 text-green-600 flex-shrink-0" />
<h4 className="font-semibold text-green-900 text-sm sm:text-base">Quick Start</h4>
<h4 className="font-semibold text-green-900 text-sm sm:text-base dark:text-green-200">Quick Start</h4>
</div>
<p className="text-xs sm:text-sm text-green-800 mb-3 sm:mb-4">
<p className="text-xs sm:text-sm text-green-800 mb-3 sm:mb-4 dark:text-green-200">
Run this single command to pull and start Kube Composer locally in the background:
</p>

{/* Command Box */}
<div className="bg-gray-900 rounded-lg p-3 sm:p-4 relative">
<div className="bg-gray-900 rounded-lg p-3 sm:p-4 relative dark:bg-gray-800 dark:border-gray-700">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-2 space-y-2 sm:space-y-0">
<div className="flex items-center space-x-2">
<Terminal className="w-3 h-3 sm:w-4 sm:h-4 text-gray-400 flex-shrink-0" />
Expand Down Expand Up @@ -107,13 +107,13 @@ export function DockerRunPopup({ isOpen, onClose }: DockerRunPopupProps) {
</div>

{/* Step by Step Instructions */}
<div className="space-y-3 sm:space-y-4">
<h4 className="font-semibold text-gray-900 flex items-center space-x-2 text-sm sm:text-base">
<div className="space-y-3 sm:space-y-4 dark:text-gray-200">
<h4 className="font-semibold text-gray-900 flex items-center space-x-2 text-sm sm:text-base dark:text-gray-200">
<span className="w-5 h-5 sm:w-6 sm:h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-xs sm:text-sm font-bold flex-shrink-0">1</span>
<span>Prerequisites</span>
</h4>
<div className="ml-6 sm:ml-8 space-y-2">
<p className="text-xs sm:text-sm text-gray-600">
<p className="text-xs sm:text-sm text-gray-600 dark:text-gray-200">
Make sure you have Docker installed on your system:
</p>
<div className="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-4">
Expand All @@ -140,35 +140,35 @@ export function DockerRunPopup({ isOpen, onClose }: DockerRunPopupProps) {
</div>
</div>

<h4 className="font-semibold text-gray-900 flex items-center space-x-2 text-sm sm:text-base">
<h4 className="font-semibold text-gray-900 flex items-center space-x-2 text-sm sm:text-base dark:text-gray-200">
<span className="w-5 h-5 sm:w-6 sm:h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-xs sm:text-sm font-bold flex-shrink-0">2</span>
<span>Run the Command</span>
</h4>
<div className="ml-6 sm:ml-8 space-y-2">
<p className="text-xs sm:text-sm text-gray-600">
<p className="text-xs sm:text-sm text-gray-600 dark:text-gray-200">
Open your terminal and run the command above. This will:
</p>
<ul className="text-xs sm:text-sm text-gray-600 space-y-1 list-disc list-inside ml-2 sm:ml-4">
<ul className="text-xs sm:text-sm text-gray-600 space-y-1 list-disc list-inside ml-2 sm:ml-4 dark:text-gray-200">
<li>Pull the latest Kube Composer Docker image</li>
<li>Start the container in detached mode (background)</li>
<li>Make it accessible at <code className="bg-gray-100 px-1 rounded text-xs">http://localhost:8080</code></li>
<li>Make it accessible at <code className="bg-gray-100 px-1 rounded text-xs dark:bg-gray-700">http://localhost:8080</code></li>
</ul>
</div>

<h4 className="font-semibold text-gray-900 flex items-center space-x-2 text-sm sm:text-base">
<h4 className="font-semibold text-gray-900 flex items-center space-x-2 text-sm sm:text-base dark:text-gray-200">
<span className="w-5 h-5 sm:w-6 sm:h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-xs sm:text-sm font-bold flex-shrink-0">3</span>
<span>Access the Application</span>
</h4>
<div className="ml-6 sm:ml-8 space-y-2">
<p className="text-xs sm:text-sm text-gray-600">
<p className="text-xs sm:text-sm text-gray-600 dark:text-gray-200">
Once the container is running, open your browser and navigate to:
</p>
<div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
<div className="bg-blue-50 border border-blue-200 rounded-lg p-3 dark:bg-blue-700 dark:border-blue-600">
<a
href="http://localhost:8080"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center space-x-2 text-blue-700 hover:text-blue-800 font-medium text-sm sm:text-base break-all"
className="inline-flex items-center space-x-2 text-blue-700 hover:text-blue-800 font-medium text-sm sm:text-base break-all dark:text-blue-200"
>
<span>http://localhost:8080</span>
<ExternalLink className="w-3 h-3 sm:w-4 sm:h-4 flex-shrink-0" />
Expand All @@ -178,9 +178,9 @@ export function DockerRunPopup({ isOpen, onClose }: DockerRunPopupProps) {
</div>

{/* Benefits */}
<div className="bg-gradient-to-r from-purple-50 to-indigo-50 rounded-lg p-3 sm:p-4 border border-purple-200">
<h4 className="font-semibold text-purple-900 mb-3 text-sm sm:text-base">Why Run Locally?</h4>
<ul className="text-xs sm:text-sm text-purple-800 space-y-1">
<div className="bg-gradient-to-r from-purple-50 to-indigo-50 rounded-lg p-3 sm:p-4 border border-purple-200 dark:bg-gradient-to-r dark:from-purple-900 dark:to-indigo-900 dark:border-purple-800">
<h4 className="font-semibold text-purple-900 mb-3 text-sm sm:text-base dark:text-purple-200">Why Run Locally?</h4>
<ul className="text-xs sm:text-sm text-purple-800 space-y-1 dark:text-purple-200">
<li>• <strong>Privacy:</strong> Your data never leaves your machine</li>
<li>• <strong>Speed:</strong> No network latency, instant responses</li>
<li>• <strong>Offline:</strong> Works without internet connection</li>
Expand All @@ -190,12 +190,12 @@ export function DockerRunPopup({ isOpen, onClose }: DockerRunPopupProps) {
</div>

{/* Footer */}
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between p-4 sm:p-6 border-t border-gray-200 bg-gray-50 space-y-3 sm:space-y-0 flex-shrink-0">
<div className="text-xs sm:text-sm text-gray-600">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between p-4 sm:p-6 border-t border-gray-200 bg-gray-50 dark:bg-gray-800 space-y-3 sm:space-y-0 flex-shrink-0">
<div className="text-xs sm:text-sm text-gray-600 dark:text-gray-200">
<p className="flex items-center">
<Docker className="w-3 h-3 sm:w-4 sm:h-4 mr-2 text-blue-600 flex-shrink-0" />
<span className="mr-1">Image:</span>
<code className="bg-gray-200 px-1 rounded text-xs break-all">same7ammar/kube-composer</code>
<code className="bg-gray-200 px-1 rounded text-xs break-all dark:bg-gray-700 dark:text-gray-200">same7ammar/kube-composer</code>
</p>
</div>
<div className="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-3">
Expand Down
4 changes: 2 additions & 2 deletions src/components/NamespacesList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export function NamespacesList({
return (
<div className="space-y-1 p-4">
{namespaces.map((namespace, index) => (
<div
<button
key={namespace.name}
className={`p-3 rounded-lg border cursor-pointer transition-all duration-200 ${
Copy link
Preview

Copilot AI Aug 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing w-full text-left classes that are consistently applied in other similar button conversions in this PR. This ensures proper button styling and text alignment.

Suggested change
className={`p-3 rounded-lg border cursor-pointer transition-all duration-200 ${
className={`w-full text-left p-3 rounded-lg border cursor-pointer transition-all duration-200 ${

Copilot uses AI. Check for mistakes.

selectedIndex === index
Expand Down Expand Up @@ -200,7 +200,7 @@ export function NamespacesList({
</div>
</div>
)}
</div>
</button>
))}

{namespaces.length === 0 && (
Expand Down
6 changes: 3 additions & 3 deletions src/components/RolesList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,10 +64,10 @@ export function RolesList({
return (
<div className="space-y-2 p-4">
{roles.map((role, index) => (
<div
<button
key={index}
onClick={() => onSelect(index)}
className={`p-3 border rounded-lg cursor-pointer transition-all duration-200 hover:shadow-md ${
className={`p-3 border rounded-lg cursor-pointer transition-all w-full text-left duration-200 hover:shadow-md ${
selectedIndex === index
? 'border-purple-300 bg-purple-50 shadow-sm dark:border-purple-800 dark:bg-purple-700 dark:shadow-sm'
: 'border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-700 dark:hover:border-gray-500 dark:hover:bg-gray-600'
Expand Down Expand Up @@ -170,7 +170,7 @@ export function RolesList({
<div>This action cannot be undone.</div>
</div>
)}
</div>
</button>
))}
</div>
);
Expand Down
6 changes: 3 additions & 3 deletions src/components/SecretsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,9 @@ export function SecretsList({
return (
<div className="space-y-1 p-4">
{secrets.map((secret, index) => (
<div
<button
key={secret.name}
className={`p-3 rounded-lg border cursor-pointer transition-all duration-200 ${
className={`p-3 rounded-lg border cursor-pointer transition-all w-full text-left duration-200 ${
selectedIndex === index
? 'bg-orange-50 border-orange-200 ring-1 ring-orange-200 dark:bg-orange-700 dark:border-orange-800 dark:ring-orange-800'
: 'bg-white border-gray-200 hover:bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:hover:bg-gray-600'
Expand Down Expand Up @@ -224,7 +224,7 @@ export function SecretsList({
</div>
</div>
)}
</div>
</button>
))}
</div>
);
Expand Down
6 changes: 3 additions & 3 deletions src/components/ServiceAccountsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,9 +65,9 @@ export function ServiceAccountsList({
return (
<div className="space-y-3 p-4">
{serviceAccounts.map((serviceAccount, index) => (
<div
<button
key={`${serviceAccount.namespace}-${serviceAccount.name}`}
className={`p-3 rounded-lg border cursor-pointer transition-all duration-200 ${
className={`p-3 rounded-lg border cursor-pointer transition-all w-full text-left duration-200 ${
selectedIndex === index
? 'bg-cyan-50 border-cyan-200 ring-1 ring-cyan-200 dark:bg-cyan-700 dark:border-cyan-600 dark:ring-cyan-600'
: 'bg-white border-gray-200 hover:bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:hover:bg-gray-600'
Expand Down Expand Up @@ -233,7 +233,7 @@ export function ServiceAccountsList({
</div>
</div>
)}
</div>
</button>
))}
</div>
);
Expand Down
6 changes: 3 additions & 3 deletions src/components/VisualPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1759,9 +1759,9 @@ export function VisualPreview({
)}
</svg>
{flowNodes.map(node => (
<div
<button
key={node.id}
className={`absolute w-48 p-3 rounded-lg border-2 shadow-lg select-none cursor-pointer ${
className={`absolute w-48 p-3 text-left rounded-lg border-2 shadow-lg select-none cursor-pointer ${
Comment on lines 1761 to +1764
Copy link
Preview

Copilot AI Aug 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Button elements inside absolutely positioned containers may not be keyboard accessible if they receive focus but are visually hidden or overlapped. Consider adding proper focus management or ensuring these buttons remain accessible when focused.

Copilot uses AI. Check for mistakes.

node.colorClass || getStatusColor(node.status)
}`}
style={{
Expand Down Expand Up @@ -1876,7 +1876,7 @@ export function VisualPreview({
)}
</div>
)}
</div>
</button>
))}
</div>
{/* YAML Modal */}
Expand Down
6 changes: 3 additions & 3 deletions src/components/jobs/CronJobList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,9 @@ export const CronJobList: React.FC<CronJobListProps> = ({ cronjobs, onDelete, on
<div className="text-center text-gray-400 py-8 dark:text-gray-300">No CronJobs found.</div>
)}
{cronjobs.map((cronjob, index) => (
<div
<button
key={`${cronjob.name}-${cronjob.namespace}-${index}`}
className={`p-3 rounded-lg border cursor-pointer transition-all duration-200 ${
className={`p-3 rounded-lg border cursor-pointer transition-all w-full text-left duration-200 ${
selectedIndex === index
? 'bg-yellow-50 border-yellow-200 ring-1 ring-yellow-200 dark:bg-yellow-700 dark:border-yellow-800 dark:ring-yellow-800'
: 'bg-white border-gray-200 hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700'
Expand Down Expand Up @@ -129,7 +129,7 @@ export const CronJobList: React.FC<CronJobListProps> = ({ cronjobs, onDelete, on
<div>This action cannot be undone.</div>
</div>
)}
</div>
</button>
))}
</div>
);
Expand Down
6 changes: 3 additions & 3 deletions src/components/jobs/JobList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,9 @@ export const JobList: React.FC<JobListProps> = ({ jobs, onDelete, onEdit, onView
<div className="text-center text-gray-400 py-8 dark:text-gray-600">No Jobs found.</div>
)}
{jobs.map((job, index) => (
<div
<button
key={`${job.name}-${job.namespace}-${index}`}
className={`p-3 rounded-lg border cursor-pointer transition-all duration-200 ${
className={`p-3 rounded-lg border cursor-pointer transition-all w-full text-left duration-200 ${
selectedIndex === index
? 'bg-pink-50 border-pink-200 ring-1 ring-pink-200 dark:bg-pink-700 dark:border-pink-800 dark:ring-pink-800'
: 'bg-white border-gray-200 hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700'
Expand Down Expand Up @@ -129,7 +129,7 @@ export const JobList: React.FC<JobListProps> = ({ jobs, onDelete, onEdit, onView
<div>This action cannot be undone.</div>
</div>
)}
</div>
</button>
))}
</div>
);
Expand Down