feat: new optional parameter appMountAttrs #87

AdrienLemaire · 2020-09-17T08:26:55Z

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 · 2020-09-17T09:20:38Z

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.

feat: appMountAttrs

ec49503

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: new optional parameter appMountAttrs #87

feat: new optional parameter appMountAttrs #87

AdrienLemaire commented Sep 17, 2020

AdrienLemaire commented Sep 17, 2020 •

edited

Loading

feat: new optional parameter appMountAttrs #87

Are you sure you want to change the base?

feat: new optional parameter appMountAttrs #87

Conversation

AdrienLemaire commented Sep 17, 2020

AdrienLemaire commented Sep 17, 2020 • edited Loading

AdrienLemaire commented Sep 17, 2020 •

edited

Loading