j3d1/webvirtcloud
1
0
Fork 0
mirror of https://github.com/retspen/webvirtcloud synced 2026-11-11 12:46:49 +00:00
Code Issues Projects Releases Wiki Activity

feat(templates): a page that shows an error starts with the focus on it

Browse source 
After a refused submission the focus stayed on the page body: a keyboard
or screen reader user had to find the error. base.html now focuses the
first visible invalid field (the inline errors of the page forms), else
the first error message at the top of the page (the modal forms, and
pages whose host does not answer). The messages sit in a #messages
container so the script finds only them.
This commit is contained in:
catborise 2026-10-19 21:45:07 +03:00
parent d781bbfcbb
commit ca3b5c8d1c
2 changed files with 62 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

14
templates/base.html
View file

@ -53,7 +53,7 @@
</h3>
</div>
</div>
{% bootstrap_messages %}
<div id="messages">{% bootstrap_messages %}</div>
{% block content %}{% endblock %}
</div>
@ -66,6 +66,18 @@
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<!-- JavaScript Cookie -->
<script src="{% static 'js/js.cookie.js' %}"></script>
<script>
// after a refused submission, start at the error: the first visible
// invalid field, else the error message
(function () {
const field = [...document.querySelectorAll(".is-invalid")].find(e => e.offsetParent !== null);
const target = field || document.querySelector("#messages .alert-danger");
if (target) {
if (!field) target.tabIndex = -1;
target.focus();
}
})();
</script>
{% block script %}{% endblock %}
</body>
</html>