{"record":{"id":"ba4216bb86cf15a9","repo":"marmelab/react-admin","slug":"no-element-with-id-main-content-was-found-ensur","errorCode":null,"errorMessage":"No element with id \"main-content\" was found. Ensure the element that contains your main content has an id of \"main-content\".","messagePattern":"No element with id \"main-content\" was found\\. Ensure the element that contains your main content has an id of \"main-content\"\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"info","filePath":"packages/ra-ui-materialui/src/button/SkipNavigationButton.tsx","lineNumber":67,"sourceCode":"        opacity: 0.8,\n        backgroundColor: (theme.vars || theme).palette.background.default,\n    },\n    '&:focus': {\n        top: theme.spacing(2),\n        transition: theme.transitions.create(['top', 'opacity'], {\n            easing: theme.transitions.easing.easeOut,\n            duration: theme.transitions.duration.enteringScreen,\n        }),\n    },\n}));\n\nconst skipToContent = () => {\n    if (typeof document === 'undefined') return;\n    const element = document.getElementById('main-content');\n\n    if (!element) {\n        if (process.env.NODE_ENV !== 'production') {\n            console.warn(\n                'No element with id \"main-content\" was found. Ensure the element that contains your main content has an id of \"main-content\".'\n            );\n        }\n\n        return;\n    }\n\n    element.setAttribute('tabIndex', '-1');\n    element.focus();\n    element.blur();\n    element.removeAttribute('tabIndex');\n};\n\ndeclare module '@mui/material/styles' {\n    interface ComponentNameToClassKey {\n        RaSkipNavigationButton: 'root';\n    }\n","sourceCodeStart":49,"sourceCodeEnd":85,"githubUrl":"https://github.com/marmelab/react-admin/blob/051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0/packages/ra-ui-materialui/src/button/SkipNavigationButton.tsx#L49-L85","documentation":"SkipNavigationButton's skipToContent handler looks up the element with id \"main-content\" to move focus past the navigation. In non-production builds, if no such element exists it warns that the app layout is missing the required anchor, and the skip action does nothing.","triggerScenarios":"Clicking/activating the SkipNavigationButton (or calling skipToContent) in a custom Layout that lacks <div id=\"main-content\"> around the children, or in tests rendering Layout fragments without the id.","commonSituations":"Building a custom Layout component without copying the main-content wrapper; upgrading Layout code and dropping the id; unit tests that render the button in isolation.","solutions":["Give the element wrapping the layout children id=\"main-content\" in your custom Layout.","Use react-admin's default Layout, which already includes the main-content wrapper.","In tests, mock skipToContent or render a stub element with id=\"main-content\"."],"exampleFix":"// before (custom Layout)\n<div className={classes.root}>\n  <Menu />\n  {children}\n</div>\n// after\n<div className={classes.root}>\n  <Menu />\n  <div id=\"main-content\">{children}</div>\n</div>","handlingStrategy":"validation","validationCode":"if (typeof document !== 'undefined' && !document.getElementById('main-content')) {\n  console.warn('Custom Layout is missing <div id=\"main-content\">');\n}","typeGuard":"const hasMainContent = () => typeof document !== 'undefined' && document.getElementById('main-content') !== null;","tryCatchPattern":null,"preventionTips":["Always include id=\"main-content\" on the children wrapper in custom Layouts.","Start custom layouts from react-admin's default Layout source.","Add an accessibility smoke test asserting the anchor exists."],"tags":["accessibility","layout","dom"],"backgroundTag":"missing-dom-anchor","analyzedSha":"051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0","analyzedAt":"2026-08-30T02:28:14.926Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}