From dc9e86d9188696ecc3ff7a26402b887b307507a9 Mon Sep 17 00:00:00 2001 From: Sunil Mohan Adapa Date: Fri, 11 Aug 2023 12:27:44 -0700 Subject: [PATCH] users, networks: Use the autofocus HTML attribute sparingly Using autofocus too much hurts accessibility[1] as screen readers jump to the autofocused field. Specifically, it should used only when it increases UX significantly, when the form is the only thing on the page and there is nothing to read before the field is filled. - Networks: There is not much improvement to UX by focusing on a radio select. - Update User Form: there is a statement to be read before the first element is filled up. Username is changed rarely but it being focused on. - First boot user account: There is content to be read before filling the form and this will be skipped by the screen reader. Links: 1) https://www.boia.org/blog/accessibility-tips-be-cautious-when-using-autofocus Tests: - networks: Add new connection form works. The connection type is not autofocused. - users: Update user form works. Username is not autofocused. - users: First boot form works. Username is not autofocused. Signed-off-by: Sunil Mohan Adapa Reviewed-by: James Valleroy --- plinth/modules/networks/forms.py | 5 ----- plinth/modules/users/forms.py | 6 ++++-- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/plinth/modules/networks/forms.py b/plinth/modules/networks/forms.py index 20b9260c0..784a5b5e7 100644 --- a/plinth/modules/networks/forms.py +++ b/plinth/modules/networks/forms.py @@ -17,11 +17,6 @@ class ConnectionTypeSelectForm(forms.Form): choices=[(key, value) for key, value in network.CONNECTION_TYPE_NAMES.items()]) - def __init__(self, *args, **kwargs): - super().__init__(*args, **kwargs) - self.fields['connection_type'].widget.attrs.update( - {'autofocus': 'autofocus'}) - class ConnectionForm(forms.Form): """Base form to create/edit a connection.""" diff --git a/plinth/modules/users/forms.py b/plinth/modules/users/forms.py index 3f03ecbf4..e221e9f1a 100644 --- a/plinth/modules/users/forms.py +++ b/plinth/modules/users/forms.py @@ -209,7 +209,6 @@ class UserUpdateForm(ValidNewUsernameCheckMixin, PasswordConfirmForm, super().__init__(*args, **kwargs) self.is_last_admin_user = get_last_admin_user() == self.username self.fields['username'].widget.attrs.update({ - 'autofocus': 'autofocus', 'autocapitalize': 'none', 'autocomplete': 'username' }) @@ -356,7 +355,10 @@ class FirstBootForm(ValidNewUsernameCheckMixin, auth.forms.UserCreationForm): def __init__(self, *args, **kwargs): self.request = kwargs.pop('request') super().__init__(*args, **kwargs) - self.fields['username'].widget.attrs.update({'autofocus': 'autofocus'}) + # The wizard step has text to be read before entering the username. + # Don't confuse screen readers by jumping directly to the username + # field. + self.fields['username'].widget.attrs.pop('autofocus', None) def save(self, commit=True): """Create and log the user in."""