diff --git a/.Jules/palette.md b/.Jules/palette.md index 862e9a61..d3a2fda7 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -46,3 +46,6 @@ ## 2026-07-10 - Accessibility Anti-pattern: Excessive Tab Stops **Learning:** Adding `tabIndex={0}` to static, non-interactive text badges (like `abbr` or `span`) just to expose their `title` or `aria-label` attributes to keyboard users is an accessibility anti-pattern. It creates excessive tab stops and severely degrades keyboard navigation for users who rely on tab to move through actionable elements. **Action:** Never add `tabIndex={0}` to non-interactive elements unless they are specifically designed to be focusable for a functional reason. Use proper semantic HTML or let the screen reader read adjacent elements as part of natural navigation. +## 2026-07-11 - Add context to generic dialog buttons +**Learning:** Generic action buttons in dialogs should provide full context via aria-label to prevent ambiguous screen reader experiences. +**Action:** Always add aria-label to generic buttons like Delete or Cancel inside dialogs. diff --git a/frontend/src/components/modals/EditEdgeModal.tsx b/frontend/src/components/modals/EditEdgeModal.tsx index 2f24b358..a6adf86d 100644 --- a/frontend/src/components/modals/EditEdgeModal.tsx +++ b/frontend/src/components/modals/EditEdgeModal.tsx @@ -1,6 +1,6 @@ -import React from 'react'; +import React from "react"; import type { Edge } from "@xyflow/react"; -import { useDialogAccessibility } from './useDialogAccessibility'; +import { useDialogAccessibility } from "./useDialogAccessibility"; interface EditEdgeModalProps { editingEdge: Edge | null; @@ -78,12 +78,19 @@ export function EditEdgeModal({