jaketrent / html-webpack-template

a better default template for html-webpack-plugin
MIT License
830 stars 139 forks source link

feat: new optional parameter appMountAttrs #87

Open AdrienLemaire opened 3 years ago

AdrienLemaire commented 3 years ago

Allowing the user to set custom html attributes to the app mount div.

I added this to solve the axe accessibility issue All page content must be contained by landmarks, specifying that all top html elements must be landmark elements

<html lang="en">
    <head>
        <title>Hello</title>
    </head>
    <body>
        <header>This is the header</header>
        <nav>This is the nav</nav>
        <main>This is the main</main>
        <footer>This is the footer</footer>
    </body>
</html>

In our case with react and html-webpack-template, the structure becomes:

<html lang="en">
    <head>
        <title>Hello</title>
    </head>
    <body>
        <!-- add the aria-hidden="true" attribute for screen readers to ignore that element -->
        <div id="root" aria-hidden="true">
            <header>This is the header</header>
            <nav>This is the nav</nav>
            <main>This is the main</main>
            <footer>This is the footer</footer>
        </div>
    </body>
</html>
AdrienLemaire commented 3 years ago

Well, setting aria-hidden="true" doesn't seem to fix my initial problem, since I'm getting a new one now: https://dequeuniversity.com/rules/axe/3.5/aria-hidden-focus?application=axeAPI

Asked a question on SO to figure out the proper way to handle these a11y issues.