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 <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>

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."""

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."""