Skip to content

feat: new optional parameter appMountAttrs #87

Open
AdrienLemaire wants to merge 1 commit into
jaketrent:masterfrom
AdrienLemaire:master
Open

feat: new optional parameter appMountAttrs #87
AdrienLemaire wants to merge 1 commit into
jaketrent:masterfrom
AdrienLemaire:master

Conversation

@AdrienLemaire
Copy link
Copy Markdown

@AdrienLemaire AdrienLemaire commented Sep 17, 2020

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
Copy link
Copy Markdown
Author

AdrienLemaire commented Sep 17, 2020 •
edited
Loading

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@AdrienLemaire