From 1f5762b8c8fd0626e0d343dec41a3c862a6f44ce Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chiptus@users.noreply.github.com>
Date: Sun, 1 Mar 2026 12:14:47 +0200
Subject: [PATCH] fix(settings/auth): fix a11y labels (#1963)

---
 .../BoxSelector/BoxSelectorAngular.ts         |   2 +
 app/portainer/components/BoxSelector/index.ts |   1 +
 .../oauth-providers-selector.html             |   4 +-
 .../oauth-settings/oauth-settings.html        |   2 +-
 .../ldap-connectivity-check.html              |   2 +-
 .../ldap-custom-group-search.html             | 158 +++++++++---------
 .../ldap-custom-user-search.html              | 115 +++++++------
 .../ldap-group-search-item.html               |   8 +-
 .../ldap-group-search/ldap-group-search.html  |  52 +++---
 .../ldap-settings-test-login.html             | 118 ++++++-------
 .../ldap/ldap-settings/ldap-settings.html     |   3 +-
 .../ldap-user-search-item.html                |   4 +-
 .../ldap-user-search/ldap-user-search.html    |  66 ++++----
 .../settingsAuthentication.html               |   2 +-
 .../BoxSelector/BoxOption.module.css          |   4 -
 .../components/BoxSelector/BoxOption.tsx      |   1 +
 .../components/BoxSelector/BoxSelector.tsx    |  58 ++++---
 .../AuthenticationMethodSelector.tsx          |  16 +-
 18 files changed, 319 insertions(+), 297 deletions(-)

diff --git a/app/portainer/components/BoxSelector/BoxSelectorAngular.ts b/app/portainer/components/BoxSelector/BoxSelectorAngular.ts
index 03d310285..71279d61a 100644
--- a/app/portainer/components/BoxSelector/BoxSelectorAngular.ts
+++ b/app/portainer/components/BoxSelector/BoxSelectorAngular.ts
@@ -36,6 +36,7 @@ export const BoxSelectorAngular: IComponentOptions = {
     options="$ctrl.options"
     radio-name="$ctrl.radioName"
     slim="$ctrl.slim"
+    label="$ctrl.label"
   ></box-selector-react>`,
   bindings: {
     value: '<',
@@ -43,6 +44,7 @@ export const BoxSelectorAngular: IComponentOptions = {
     options: '<',
     radioName: '<',
     slim: '<',
+    label: '<',
   },
   require: {
     formCtrl: '^form',
diff --git a/app/portainer/components/BoxSelector/index.ts b/app/portainer/components/BoxSelector/index.ts
index f7bd1d768..764f177f9 100644
--- a/app/portainer/components/BoxSelector/index.ts
+++ b/app/portainer/components/BoxSelector/index.ts
@@ -18,6 +18,7 @@ const BoxSelectorReact = react2angular(BoxSelector, [
   'error',
   'useGridLayout',
   'className',
+  'label',
 ]);
 
 export const boxSelectorModule = angular
diff --git a/app/portainer/oauth/components/oauth-providers-selector/oauth-providers-selector.html b/app/portainer/oauth/components/oauth-providers-selector/oauth-providers-selector.html
index 158a10259..af7c82384 100644
--- a/app/portainer/oauth/components/oauth-providers-selector/oauth-providers-selector.html
+++ b/app/portainer/oauth/components/oauth-providers-selector/oauth-providers-selector.html
@@ -1,3 +1 @@
-<div class="col-sm-12 form-section-title"> Provider </div>
-
-<box-selector value="$ctrl.value" options="$ctrl.options" on-change="($ctrl.onChange)" radio-name="'oauth_provider'"></box-selector>
+<box-selector value="$ctrl.value" options="$ctrl.options" on-change="($ctrl.onChange)" radio-name="'oauth_provider'" label="'Provider'"></box-selector>
diff --git a/app/portainer/oauth/components/oauth-settings/oauth-settings.html b/app/portainer/oauth/components/oauth-settings/oauth-settings.html
index eac87a4b7..c97bea427 100644
--- a/app/portainer/oauth/components/oauth-settings/oauth-settings.html
+++ b/app/portainer/oauth/components/oauth-settings/oauth-settings.html
@@ -100,7 +100,7 @@
 
   <div ng-if="$ctrl.settings.OAuthAutoMapTeamMemberships">
     <div class="form-group">
-      <label class="col-sm-3 col-lg-2 control-label text-left">
+      <label class="col-sm-3 col-lg-2 control-label text-left" for="oauth_token_claim_name">
         Claim name
         <portainer-tooltip message="'The OpenID Connect UserInfo Claim name that contains the team identifier the user belongs to.'"></portainer-tooltip>
       </label>
diff --git a/app/portainer/settings/authentication/ldap/ldap-connectivity-check/ldap-connectivity-check.html b/app/portainer/settings/authentication/ldap/ldap-connectivity-check/ldap-connectivity-check.html
index e8535ae8f..9ac8de853 100644
--- a/app/portainer/settings/authentication/ldap/ldap-connectivity-check/ldap-connectivity-check.html
+++ b/app/portainer/settings/authentication/ldap/ldap-connectivity-check/ldap-connectivity-check.html
@@ -1,5 +1,5 @@
 <div class="form-group">
-  <label for="ldap_password" class="col-sm-3 col-lg-2 control-label vertical-center text-left">
+  <label class="col-sm-3 col-lg-2 control-label vertical-center text-left">
     Connectivity check
     <pr-icon icon="'check'" mode="'success'" ng-if="$ctrl.state.successfulConnectivityCheck"></pr-icon>
     <pr-icon icon="'x'" mode="'danger'" ng-if="$ctrl.state.failedConnectivityCheck"></pr-icon>
diff --git a/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html b/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html
index 655a39a51..367f2a1b8 100644
--- a/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html
+++ b/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html
@@ -1,84 +1,86 @@
-<div class="col-sm-12 form-section-title" style="float: initial"> Group search configurations </div>
+<section aria-label="Group search configurations">
+  <div class="col-sm-12 form-section-title" style="float: initial"> Group search configurations </div>
 
-<rd-widget ng-repeat="config in $ctrl.settings | limitTo: (1 - $ctrl.settings)" style="display: block; margin-bottom: 10px">
-  <rd-widget-body>
-    <div class="form-group" ng-if="$index > 0" style="margin-bottom: 10px">
-      <span class="col-sm-12 text-muted small"> Extra search configuration </span>
-    </div>
-
-    <div class="form-group">
-      <label for="ldap_group_basedn_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
-        Group Base DN
-        <portainer-tooltip message="'The distinguished name of the element from which the LDAP server will search for groups.'"></portainer-tooltip>
-      </label>
-      <div class="col-sm-8 col-md-4">
-        <input
-          type="text"
-          class="form-control"
-          id="ldap_group_basedn_{{ $index }}"
-          ng-model="config.GroupBaseDN"
-          placeholder="dc=ldap,dc=domain,dc=tld"
-          data-cy="ldap-group-basedn-input"
-        />
+  <rd-widget ng-repeat="config in $ctrl.settings | limitTo: (1 - $ctrl.settings)" style="display: block; margin-bottom: 10px" data-cy="ldap-custom-group-search-config">
+    <rd-widget-body>
+      <div class="form-group" ng-if="$index > 0" style="margin-bottom: 10px">
+        <span class="col-sm-12 text-muted small"> Extra search configuration </span>
       </div>
 
-      <label for="ldap_group_att_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
-        Group Membership Attribute
-        <portainer-tooltip message="'LDAP attribute which denotes the group membership.'"></portainer-tooltip>
-      </label>
-      <div class="col-sm-8 col-md-4">
-        <input type="text" class="form-control" id="ldap_group_att_{{ $index }}" ng-model="config.GroupAttribute" placeholder="member" data-cy="ldap-group-attribute-input" />
-      </div>
-    </div>
-    <div class="form-group">
-      <label for="ldap_group_filter_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
-        Group Filter
-        <portainer-tooltip message="'The LDAP search filter used to select group elements, optional.'"></portainer-tooltip>
-      </label>
-      <div class="col-sm-8 col-md-10 vertical-center">
-        <input
-          type="text"
-          class="form-control"
-          id="ldap_group_filter_{{ $index }}"
-          ng-model="config.GroupFilter"
-          placeholder="(objectClass=account)"
-          data-cy="ldap-group-filter-input"
-        />
-        <button class="btn btn-md btn-danger" type="button" ng-click="$ctrl.onRemoveClick($index)" ng-if="$index > 0">
-          <pr-icon icon="'trash-2'" size="'md'"></pr-icon>
-        </button>
-      </div>
-    </div>
-    <div class="form-group">
-      <span class="col-sm-12 small" style="color: #ffa719">
-        <pr-icon icon="'briefcase'" class-name="'icon icon-xs vertical-center'"></pr-icon>
-        Users removal synchronize between groups and teams only available in
-        <a href="https://www.portainer.io/features?from=custom-login-banner" target="_blank">business edition.</a>
-        <portainer-tooltip
-          class="text-muted align-bottom"
-          message="'Groups allows users to automatically be added to Portainer teams. However, automatically removing users from teams to keep it fully in sync is available in the Business Edition.'"
-        ></portainer-tooltip>
-      </span>
-    </div>
-  </rd-widget-body>
-</rd-widget>
+      <div class="form-group">
+        <label for="ldap_group_basedn_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
+          Group Base DN
+          <portainer-tooltip message="'The distinguished name of the element from which the LDAP server will search for groups.'"></portainer-tooltip>
+        </label>
+        <div class="col-sm-8 col-md-4">
+          <input
+            type="text"
+            class="form-control"
+            id="ldap_group_basedn_{{ $index }}"
+            ng-model="config.GroupBaseDN"
+            placeholder="dc=ldap,dc=domain,dc=tld"
+            data-cy="ldap-group-basedn-input"
+          />
+        </div>
 
-<div class="form-group" style="margin-top: 10px">
-  <div class="col-sm-12">
-    <button class="btn btn-sm btn-light vertical-center !ml-0" ng-click="$ctrl.onAddClick()">
-      <pr-icon icon="'plus'"></pr-icon>
-      Add group search configuration
-    </button>
+        <label for="ldap_group_att_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
+          Group Membership Attribute
+          <portainer-tooltip message="'LDAP attribute which denotes the group membership.'"></portainer-tooltip>
+        </label>
+        <div class="col-sm-8 col-md-4">
+          <input type="text" class="form-control" id="ldap_group_att_{{ $index }}" ng-model="config.GroupAttribute" placeholder="member" data-cy="ldap-group-attribute-input" />
+        </div>
+      </div>
+      <div class="form-group">
+        <label for="ldap_group_filter_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
+          Group Filter
+          <portainer-tooltip message="'The LDAP search filter used to select group elements, optional.'"></portainer-tooltip>
+        </label>
+        <div class="col-sm-8 col-md-10 vertical-center">
+          <input
+            type="text"
+            class="form-control"
+            id="ldap_group_filter_{{ $index }}"
+            ng-model="config.GroupFilter"
+            placeholder="(objectClass=account)"
+            data-cy="ldap-group-filter-input"
+          />
+          <button class="btn btn-md btn-danger" type="button" ng-click="$ctrl.onRemoveClick($index)" ng-if="$index > 0">
+            <pr-icon icon="'trash-2'" size="'md'"></pr-icon>
+          </button>
+        </div>
+      </div>
+      <div class="form-group">
+        <span class="col-sm-12 small" style="color: #ffa719">
+          <pr-icon icon="'briefcase'" class-name="'icon icon-xs vertical-center'"></pr-icon>
+          Users removal synchronize between groups and teams only available in
+          <a href="https://www.portainer.io/features?from=custom-login-banner" target="_blank">business edition.</a>
+          <portainer-tooltip
+            class="text-muted align-bottom"
+            message="'Groups allows users to automatically be added to Portainer teams. However, automatically removing users from teams to keep it fully in sync is available in the Business Edition.'"
+          ></portainer-tooltip>
+        </span>
+      </div>
+    </rd-widget-body>
+  </rd-widget>
+
+  <div class="form-group" style="margin-top: 10px">
+    <div class="col-sm-12">
+      <button class="btn btn-sm btn-light vertical-center !ml-0" ng-click="$ctrl.onAddClick()">
+        <pr-icon icon="'plus'"></pr-icon>
+        Add group search configuration
+      </button>
+    </div>
+    <div class="col-sm-12" style="margin-top: 10px">
+      <be-teaser-button
+        feature-id="$ctrl.limitedFeatureId"
+        heading="'Display User/Group matching'"
+        message="'Show the list of users and groups that match the Portainer search configurations.'"
+        button-text="'Display User/Group matching'"
+        button-class-name="'!ml-0'"
+      ></be-teaser-button>
+    </div>
   </div>
-  <div class="col-sm-12" style="margin-top: 10px">
-    <be-teaser-button
-      feature-id="$ctrl.limitedFeatureId"
-      heading="'Display User/Group matching'"
-      message="'Show the list of users and groups that match the Portainer search configurations.'"
-      button-text="'Display User/Group matching'"
-      button-class-name="'!ml-0'"
-    ></be-teaser-button>
-  </div>
-</div>
 
-<ldap-groups-datatable ng-if="$ctrl.showTable" dataset="$ctrl.groups"></ldap-groups-datatable>
+  <ldap-groups-datatable ng-if="$ctrl.showTable" dataset="$ctrl.groups"></ldap-groups-datatable>
+</section>
diff --git a/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html b/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html
index 7f8324797..319c34535 100644
--- a/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html
+++ b/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html
@@ -1,59 +1,68 @@
-<div class="col-sm-12 form-section-title" style="float: initial"> User search configurations </div>
+<section aria-label="User search configurations">
+  <div class="col-sm-12 form-section-title" style="float: initial"> User search configurations </div>
 
-<rd-widget ng-repeat="config in $ctrl.settings | limitTo: (1 - $ctrl.settings)" style="display: block; margin-bottom: 10px">
-  <rd-widget-body>
-    <div class="form-group" ng-if="$index > 0" style="margin-bottom: 10px">
-      <span class="col-sm-12 text-muted small"> Extra search configuration </span>
-    </div>
-
-    <div class="form-group">
-      <label for="ldap_basedn_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
-        Base DN
-        <portainer-tooltip message="'The distinguished name of the element from which the LDAP server will search for users.'"></portainer-tooltip>
-      </label>
-      <div class="col-sm-8 col-md-4">
-        <input type="text" class="form-control" id="ldap_basedn_{{ $index }}" ng-model="config.BaseDN" placeholder="dc=ldap,dc=domain,dc=tld" data-cy="ldap-basedn-input" />
+  <rd-widget ng-repeat="config in $ctrl.settings | limitTo: (1 - $ctrl.settings)" style="display: block; margin-bottom: 10px" data-cy="ldap-custom-user-search-config">
+    <rd-widget-body>
+      <div class="form-group" ng-if="$index > 0" style="margin-bottom: 10px">
+        <span class="col-sm-12 text-muted small"> Extra search configuration </span>
       </div>
 
-      <label for="ldap_username_att_{{ $index }}" class="col-sm-4 col-md-3 col-lg-2 control-label text-left">
-        Username attribute
-        <portainer-tooltip message="'LDAP attribute which denotes the username.'"></portainer-tooltip>
-      </label>
-      <div class="col-sm-8 col-md-3 col-lg-4">
-        <input type="text" class="form-control" id="ldap_username_att_{{ $index }}" ng-model="config.UserNameAttribute" placeholder="uid" data-cy="ldap-username-attribute-input" />
-      </div>
-    </div>
-    <div class="form-group">
-      <label for="ldap_filter_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
-        Filter
-        <portainer-tooltip message="'The LDAP search filter used to select user elements, optional.'"></portainer-tooltip>
-      </label>
-      <div class="col-sm-8 col-md-10 vertical-center">
-        <input type="text" class="form-control" id="ldap_filter_{{ $index }}" ng-model="config.Filter" placeholder="(objectClass=account)" data-cy="ldap-filter-input" />
-        <button class="btn btn-md btn-danger" type="button" ng-click="$ctrl.onRemoveClick($index)" ng-if="$index > 0">
-          <pr-icon icon="'trash-2'" size="'md'"></pr-icon>
-        </button>
-      </div>
-    </div>
-  </rd-widget-body>
-</rd-widget>
+      <div class="form-group">
+        <label for="ldap_basedn_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
+          Base DN
+          <portainer-tooltip message="'The distinguished name of the element from which the LDAP server will search for users.'"></portainer-tooltip>
+        </label>
+        <div class="col-sm-8 col-md-4">
+          <input type="text" class="form-control" id="ldap_basedn_{{ $index }}" ng-model="config.BaseDN" placeholder="dc=ldap,dc=domain,dc=tld" data-cy="ldap-basedn-input" />
+        </div>
 
-<div class="form-group" style="margin-top: 10px">
-  <div class="col-sm-12">
-    <button class="btn btn-sm btn-light vertical-center !ml-0" ng-click="$ctrl.onAddClick()">
-      <pr-icon icon="'plus'"></pr-icon>
-      Add user search configuration
-    </button>
+        <label for="ldap_username_att_{{ $index }}" class="col-sm-4 col-md-3 col-lg-2 control-label text-left">
+          Username attribute
+          <portainer-tooltip message="'LDAP attribute which denotes the username.'"></portainer-tooltip>
+        </label>
+        <div class="col-sm-8 col-md-3 col-lg-4">
+          <input
+            type="text"
+            class="form-control"
+            id="ldap_username_att_{{ $index }}"
+            ng-model="config.UserNameAttribute"
+            placeholder="uid"
+            data-cy="ldap-username-attribute-input"
+          />
+        </div>
+      </div>
+      <div class="form-group">
+        <label for="ldap_filter_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
+          Filter
+          <portainer-tooltip message="'The LDAP search filter used to select user elements, optional.'"></portainer-tooltip>
+        </label>
+        <div class="col-sm-8 col-md-10 vertical-center">
+          <input type="text" class="form-control" id="ldap_filter_{{ $index }}" ng-model="config.Filter" placeholder="(objectClass=account)" data-cy="ldap-filter-input" />
+          <button class="btn btn-md btn-danger" type="button" ng-click="$ctrl.onRemoveClick($index)" ng-if="$index > 0">
+            <pr-icon icon="'trash-2'" size="'md'"></pr-icon>
+          </button>
+        </div>
+      </div>
+    </rd-widget-body>
+  </rd-widget>
+
+  <div class="form-group" style="margin-top: 10px">
+    <div class="col-sm-12">
+      <button class="btn btn-sm btn-light vertical-center !ml-0" ng-click="$ctrl.onAddClick()">
+        <pr-icon icon="'plus'"></pr-icon>
+        Add user search configuration
+      </button>
+    </div>
+    <div class="col-sm-12" style="margin-top: 10px">
+      <be-teaser-button
+        feature-id="$ctrl.limitedFeatureId"
+        heading="'Display Users'"
+        message="'Allows you to display users from your LDAP server.'"
+        button-text="'Display Users'"
+        button-class-name="'!ml-0'"
+      ></be-teaser-button>
+    </div>
   </div>
-  <div class="col-sm-12" style="margin-top: 10px">
-    <be-teaser-button
-      feature-id="$ctrl.limitedFeatureId"
-      heading="'Display Users'"
-      message="'Allows you to display users from your LDAP server.'"
-      button-text="'Display Users'"
-      button-class-name="'!ml-0'"
-    ></be-teaser-button>
-  </div>
-</div>
 
-<ldap-users-datatable ng-if="$ctrl.showTable" dataset="$ctrl.users"></ldap-users-datatable>
+  <ldap-users-datatable ng-if="$ctrl.showTable" dataset="$ctrl.users"></ldap-users-datatable>
+</section>
diff --git a/app/portainer/settings/authentication/ldap/ldap-group-search-item/ldap-group-search-item.html b/app/portainer/settings/authentication/ldap/ldap-group-search-item/ldap-group-search-item.html
index 81de550b9..b2d523289 100644
--- a/app/portainer/settings/authentication/ldap/ldap-group-search-item/ldap-group-search-item.html
+++ b/app/portainer/settings/authentication/ldap/ldap-group-search-item/ldap-group-search-item.html
@@ -1,4 +1,4 @@
-<div class="w-full px-5 pt-3">
+<div class="w-full px-5 pt-3" data-cy="ldap-group-search-config">
   <div ng-if="$ctrl.index > 0" style="margin-bottom: 10px">
     <span class="text-muted small"> Extra search configuration </span>
     <button
@@ -28,10 +28,10 @@
   <div class="form-group">
     <div class="col-sm-12 vertical-center" style="margin-bottom: 5px">
       <label class="control-label !pt-0 text-left">Groups</label>
-      <span class="label label-default interactive vertical-center" style="margin-left: 10px" ng-click="$ctrl.addGroup()">
+      <button class="label label-default interactive vertical-center border-0" style="margin-left: 10px" ng-click="$ctrl.addGroup()">
         <pr-icon icon="'plus-circle'"></pr-icon>
         add another group
-      </span>
+      </button>
     </div>
     <div class="col-sm-12" ng-if="$ctrl.groups.length">
       <div class="w-full px-5 pt-3">
@@ -76,6 +76,6 @@
 
   <div class="form-group no-margin-last-child">
     <label class="col-sm-4 col-md-2 control-label text-left"> Group Filter </label>
-    <div class="col-sm-8 col-md-10"> {{ $ctrl.config.GroupFilter }} </div>
+    <div class="col-sm-8 col-md-10" data-cy="ldap-group-filter-display"> {{ $ctrl.config.GroupFilter }} </div>
   </div>
 </div>
diff --git a/app/portainer/settings/authentication/ldap/ldap-group-search/ldap-group-search.html b/app/portainer/settings/authentication/ldap/ldap-group-search/ldap-group-search.html
index 9cc1f2468..a2858576b 100644
--- a/app/portainer/settings/authentication/ldap/ldap-group-search/ldap-group-search.html
+++ b/app/portainer/settings/authentication/ldap/ldap-group-search/ldap-group-search.html
@@ -1,28 +1,30 @@
-<div class="col-sm-12 form-section-title" style="float: initial"> Group search configurations </div>
+<section aria-label="Group search configurations">
+  <div class="col-sm-12 form-section-title" style="float: initial"> Group search configurations </div>
 
-<div style="margin-top: 10px" ng-repeat="config in $ctrl.settings | limitTo: (1 - $ctrl.settings)">
-  <ldap-group-search-item
-    config="config"
-    domain-suffix="{{ $ctrl.domainSuffix }}"
-    index="$index"
-    base-filter="{{ $ctrl.baseFilter }}"
-    on-remove-click="($ctrl.onRemoveClick)"
-    limited-feature-id="$ctrl.limitedFeatureId"
-  ></ldap-group-search-item>
-</div>
-
-<div class="form-group" style="margin-top: 10px">
-  <div class="col-sm-12">
-    <button class="btn btn-sm btn-light vertical-center !ml-0" ng-click="$ctrl.onAddClick()" disabled>
-      <pr-icon icon="'plus'"></pr-icon>
-      Add group search configuration
-    </button>
+  <div style="margin-top: 10px" ng-repeat="config in $ctrl.settings | limitTo: (1 - $ctrl.settings)">
+    <ldap-group-search-item
+      config="config"
+      domain-suffix="{{ $ctrl.domainSuffix }}"
+      index="$index"
+      base-filter="{{ $ctrl.baseFilter }}"
+      on-remove-click="($ctrl.onRemoveClick)"
+      limited-feature-id="$ctrl.limitedFeatureId"
+    ></ldap-group-search-item>
   </div>
-  <div class="col-sm-12" style="margin-top: 10px">
-    <button class="btn btm-sm btn-primary" type="button" ng-click="$ctrl.search()" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1">
-      Display User/Group matching
-    </button>
-  </div>
-</div>
 
-<ldap-groups-datatable ng-if="$ctrl.showTable" dataset="$ctrl.groups"></ldap-groups-datatable>
+  <div class="form-group" style="margin-top: 10px">
+    <div class="col-sm-12">
+      <button class="btn btn-sm btn-light vertical-center !ml-0" ng-click="$ctrl.onAddClick()" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1">
+        <pr-icon icon="'plus'"></pr-icon>
+        Add group search configuration
+      </button>
+    </div>
+    <div class="col-sm-12" style="margin-top: 10px">
+      <button class="btn btm-sm btn-primary !ml-0" type="button" ng-click="$ctrl.search()" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1">
+        Display User/Group matching
+      </button>
+    </div>
+  </div>
+
+  <ldap-groups-datatable ng-if="$ctrl.showTable" dataset="$ctrl.groups"></ldap-groups-datatable>
+</section>
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-test-login/ldap-settings-test-login.html b/app/portainer/settings/authentication/ldap/ldap-settings-test-login/ldap-settings-test-login.html
index 36241c467..9fba83ac9 100644
--- a/app/portainer/settings/authentication/ldap/ldap-settings-test-login/ldap-settings-test-login.html
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-test-login/ldap-settings-test-login.html
@@ -1,64 +1,66 @@
-<div class="col-sm-12 form-section-title flex items-center" style="float: initial">
-  Test login
-  <be-feature-indicator
-    ng-if="$ctrl.showBeIndicatorIfNeeded"
-    feature="$ctrl.limitedFeatureId"
-    class="space-left"
-    ng-if="$ctrl.isLimitedFeatureSelfContained"
-  ></be-feature-indicator>
-</div>
+<section aria-label="Test login">
+  <div class="col-sm-12 form-section-title flex items-center" style="float: initial">
+    Test login
+    <be-feature-indicator
+      ng-if="$ctrl.showBeIndicatorIfNeeded"
+      feature="$ctrl.limitedFeatureId"
+      class="space-left"
+      ng-if="$ctrl.isLimitedFeatureSelfContained"
+    ></be-feature-indicator>
+  </div>
 
-<rd-widget>
-  <rd-widget-body>
-    <div class="form-inline">
-      <div class="form-group" style="margin: 0">
-        <label for="ldap_test_username" style="font-size: 0.9em; margin-right: 5px"> Username </label>
-        <input
-          type="text"
-          class="form-control"
-          id="ldap_test_username"
-          ng-model="$ctrl.username"
-          limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
-          limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
-          ng-disabled="{{ $ctrl.isLimitedFeatureSelfContained }}"
-          limited-feature-tabindex="-1"
-          data-cy="ldap-test-username"
-        />
-      </div>
-
-      <div class="form-group no-margin">
-        <label for="ldap_test_password"> Password </label>
-        <input
-          type="password"
-          class="form-control"
-          id="ldap_test_password"
-          ng-model="$ctrl.password"
-          autocomplete="new-password"
-          limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
-          limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
-          ng-disabled="{{ $ctrl.isLimitedFeatureSelfContained }}"
-          limited-feature-tabindex="-1"
-        />
-      </div>
-
-      <div class="form-group !ml-0">
-        <div class="vertical-center">
-          <button
-            type="submit"
-            class="btn btn-primary"
-            ng-disabled="$ctrl.state.testStatus === $ctrl.TEST_STATUS.LOADING || !$ctrl.username || !$ctrl.password"
-            ng-click="$ctrl.testLogin($ctrl.username, $ctrl.password)"
+  <rd-widget>
+    <rd-widget-body>
+      <div class="form-inline">
+        <div class="form-group" style="margin: 0">
+          <label for="ldap_test_username" style="font-size: 0.9em; margin-right: 5px"> Username </label>
+          <input
+            type="text"
+            class="form-control"
+            id="ldap_test_username"
+            ng-model="$ctrl.username"
             limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
             limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
+            ng-disabled="{{ $ctrl.isLimitedFeatureSelfContained }}"
             limited-feature-tabindex="-1"
-          >
-            <span ng-if="$ctrl.state.testStatus !== $ctrl.TEST_STATUS.LOADING">Test</span>
-            <span ng-if="$ctrl.state.testStatus === $ctrl.TEST_STATUS.LOADING">Testing...</span>
-          </button>
-          <pr-icon icon="'check'" class="icon-success" ng-if="$ctrl.state.testStatus === $ctrl.TEST_STATUS.SUCCESS"></pr-icon>
-          <pr-icon icon="'x'" class="icon-danger" ng-if="$ctrl.state.testStatus === $ctrl.TEST_STATUS.FAILURE"></pr-icon>
+            data-cy="ldap-test-username"
+          />
+        </div>
+
+        <div class="form-group no-margin">
+          <label for="ldap_test_password"> Password </label>
+          <input
+            type="password"
+            class="form-control"
+            id="ldap_test_password"
+            ng-model="$ctrl.password"
+            autocomplete="new-password"
+            limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+            limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
+            ng-disabled="{{ $ctrl.isLimitedFeatureSelfContained }}"
+            limited-feature-tabindex="-1"
+          />
+        </div>
+
+        <div class="form-group !ml-0">
+          <div class="vertical-center">
+            <button
+              type="submit"
+              class="btn btn-primary"
+              ng-disabled="$ctrl.state.testStatus === $ctrl.TEST_STATUS.LOADING || !$ctrl.username || !$ctrl.password"
+              ng-click="$ctrl.testLogin($ctrl.username, $ctrl.password)"
+              limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+              limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
+              limited-feature-tabindex="-1"
+            >
+              <span ng-if="$ctrl.state.testStatus !== $ctrl.TEST_STATUS.LOADING">Test</span>
+              <span ng-if="$ctrl.state.testStatus === $ctrl.TEST_STATUS.LOADING">Testing...</span>
+            </button>
+            <pr-icon icon="'check'" class="icon-success" ng-if="$ctrl.state.testStatus === $ctrl.TEST_STATUS.SUCCESS"></pr-icon>
+            <pr-icon icon="'x'" class="icon-danger" ng-if="$ctrl.state.testStatus === $ctrl.TEST_STATUS.FAILURE"></pr-icon>
+          </div>
         </div>
       </div>
-    </div>
-  </rd-widget-body>
-</rd-widget>
+    </rd-widget-body>
+  </rd-widget>
+</section>
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings/ldap-settings.html b/app/portainer/settings/authentication/ldap/ldap-settings/ldap-settings.html
index d8b5cf27f..da5b6906f 100644
--- a/app/portainer/settings/authentication/ldap/ldap-settings/ldap-settings.html
+++ b/app/portainer/settings/authentication/ldap/ldap-settings/ldap-settings.html
@@ -5,8 +5,6 @@
     description="'With automatic user provisioning enabled, Portainer will create user(s) automatically with standard user role and assign them to team(s) which matches to LDAP group name(s). If disabled, users must be created in Portainer beforehand.'"
   ></auto-user-provision-toggle>
 
-  <div class="col-sm-12 form-section-title"> Server Type </div>
-
   <box-selector
     style="margin-bottom: 0"
     radio-name="'ldap-server-type-selector'"
@@ -14,6 +12,7 @@
     options="$ctrl.boxSelectorOptions"
     on-change="($ctrl.onChangeServerType)"
     slim="true"
+    label="'Server Type'"
   ></box-selector>
 
   <ldap-settings-custom
diff --git a/app/portainer/settings/authentication/ldap/ldap-user-search-item/ldap-user-search-item.html b/app/portainer/settings/authentication/ldap/ldap-user-search-item/ldap-user-search-item.html
index 4d1d51751..4b560d03a 100644
--- a/app/portainer/settings/authentication/ldap/ldap-user-search-item/ldap-user-search-item.html
+++ b/app/portainer/settings/authentication/ldap/ldap-user-search-item/ldap-user-search-item.html
@@ -1,4 +1,4 @@
-<div class="w-full px-5 pt-3">
+<div class="w-full px-5 pt-3" data-cy="ldap-user-search-config">
   <div ng-if="$ctrl.index > 0" style="margin-bottom: 10px">
     <span class="text-muted small"> Extra search configuration </span>
     <button
@@ -92,7 +92,7 @@
 
   <div class="form-group">
     <label class="col-sm-4 control-label text-left"> User Filter </label>
-    <div class="col-sm-8">
+    <div class="col-sm-8" data-cy="ldap-user-filter-display">
       {{ $ctrl.config.Filter }}
     </div>
   </div>
diff --git a/app/portainer/settings/authentication/ldap/ldap-user-search/ldap-user-search.html b/app/portainer/settings/authentication/ldap/ldap-user-search/ldap-user-search.html
index 027111d56..fd42564bf 100644
--- a/app/portainer/settings/authentication/ldap/ldap-user-search/ldap-user-search.html
+++ b/app/portainer/settings/authentication/ldap/ldap-user-search/ldap-user-search.html
@@ -1,35 +1,37 @@
-<div class="col-sm-12 form-section-title" style="float: initial"> User search configurations </div>
+<section aria-label="User search configurations">
+  <div class="col-sm-12 form-section-title" style="float: initial"> User search configurations </div>
 
-<div style="margin-top: 10px" ng-repeat="config in $ctrl.settings | limitTo: (1 - $ctrl.settings)">
-  <ldap-user-search-item
-    index="$index"
-    config="config"
-    domain-suffix="{{ $ctrl.domainSuffix }}"
-    show-username-format="$ctrl.showUsernameFormat"
-    base-filter="{{ $ctrl.baseFilter }}"
-    on-remove-click="($ctrl.onRemoveClick)"
-    limited-feature-id="$ctrl.limitedFeatureId"
-  ></ldap-user-search-item>
-</div>
-
-<div class="form-group" style="margin-top: 10px">
-  <div class="col-sm-12">
-    <button
-      class="label label-default interactive vertical-center"
-      style="border: 0"
-      ng-click="$ctrl.onAddClick()"
-      limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
-      limited-feature-tabindex="-1"
-    >
-      <pr-icon icon="'plus-circle'"></pr-icon>
-      Add user search configuration
-    </button>
+  <div style="margin-top: 10px" ng-repeat="config in $ctrl.settings | limitTo: (1 - $ctrl.settings)">
+    <ldap-user-search-item
+      index="$index"
+      config="config"
+      domain-suffix="{{ $ctrl.domainSuffix }}"
+      show-username-format="$ctrl.showUsernameFormat"
+      base-filter="{{ $ctrl.baseFilter }}"
+      on-remove-click="($ctrl.onRemoveClick)"
+      limited-feature-id="$ctrl.limitedFeatureId"
+    ></ldap-user-search-item>
   </div>
-  <div class="col-sm-12" style="margin-top: 10px">
-    <button class="btn btm-sm btn-primary" type="button" ng-click="$ctrl.search()" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1">
-      Display Users
-    </button>
-  </div>
-</div>
 
-<ldap-users-datatable ng-if="$ctrl.showTable" dataset="$ctrl.users"></ldap-users-datatable>
+  <div class="form-group" style="margin-top: 10px">
+    <div class="col-sm-12">
+      <button
+        class="label label-default interactive vertical-center"
+        style="border: 0"
+        ng-click="$ctrl.onAddClick()"
+        limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+        limited-feature-tabindex="-1"
+      >
+        <pr-icon icon="'plus-circle'"></pr-icon>
+        Add user search configuration
+      </button>
+    </div>
+    <div class="col-sm-12" style="margin-top: 10px">
+      <button class="btn btm-sm btn-primary" type="button" ng-click="$ctrl.search()" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1">
+        Display Users
+      </button>
+    </div>
+  </div>
+
+  <ldap-users-datatable ng-if="$ctrl.showTable" dataset="$ctrl.users"></ldap-users-datatable>
+</section>
diff --git a/app/portainer/views/settings/authentication/settingsAuthentication.html b/app/portainer/views/settings/authentication/settingsAuthentication.html
index 840d1f030..8a6ae31f8 100644
--- a/app/portainer/views/settings/authentication/settingsAuthentication.html
+++ b/app/portainer/views/settings/authentication/settingsAuthentication.html
@@ -1,6 +1,6 @@
 <page-header title="'Authentication settings'" breadcrumbs="[{label:'Settings', link:'portainer.settings'}, 'Authentication']" reload="true"> </page-header>
 
-<div class="row">
+<div class="row" ng-if="settings">
   <div class="col-sm-12">
     <rd-widget>
       <rd-widget-header icon="users" title-text="Authentication"></rd-widget-header>
diff --git a/app/react/components/BoxSelector/BoxOption.module.css b/app/react/components/BoxSelector/BoxOption.module.css
index 9496961a0..6ced5fbd7 100644
--- a/app/react/components/BoxSelector/BoxOption.module.css
+++ b/app/react/components/BoxSelector/BoxOption.module.css
@@ -1,7 +1,3 @@
-.root input {
-  display: none;
-}
-
 .root label {
   @apply border border-solid;
   @apply border-gray-5 bg-gray-2 text-black;
diff --git a/app/react/components/BoxSelector/BoxOption.tsx b/app/react/components/BoxSelector/BoxOption.tsx
index d3ca5de10..e9fdb9440 100644
--- a/app/react/components/BoxSelector/BoxOption.tsx
+++ b/app/react/components/BoxSelector/BoxOption.tsx
@@ -43,6 +43,7 @@ export function BoxOption<T extends Value>({
         value={option.value.toString()}
         disabled={disabled}
         onChange={() => onSelect(option.value)}
+        className="sr-only"
       />
 
       <label htmlFor={option.id} data-cy={`${radioName}_${option.value}`}>
diff --git a/app/react/components/BoxSelector/BoxSelector.tsx b/app/react/components/BoxSelector/BoxSelector.tsx
index a8d34b500..316c56525 100644
--- a/app/react/components/BoxSelector/BoxSelector.tsx
+++ b/app/react/components/BoxSelector/BoxSelector.tsx
@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 
 import { FormError } from '@@/form-components/FormError';
+import { FormSectionTitle } from '@@/form-components/FormSectionTitle';
 
 import { BoxSelectorItem } from './BoxSelectorItem';
 import { BoxSelectorOption, Value } from './types';
@@ -27,6 +28,7 @@ export type Props<T extends Value> = Union<T> & {
   error?: string;
   useGridLayout?: boolean;
   className?: string;
+  label?: string;
 };
 
 export function BoxSelector<T extends Value>({
@@ -37,6 +39,7 @@ export function BoxSelector<T extends Value>({
   error,
   useGridLayout,
   className,
+  label,
   ...props
 }: Props<T>) {
   const rootClassName = clsx(
@@ -47,32 +50,39 @@ export function BoxSelector<T extends Value>({
   );
 
   return (
-    <div className='form-group after:clear-both after:table after:content-[""]'>
-      <div className="col-sm-12">
-        <div className={rootClassName} role="radiogroup">
-          {options
-            .filter((option) => !option.hide)
-            .map((option) => (
-              <BoxSelectorItem
-                key={option.id}
-                radioName={radioName}
-                option={option}
-                onSelect={handleSelect}
-                disabled={option.disabled && option.disabled()}
-                tooltip={option.tooltip && option.tooltip()}
-                type={props.isMulti ? 'checkbox' : 'radio'}
-                isSelected={isSelected}
-                slim={slim}
-              />
-            ))}
-          {hiddenSpacingCount &&
-            Array.from(Array(hiddenSpacingCount)).map((_, index) => (
-              <div key={index} className="flex-1" />
-            ))}
+    <>
+      {!!label && <FormSectionTitle>{label}</FormSectionTitle>}
+      <div className='form-group after:clear-both after:table after:content-[""]'>
+        <div className="col-sm-12">
+          <div
+            className={rootClassName}
+            role={props.isMulti ? 'group' : 'radiogroup'}
+            aria-label={label}
+          >
+            {options
+              .filter((option) => !option.hide)
+              .map((option) => (
+                <BoxSelectorItem
+                  key={option.id}
+                  radioName={radioName}
+                  option={option}
+                  onSelect={handleSelect}
+                  disabled={option.disabled && option.disabled()}
+                  tooltip={option.tooltip && option.tooltip()}
+                  type={props.isMulti ? 'checkbox' : 'radio'}
+                  isSelected={isSelected}
+                  slim={slim}
+                />
+              ))}
+            {hiddenSpacingCount &&
+              Array.from(Array(hiddenSpacingCount)).map((_, index) => (
+                <div key={index} className="flex-1" />
+              ))}
+          </div>
+          {!!error && <FormError>{error}</FormError>}
         </div>
-        {error && <FormError>{error}</FormError>}
       </div>
-    </div>
+    </>
   );
 
   function handleSelect(optionValue: T, limitedToBE: boolean) {
diff --git a/app/react/portainer/settings/AuthenticationView/AuthenticationMethodSelector.tsx b/app/react/portainer/settings/AuthenticationView/AuthenticationMethodSelector.tsx
index ede98a326..ae22325be 100644
--- a/app/react/portainer/settings/AuthenticationView/AuthenticationMethodSelector.tsx
+++ b/app/react/portainer/settings/AuthenticationView/AuthenticationMethodSelector.tsx
@@ -6,7 +6,6 @@ import Ldap from '@/assets/ico/ldap.svg?c';
 import OAuth from '@/assets/ico/oauth.svg?c';
 
 import { BoxSelector } from '@@/BoxSelector';
-import { FormSection } from '@@/form-components/FormSection';
 
 import { AuthenticationMethod } from '../types';
 
@@ -54,13 +53,12 @@ export function AuthenticationMethodSelector({
   onChange: (value: number) => void;
 }) {
   return (
-    <FormSection title="Authentication method">
-      <BoxSelector
-        radioName="authOptions"
-        options={options}
-        value={value}
-        onChange={onChange}
-      />
-    </FormSection>
+    <BoxSelector
+      radioName="authOptions"
+      options={options}
+      value={value}
+      onChange={onChange}
+      label="Authentication method"
+    />
   );
 }