Conversation
DialogContent always sets aria-describedby and aria-labelledby to reka-generated IDs, but frappe-ui only renders the referenced DialogTitle and DialogDescription conditionally. When the title or description is absent, the aria attributes point to non-existent elements, causing reka warnings and axe violations. Fix: render DialogTitle unconditionally outside the v-if="showHeader" wrapper, using sr-only when the header is hidden, so aria-labelledby always targets a real element. Move DialogDescription outside the default slot's fallback so it renders when message is set regardless of whether the caller provides slot content. Closes frappe#1086
…AA contrast (Fixes frappe#1087)
Confidence Score: 4/5Fix the dialog header regression before merging because ordinary titled dialogs now separate their title from the icon and close control. Moving DialogTitle outside the existing flex header creates a separate title row and leaves an empty or partial controls row for reachable dialog configurations. Files Needing Attention: src/components/Dialog/Dialog.vue Reviews (1): Last reviewed commit: "fix: bump dark mode ink-gray-5 and ink-g..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| <DialogTitle | ||
| :as="showHeader ? 'header' : 'span'" | ||
| :class="showHeader ? 'flex-1' : 'sr-only'" | ||
| > | ||
| <slot name="title" :close="close"> | ||
| <h3 | ||
| v-if="props.title" | ||
| class="text-2xl-semibold leading-6 text-ink-gray-8" | ||
| > | ||
| {{ props.title }} | ||
| </h3> | ||
| </slot> | ||
| </DialogTitle> | ||
| <div | ||
| v-if="showHeader" |
There was a problem hiding this comment.
When a non-bare dialog has a title, DialogTitle renders above the separate icon/close-button flex row, causing misaligned controls and an empty, excessively spaced row in title-only configurations.
Knowledge Base Used: Overlay Components
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
1 participant
Description
Dark mode
text-ink-gray-5andtext-ink-gray-6fail WCAG AA contrast (4.5:1) onsurface-elevation-1(gray/900).Measured contrast (current)
ink-gray-5(gray/400, oklch 0.58) onsurface-elevation-1: 3.84:1 — fails AAink-gray-6(gray/300, oklch 0.683) onsurface-elevation-1: also failsFix
Shift both
ink-gray-5andink-gray-6one level lighter in the dark mode ink scale:ink-gray-5ink-gray-6No change to light mode values. chromatic ink families were already shifted in #1022; this applies the same fix to the gray scale.
Fixes #1087
Coverage: 72.36% (-0.01% vs
main)