From ff7ac05d1174c2691791a260aaf082b7a04baa7f Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Fri, 27 Sep 2024 10:03:51 +0200
Subject: [PATCH] Fix table configuration dropdown accessibility

---
 .../users/user-list/user-list.component.html  | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.html b/client/src/app/+admin/overview/users/user-list/user-list.component.html
index e36e78ea4..24f7d8810 100644
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/overview/users/user-list/user-list.component.html
@@ -36,29 +36,35 @@
       <th scope="col" style="width: 40px">
         <p-tableHeaderCheckbox ariaLabel="Select all rows" i18n-ariaLabel></p-tableHeaderCheckbox>
       </th>
+
       <th scope="col" style="width: 40px;">
         <span i18n class="visually-hidden">More information</span>
       </th>
+
       <th scope="col" style="width: 70px;">
         <div class="c-hand column-toggle" ngbDropdown placement="bottom-left auto" container="body" autoClose="outside">
-          <button class="border-0 p-0" ngbDropdownToggle>
+          <button type="button" class="border-0 p-0" ngbDropdownToggle i18n-title title="Open table configuration">
             <my-global-icon iconName="columns"></my-global-icon>
           </button>
 
-          <div role="menu" class="dropdown-menu" ngbDropdownMenu>
-            <div class="dropdown-header" i18n>Table parameters</div>
-            <div ngbDropdownItem class="dropdown-item">
+          <div ngbDropdownMenu class="p-3">
+            <div class="form-group">
+              <label i18n for="select-columns">Select the columns to display</label>
+
               <my-select-checkbox
-                name="columns"
+                labelForId="select-columns"
                 [availableItems]="columns"
                 [selectableGroup]="false" [(ngModel)]="selectedColumns"
-                i18n-placeholder placeholder="Select columns"
+                i18n-placeholder placeholder="Select the columns to display"
               >
               </my-select-checkbox>
             </div>
-            <div ngbDropdownItem class="dropdown-item">
-              <my-peertube-checkbox inputName="highlightBannedUsers" [(ngModel)]="highlightBannedUsers"
-                i18n-labelText labelText="Highlight banned users"></my-peertube-checkbox>
+
+            <div class="form-group">
+              <my-peertube-checkbox
+                inputName="highlightBannedUsers" [(ngModel)]="highlightBannedUsers"
+                i18n-labelText labelText="Highlight banned users"
+              ></my-peertube-checkbox>
             </div>
           </div>
         </div>