When creating a React App with create-react-app, it generates the public/index.html file as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <meta>, <link>, <title> here -->
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <!-- Can this be made more accessible? -->
</body>
</html>
The line <div id="root"></div> passes the validation of eslint jsx-a11y/strict plugin, but a VSCode Web Accessibility plugin suggests replacing <div> with a Semantic HTML, or assigning a WAI-ARIA role attribute to it (Btw, Lighthouse also has a flags the original setup for not including a landmark region, heading or skiplink).
In short, I wonder if I should modify <div id="root"></div> line in this file for the sake of accessibility. If yes, which Semantic HTML tag or role should I use?
You shouldn't change it. Remember that automated testing tools are dumb. They can see that you have a div and guess that it should be something with semantic meaning, but they can't be sure.
Presumably, the React code will populate that div with semantic elements (such as nav and main). That will provide the semantic needs for accessibility.
Note that the VS Code extension you link to appears to be designed to test static HTML. It isn't going to be useful for a page generated with client-side JS.