`+rootAttributes`

Environment: server

type Value = Record<string, string>
type RootAttributes = Value | ((pageContext) => Value)

Global

Cumulative

vike-react/vike-vue/vike-solid setting

You need vike-react/vike-vue/vike-solid to be able to use this setting.

The rootAttributes setting adds attributes to the root element, i.e. the element in which the UI framework Vike extension vike-react/vike-vue/vike-solid renders your pages.

// pages/+config.js
 
export default {
  // <div id="root" role="none">
  rootAttributes: { role: 'none' }
}

// pages/+config.ts
 
import type { Config } from 'vike/types'
 
export default {
  // <div id="root" role="none">
  rootAttributes: { role: 'none' }
} satisfies Config

JavaScript

TypeScript

The root element is <div id="root"> with vike-react and vike-solid, and <div id="app"> with vike-vue.

Accessibility: React attaches its event listeners to the root element, which leads accessibility tools (such as the Firefox Accessibility Inspector and some screen readers) to consider the root element as clickable, see facebook/react#20895. Setting role="none" fixes that.

+rootAttributes

See also

`+rootAttributes`