需要一个固定的页脚在页面的底部，但位置:固定混淆了标签的可访问性排序

Question

我有一个分页表单，它在页面底部有一个固定的导航页脚，我们希望保持固定，即使页面有滚动。这个页脚也必须出现在移动设备/平板电脑等的页面底部。

我可以通过在页脚元素上使用position: fixed来实现这一点。

我现在试图文本键盘/标签导航可访问性在这个表单，我发现，因为这个，点击每个下一个按钮，然后按下tab，而不是焦点转移到页面上的下一个可聚焦的元素，它是去到浏览器(通过浏览器上的标签，书签等)。

通过移除position: fixed，页脚飞离底部，但标签导航工作像一个魅力。

我把沙盒放在一起，展示我正在做的事情的要点。

https://codesandbox.io/s/exciting-lumiere-05y7o7?file=/src/styles.css

是否有任何方法，我可以强制标签导航，然后移动到页面上的下一个可聚焦的元素后，单击下一页或做一些事情，以保持页脚在底部，而不必使用position: fixed或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>

Answer 1

我已经检查过了，但问题不是来自react只是一个css问题。通过使用display: grid到main标签，我们可以创建一个3行表:第一个元素是header，行高auto，这种方式只需要所需的空间，第二个元素是内容，有1fr，所以它需要所有剩余的空间，并且再次使用auto，所以只需要所需的高度。为了确保页脚总是在底部，我设置了main有min-height: 100vh，所以它占用了屏幕的整个高度。这是最后的css:

main {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
}
header {
background-color: lightblue;
height: 30px;
}
.wrapper {
background-color: goldenrod;
}
footer {
display: flex;
justify-content: right;
background-color: firebrick;
height: 30px;
}

不确定我在codesandbox上所做的更改是否保存:https://codesandbox.io/s/quirky-cdn-vtxkec?file=/src/styles.css

如果你的应用有不同的路由，你能做的最好的是创建一个新的组件，并使用它作为布局，这样内容总是在main。