{"record":{"id":"0176cd18215bd748","repo":"tailwindlabs/headlessui","slug":"invalid-role-role-passed-to-dialog-only","errorCode":null,"errorMessage":"Invalid role [${role}] passed to <Dialog />. Only `dialog` and and `alertdialog` are supported. Using `dialog` instead.","messagePattern":"Invalid role \\[(.+?)\\] passed to <Dialog />\\. Only `dialog` and and `alertdialog` are supported\\. Using `dialog` instead\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/@headlessui-vue/src/components/dialog/dialog.ts","lineNumber":94,"sourceCode":"    id: { type: String, default: () => `headlessui-dialog-${useId()}` },\n    role: { type: String as PropType<'dialog' | 'alertdialog'>, default: 'dialog' },\n  },\n  emits: { close: (_close: boolean) => true },\n  setup(props, { emit, attrs, slots, expose }) {\n    let ready = ref(false)\n    onMounted(() => {\n      ready.value = true\n    })\n\n    let didWarnOnRole = false\n    let role = computed(() => {\n      if (props.role === 'dialog' || props.role === 'alertdialog') {\n        return props.role\n      }\n\n      if (!didWarnOnRole) {\n        didWarnOnRole = true\n        console.warn(\n          `Invalid role [${role}] passed to <Dialog />. Only \\`dialog\\` and and \\`alertdialog\\` are supported. Using \\`dialog\\` instead.`\n        )\n      }\n\n      return 'dialog'\n    })\n\n    let nestedDialogCount = ref(0)\n\n    let usesOpenClosedState = useOpenClosed()\n    let open = computed(() => {\n      if (props.open === Missing && usesOpenClosedState !== null) {\n        return (usesOpenClosedState.value & State.Open) === State.Open\n      }\n      return props.open\n    })\n\n    let internalDialogRef = ref<HTMLDivElement | null>(null)","sourceCodeStart":76,"sourceCodeEnd":112,"githubUrl":"https://github.com/tailwindlabs/headlessui/blob/eea57cf46fd6767ed1059012f7073b88eb159fba/packages/@headlessui-vue/src/components/dialog/dialog.ts#L76-L112","documentation":"This console.warn comes from the Headless UI Vue <Dialog /> component when the `role` prop is set to anything other than 'dialog' or 'alertdialog'. The component falls back to role=\"dialog\" but warns once (a module-level didWarnOnRole flag ensures it only fires a single time). It exists to catch invalid WAI-ARIA dialog roles, since only those two roles are meaningful for a modal dialog.","triggerScenarios":"Passing a non-standard or misspelled role to <Dialog role=\"...\">, e.g. role=\"tooltip\", role=\"dialogue\", role=\"Dialog\" (case-sensitive), or binding a variable that resolves to undefined/empty string at render time.","commonSituations":"Dynamically computing the role from a prop or config object that can be undefined; copy-pasting code that used a different role string; upgrading from a version that silently accepted any role; passing a role intended for a different component (e.g. using <Dialog> where <Disclosure> or a custom overlay was meant).","solutions":["Set role to a valid value: <Dialog role=\"alertdialog\"> for destructive/confirmation modals, or omit the prop entirely (defaults to 'dialog').","If the role is dynamic, ensure the expression is typed as `'dialog' | 'alertdialog'` and has a default: `role=\"alertdialog\"` fallback.","Check for typos and casing — the comparison is case-sensitive against the exact strings 'dialog' and 'alertdialog'."],"exampleFix":"// before\n<Dialog role=\"modal\" @close=\"close\">\n<!-- warns: Invalid role [modal] -->\n\n// after\n<Dialog role=\"dialog\" @close=\"close\">\n\n<!-- or for confirmation dialogs -->\n<Dialog role=\"alertdialog\" @close=\"close\">","handlingStrategy":"type-guard","validationCode":"const VALID_ROLES = ['dialog', 'alertdialog'] as const\nconst role = computed(() =>\n  VALID_ROLES.includes(props.modalRole) ? props.modalRole : 'alertdialog'\n)","typeGuard":"type DialogRole = 'dialog' | 'alertdialog'\nfunction isValidDialogRole(role: unknown): role is DialogRole {\n  return role === 'dialog' || role === 'alertdialog'\n}","tryCatchPattern":null,"preventionTips":["Type modal-role props as `'dialog' | 'alertdialog'` so invalid values fail at compile time.","Omit the role prop unless you specifically need alertdialog semantics.","Centralize role constants in one shared module instead of inlining strings."],"tags":["headlessui","vue","dialog","aria-role","accessibility","props-validation"],"backgroundTag":"invalid-aria-role","analyzedSha":"eea57cf46fd6767ed1059012f7073b88eb159fba","analyzedAt":"2026-08-28T19:22:46.163Z","schemaVersion":2},"datasetVersion":"2026-08-28T21:17:43.275Z"}