I have a paginated form with a fixed navigation footer at the bottom that needs to stay in place even when scrolling. This footer should also be at the bottom of the page for mobile devices and tablets.
To achieve this, I used position: fixed on the footer element.
However, I encountered an issue with keyboard and tab navigation accessibility. After clicking the "Next" button and pressing the tab key, instead of shifting focus to the next element on the page, it navigates to tabs in the browser like bookmarks.
When I removed the position: fixed, the footer no longer stays at the bottom but the tab navigation works correctly.
I created a sandbox demonstrating the functionality:
https://codesandbox.io/s/exciting-lumiere-05y7o7?file=/src/styles.css
Is there a way to ensure tab navigation moves to the next focusable element after clicking "Next page" or maintain the footer at the bottom without using position: fixed or position: absolute?
const Page1Component = () => {
return (
<div>
<h1>Page 1</h1>
<input type="text" placeholder="Textbox 1" />
</div>
);
};
const Page2Component = () => {
return (
<div>
<h1>Page 2</h1>
<input type="text" placeholder="Textbox 2" />
</div>
);
};
const Page3Component = () => {
return (
<div>
<h1>Page 3</h1>
<textarea></textarea>
</div>
);
};
const PaginatedForm = () => {
const [page, setPage] = React.useState(1);
const renderPage = () => {
if (page === 1) return <Page1Component />;
if (page === 2) return <Page2Component />;
if (page === 3) return <Page3Component />;
};
return (
<main>
<header>My Header</header>
<div className="wrapper">{renderPage()}</div>
<footer>
<button onClick={() => setPage(page + 1)}>Next page</button>
</footer>
</main>
);
};
// Render it
ReactDOM.render(
<PaginatedForm />,
document.getElementById("root")
);html,
body {
padding: 0;
margin: 0;
}
header {
background-color: lightblue;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
background-color: goldenrod;
height: calc(100vh - 30px);
overflow-y: auto;
}
footer {
display: flex;
justify-content: right;
background-color: firebrick;
height: 30px;
position: fixed; /* Removing these last three styles fixes the tabbing issue*/
width: 100%;
bottom: 0;
}<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>