Issue - 65 | Keyboard Navigation | Accessibility of Application | Tab focus #66
Conversation
…Focus was not going to boxes and made run locally modal dark mode compatible
✅ Deploy Preview for gorgeous-maamoul-daf273 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull Request Overview
This PR improves keyboard navigation accessibility by converting clickable div elements to proper button elements across multiple list components and adds dark mode compatibility to the Docker Run modal.
- Converts div elements to button elements for proper keyboard navigation and screen reader support
- Adds
w-full text-leftclasses to maintain visual layout when using button elements - Implements comprehensive dark mode styling for the Docker Run modal including backgrounds, text colors, and borders
Reviewed Changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| JobList.tsx | Converts job item div to button for keyboard accessibility |
| CronJobList.tsx | Converts cronjob item div to button for keyboard accessibility |
| VisualPreview.tsx | Converts flow node div to button for keyboard accessibility |
| ServiceAccountsList.tsx | Converts service account item div to button for keyboard accessibility |
| SecretsList.tsx | Converts secret item div to button for keyboard accessibility |
| RolesList.tsx | Converts role item div to button for keyboard accessibility |
| NamespacesList.tsx | Converts namespace item div to button for keyboard accessibility |
| DockerRunPopup.tsx | Adds comprehensive dark mode styling for modal components |
| DeploymentsList.tsx | Converts deployment item div to button for keyboard accessibility |
| DaemonSetsList.tsx | Converts daemon set item div to button for keyboard accessibility |
| ConfigMapsList.tsx | Converts config map item div to button for keyboard accessibility |
| App.tsx | Converts role binding item div to button and adds dark mode styling |
| @@ -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 ${ | |||
There was a problem hiding this comment.
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.
| 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.
| {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 ${ |
There was a problem hiding this comment.
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.
Issue - 65 | Keyboard Navigation | Accessibility of Application | Tab Focus was not going to boxes, and made run locally modal dark mode compatible
screen-capture.3.webm