refactor: improve accessibility for login page (#6839)

#### What type of PR is this?

/area core
/kind improvement
/milestone 2.20.x

#### What this PR does / why we need it:

提升登录页面的可访问性。

#### Does this PR introduce a user-facing change?

```release-note
None
```

application/src/main/resources/templates/gateway_fragments/common.html

@@ -8,7 +8,7 @@
         const i18nResources = {
             sendVerificationCodeSuccess: `[(#{js.sendVerificationCode.success})]`,
             sendVerificationCodeFailed: `[(#{js.sendVerificationCode.failed})]`,
-            passwordConfirmationFailed: `[(#{js.passwordConfirmation.failed})]`
+            passwordConfirmationFailed: `[(#{js.passwordConfirmation.failed})]`,
         };
     </script>
 
@@ -57,7 +57,7 @@
         }
     </style>
     <div class="language-switcher">
-        <label>
+        <label for="language-select">
             <svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
                 <path
                     fill="currentColor"
@@ -99,7 +99,7 @@
         }
     </style>
     <div class="halo-logo">
-        <img src="/images/wordmark.svg" />
+        <img src="/images/wordmark.svg" alt="Halo" />
     </div>
 </div>
 
@@ -113,7 +113,7 @@
         <ul class="pill-items">
             <li th:each="provider : ${socialAuthProviders}">
                 <a th:href="${provider.spec.authenticationUrl}">
-                    <img th:src="${provider.spec.logo}" />
+                    <img th:src="${provider.spec.logo}" th:alt="|${provider.spec.displayName}'s icon|" />
                     <span th:text="${provider.spec.displayName}"></span>
                 </a>
             </li>
@@ -131,7 +131,7 @@
         <ul class="pill-items">
             <li th:each="method : ${otherMethods}">
                 <a th:href="${method.href}">
-                    <img th:src="${method.icon}" />
+                    <img th:src="${method.icon}" th:alt="|${method.name}'s icon|" />
                     <span
                         th:text="${#messages.msgOrNull('passwordResetMethods.' + method.name + '.displayName') ?: method.name}"
                     ></span>

application/src/main/resources/templates/gateway_fragments/login.html

@@ -49,7 +49,7 @@
         <ul class="pill-items">
             <li th:each="provider : ${formAuthProviders}">
                 <a th:href="'/login?method=' + ${provider.metadata.name}">
-                    <img th:src="${provider.spec.logo}" />
+                    <img th:src="${provider.spec.logo}" th:alt="|${provider.spec.displayName}'s icon|" />
                     <span
                         th:text="${#messages.msgOrNull('formAuthProviders.' + provider.metadata.name + '.displayName') ?: provider.spec.displayName}"
                     ></span>
@@ -57,4 +57,4 @@
             </li>
         </ul>
     </th:block>
-</div>
+</div>

application/src/main/resources/templates/login_local.html

@@ -41,7 +41,7 @@
     </div>
     <div class="form-item">
         <div class="form-label-group">
-            <label for="password" th:text="#{form.password.label}"> </label>
+            <label for="plainPassword" th:text="#{form.password.label}"> </label>
             <a
                 class="form-item-extra-link"
                 tabindex="-1"
@@ -55,4 +55,4 @@
             th:replace="~{gateway_fragments/input :: password(id = 'plainPassword', name = null, required = 'true', minlength = null, maxlength = 257, enableToggle = true)}"
         ></th:block>
     </div>
-</div>
+</div>