Update form label css to be readable by screen reader

- login screen

CHANGELOG.txt

@@ -23,6 +23,7 @@ Changelog
  * Fix: Prevent error on refreshing page previews when multiple preview tabs are open (Alex Tomkins)
  * Fix: Admin fields and Icon visibility issues in Windows high contrast mode (Dmitrii Faiazov)
  * Fix: `blocks.MultipleChoiceBlock`, `forms.CheckboxSelectMultiple` and `ArrayField` checkboxes will now stack instead of display inline to align with all other checkboxes fields (Seb Brown)
+ * Fix: Screen readers can now access login screen field labels (Amy Chan)
 
 
 2.14.1 (12.08.2021)

CONTRIBUTORS.rst

@@ -528,6 +528,7 @@ Contributors
 * Himesh Samarasekera
 * Jannis Vajen
 * Dmitrii Faiazov
+* Amy Chan
 
 Translators
 ===========

docs/releases/2.15.rst

@@ -38,6 +38,7 @@ Bug fixes
  * Prevent error on refreshing page previews when multiple preview tabs are open (Alex Tomkins)
  * Admin fields and Icon visibility issues in Windows high contrast mode (Dmitrii Faiazov)
  * ``blocks.MultipleChoiceBlock``, ``forms.CheckboxSelectMultiple`` and ``ArrayField`` checkboxes will now stack instead of display inline to align with all other checkboxes fields (Seb Brown)
+ * Screen readers can now access login screen field labels (Amy Chan)
 
 Upgrade considerations
 ======================

wagtail/admin/static_src/wagtailadmin/scss/layouts/login.scss

@@ -82,7 +82,7 @@ input[type=checkbox]:before {
         padding: 0;
 
         label {
-            display: none;
+            @include visuallyhidden;
         }
 
         input {