Add accessible, localized labels for table selection checkboxes

etc/lime-elements.api.md

@@ -718,6 +718,7 @@ export namespace Components {
         "columns": Column[];
         "data": object[];
         "emptyMessage": string;
+        "language": Languages;
         "layout": Layout;
         "loading": boolean;
         "mode": 'local' | 'remote';
@@ -1845,6 +1846,7 @@ export namespace JSX {
         "columns"?: Column[];
         "data"?: object[];
         "emptyMessage"?: string;
+        "language"?: Languages;
         "layout"?: Layout;
         "loading"?: boolean;
         "mode"?: 'local' | 'remote';

src/components/checkbox/checkbox.scss

@@ -71,6 +71,19 @@ label {
     .invalid:not(.readonly) & {
         color: var(--limel-theme-error-text-color);
     }
+
+    :host(limel-checkbox.hide-label) &,
+    .hide-label & {
+        // this helper class of `hide-label` can be added for example to the `host` element,
+        // or if the `CheckboxTemplate` is imported to other components, the class can be
+        // added to the `checkbox` element itself
+        // and be used internally by other components such as `limel-table`
+        // to hide the `<label>`, while still keeping the checkbox
+        // both clickable for the users, and accessible for screen readers
+        @include mixins.truncate-text();
+        opacity: 0;
+        width: $box-size;
+    }
 }
 
 .box {

src/components/table/table-selection.spec.ts

@@ -32,7 +32,8 @@ describe('table selection', () => {
         tableSelection = new TestTableSelection(
             () => table,
             new ElementPool(document),
-            { emit: emitSelect }
+            { emit: emitSelect },
+            jest.fn((key: string) => key)
         );
     });
 

src/components/table/table-selection.ts

@@ -21,11 +21,13 @@ export class TableSelection {
      * @param getTable - Function that returns the Tabulator instance
      * @param pool - The element pool used to cache the checkbox components
      * @param selectEvent - The event emitter to use when checkboxes are toggled
+     * @param getTranslation - Function to get translated strings
      */
     constructor(
         private getTable: () => Tabulator,
         private pool: ElementPool,
-        private selectEvent: EventEmitter<RowData[]>
+        private selectEvent: EventEmitter<RowData[]>,
+        private getTranslation: (key: string) => string
     ) {
         this.selection = new Selection((index) =>
             getRowId(this.getRowByIndex(index).getData())
@@ -106,7 +108,9 @@ export class TableSelection {
             const element = this.pool.get(LIMEL_CHECKBOX);
             setElementProperties(element, {
                 checked: this.selection.has(getRowId(cell.getData())),
+                label: this.getTranslation('table.select-row'),
             });
+            element.classList.add('hide-label');
             element.style.display = 'inline-block';
 
             return element;

src/components/table/table.tsx

@@ -22,6 +22,8 @@ import { ElementPool } from './element-pool';
 import { TableSelection } from './table-selection';
 import { mapLayout, Layout } from './layout';
 import { areRowsEqual } from './utils';
+import { Languages } from '../date-picker/date.types';
+import translate from '../../global/translations';
 
 const FIRST_PAGE = 1;
 
@@ -158,6 +160,12 @@ export class Table {
     @Prop()
     public selection: object[];
 
+    /**
+     * Defines the language for translations.
+     */
+    @Prop({ reflect: true })
+    public language: Languages = 'en';
+
     /**
      * Emitted when `mode` is `remote` and the table is loading new data. The
      * consumer is responsible for giving the table new data
@@ -469,7 +477,8 @@ export class Table {
             this.tableSelection = new TableSelection(
                 () => this.tabulator,
                 this.pool,
-                this.select
+                this.select,
+                (key: string) => this.getTranslation(key)
             );
             this.tableSelection.setSelection(this.selection);
         }
@@ -852,13 +861,15 @@ export class Table {
                 style={{ display: showSelectAll ? 'inline-block' : 'none' }}
             >
                 <limel-checkbox
+                    class="hide-label"
                     onChange={this.selectAllOnChange}
                     disabled={this.data.length === 0}
                     checked={this.tableSelection?.hasSelection}
                     indeterminate={
                         this.tableSelection?.hasSelection &&
                         this.selection?.length < this.data.length
                     }
+                    label={this.getTranslation('table.select-all')}
                 />
             </div>
         );
@@ -877,4 +888,8 @@ export class Table {
             </div>
         );
     }
+
+    private getTranslation = (key: string) => {
+        return translate.get(key, this.language);
+    };
 }

src/translations/da.ts

@@ -50,4 +50,6 @@ export default {
     'progress-bar': 'Fremskridtsindikator',
     'ai-avatar.label': 'AI-avatar',
     'ai-avatar.thinking': 'tænker',
+    'table.select-all': 'Vælg alle rækker',
+    'table.select-row': 'Vælg denne række',
 };

src/translations/de.ts

@@ -52,4 +52,6 @@ export default {
     'progress-bar': 'Fortschrittsbalken',
     'ai-avatar.label': 'KI-Avatar',
     'ai-avatar.thinking': 'denkt',
+    'table.select-all': 'Alle Zeilen auswählen',
+    'table.select-row': 'Diese Zeile auswählen',
 };

src/translations/en.ts

@@ -50,4 +50,6 @@ export default {
     'progress-bar': 'Progress bar',
     'ai-avatar.label': 'AI Avatar',
     'ai-avatar.thinking': 'thinking',
+    'table.select-all': 'Select all rows',
+    'table.select-row': 'Select this row',
 };

src/translations/fi.ts

@@ -51,4 +51,6 @@ export default {
     'progress-bar': 'Edistymispalkki',
     'ai-avatar.label': 'Tekoälyavatar',
     'ai-avatar.thinking': 'ajattelee',
+    'table.select-all': 'Valitse kaikki rivit',
+    'table.select-row': 'Valitse tämä rivi',
 };

src/translations/fr.ts

@@ -52,4 +52,6 @@ export default {
     'progress-bar': 'Barre de progression',
     'ai-avatar.label': 'Avatar IA',
     'ai-avatar.thinking': 'en réflexion',
+    'table.select-all': 'Sélectionner toutes les lignes',
+    'table.select-row': 'Sélectionner cette ligne',
 };

src/translations/nl.ts

@@ -52,4 +52,6 @@ export default {
     'progress-bar': 'Voortgangsbalk',
     'ai-avatar.label': 'AI-avatar',
     'ai-avatar.thinking': 'aan het denken',
+    'table.select-all': 'Alle rijen selecteren',
+    'table.select-row': 'Deze rij selecteren',
 };

src/translations/no.ts

@@ -50,4 +50,6 @@ export default {
     'snackbar.dismiss': 'Lukk',
     'ai-avatar.label': 'KI-avatar',
     'ai-avatar.thinking': 'tenker',
+    'table.select-all': 'Velg alle rader',
+    'table.select-row': 'Velg denne raden',
 };

src/translations/sv.ts

@@ -50,4 +50,6 @@ export default {
     'progress-bar': 'Förloppsindikator',
     'ai-avatar.label': 'AI-avatar',
     'ai-avatar.thinking': 'tänker',
+    'table.select-all': 'Markera alla rader',
+    'table.select-row': 'Markera denna rad',
 };