From b673a49af6a87e3c4e02fe77578d06b7bc82f092 Mon Sep 17 00:00:00 2001
From: John Livingston <git@john-livingston.fr>
Date: Thu, 29 Aug 2024 12:20:36 +0200
Subject: [PATCH] Improved accessibility (#118):

* channel configuration: adding title to inputs.
* channel configuration: `aria-hidden="true"` on icons for add and
  remove row buttons.
---
 .../templates/channel-configuration.ts        |  1 +
 client/common/lib/buttons.ts                  |  2 ++
 .../common/lib/elements/dynamic-table-form.ts | 28 +++++++++++++++++--
 .../common/lib/elements/image-file-input.ts   | 10 +++++--
 client/common/lib/elements/tags-input.ts      |  5 ++--
 5 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/client/common/configuration/elements/templates/channel-configuration.ts b/client/common/configuration/elements/templates/channel-configuration.ts
index 28187f31..ff950eec 100644
--- a/client/common/configuration/elements/templates/channel-configuration.ts
+++ b/client/common/configuration/elements/templates/channel-configuration.ts
@@ -135,6 +135,7 @@ export function tplChannelConfiguration (el: ChannelConfigurationElement): Templ
         </livechat-configuration-section-header>
         <div class="form-group">
           <textarea
+            .title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_TERMS_LABEL) as any}
             name="terms"
             id="peertube-livechat-terms"
             .value=${el.channelConfiguration?.configuration.terms ?? ''}
diff --git a/client/common/lib/buttons.ts b/client/common/lib/buttons.ts
index 69fea1c4..0cf9e11d 100644
--- a/client/common/lib/buttons.ts
+++ b/client/common/lib/buttons.ts
@@ -6,6 +6,7 @@
 // This content comes from the file assets/images/plus-square.svg, from the Feather icons set https://feathericons.com/
 export const AddSVG: string =
   `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+  aria-hidden="true"
   fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
   stroke-linejoin="round" class="feather feather-plus-square">
     <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
@@ -15,6 +16,7 @@ export const AddSVG: string =
 // This content comes from the file assets/images/x-square.svg, from the Feather icons set https://feathericons.com/
 export const RemoveSVG: string =
   `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+  aria-hidden="true"
   fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
   stroke-linejoin="round" class="feather feather-x-square">
     <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
diff --git a/client/common/lib/elements/dynamic-table-form.ts b/client/common/lib/elements/dynamic-table-form.ts
index 0bd7c7b1..93436e03 100644
--- a/client/common/lib/elements/dynamic-table-form.ts
+++ b/client/common/lib/elements/dynamic-table-form.ts
@@ -47,11 +47,11 @@ interface CellDataSchema {
   minlength?: number
   maxlength?: number
   size?: number
-  label?: TemplateResult | string
   options?: { [key: string]: string }
   datalist?: DynamicTableAcceptedTypes[]
   separator?: string
   inputType?: DynamicTableAcceptedInputTypes
+  inputTitle?: string
   default?: DynamicTableAcceptedTypes
   colClassList?: string[] // CSS classes to add to the <td> element.
 }
@@ -295,6 +295,7 @@ export class DynamicTableFormElement extends LivechatElement {
     const inputId =
       `peertube-livechat-${this.formName.replace(/_/g, '-')}-${propertyName.toString().replace(/_/g, '-')}-${rowId}`
 
+    const inputTitle: DirectiveResult | undefined = propertySchema.inputTitle ?? this.header[propertyName]?.colName
     const feedback = this._renderFeedback(inputId, propertyName, originalIndex)
 
     switch (propertySchema.default?.constructor) {
@@ -320,6 +321,7 @@ export class DynamicTableFormElement extends LivechatElement {
             formElement = html`${this._renderInput(rowId,
               inputId,
               inputName,
+              inputTitle,
               propertyName,
               propertySchema,
               propertyValue as string,
@@ -332,6 +334,7 @@ export class DynamicTableFormElement extends LivechatElement {
             formElement = html`${this._renderTextarea(rowId,
               inputId,
               inputName,
+              inputTitle,
               propertyName,
               propertySchema,
               propertyValue as string,
@@ -344,6 +347,7 @@ export class DynamicTableFormElement extends LivechatElement {
             formElement = html`${this._renderSelect(rowId,
               inputId,
               inputName,
+              inputTitle,
               propertyName,
               propertySchema,
               propertyValue as string,
@@ -356,6 +360,7 @@ export class DynamicTableFormElement extends LivechatElement {
             formElement = html`${this._renderImageFileInput(rowId,
               inputId,
               inputName,
+              inputTitle,
               propertyName,
               propertySchema,
               propertyValue?.toString(),
@@ -376,6 +381,7 @@ export class DynamicTableFormElement extends LivechatElement {
             formElement = html`${this._renderInput(rowId,
               inputId,
               inputName,
+              inputTitle,
               propertyName,
               propertySchema,
               (propertyValue as Date).toISOString(),
@@ -394,6 +400,7 @@ export class DynamicTableFormElement extends LivechatElement {
             formElement = html`${this._renderInput(rowId,
               inputId,
               inputName,
+              inputTitle,
               propertyName,
               propertySchema,
               propertyValue as string,
@@ -411,6 +418,7 @@ export class DynamicTableFormElement extends LivechatElement {
             formElement = html`${this._renderCheckbox(rowId,
               inputId,
               inputName,
+              inputTitle,
               propertyName,
               propertySchema,
               propertyValue as boolean,
@@ -446,6 +454,7 @@ export class DynamicTableFormElement extends LivechatElement {
             formElement = html`${this._renderInput(rowId,
               inputId,
               inputName,
+              inputTitle,
               propertyName,
               propertySchema,
               (propertyValue)?.join(propertySchema.separator ?? ',') ??
@@ -461,6 +470,7 @@ export class DynamicTableFormElement extends LivechatElement {
             formElement = html`${this._renderTextarea(rowId,
               inputId,
               inputName,
+              inputTitle,
               propertyName,
               propertySchema,
               (propertyValue)?.join(propertySchema.separator ?? ',') ??
@@ -476,6 +486,7 @@ export class DynamicTableFormElement extends LivechatElement {
             formElement = html`${this._renderTagsInput(rowId,
               inputId,
               inputName,
+              inputTitle,
               propertyName,
               propertySchema,
               propertyValue,
@@ -501,6 +512,7 @@ export class DynamicTableFormElement extends LivechatElement {
   _renderInput = (rowId: number,
     inputId: string,
     inputName: string,
+    inputTitle: string | DirectiveResult | undefined,
     propertyName: string,
     propertySchema: CellDataSchema,
     propertyValue: string,
@@ -515,6 +527,7 @@ export class DynamicTableFormElement extends LivechatElement {
         )
       )}
       id=${inputId}
+      title=${ifDefined(inputTitle)}
       aria-describedby="${inputId}-feedback"
       list=${ifDefined(propertySchema.datalist ? inputId + '-datalist' : undefined)}
       min=${ifDefined(propertySchema.min)}
@@ -534,6 +547,7 @@ export class DynamicTableFormElement extends LivechatElement {
   _renderTagsInput = (rowId: number,
     inputId: string,
     inputName: string,
+    inputTitle: string | DirectiveResult | undefined,
     propertyName: string,
     propertySchema: CellDataSchema,
     propertyValue: Array<string | number>,
@@ -547,7 +561,7 @@ export class DynamicTableFormElement extends LivechatElement {
         )
       )}
       id=${inputId}
-      .inputPlaceholder=${propertySchema.label as any}
+      .inputTitle=${inputTitle as any}
       aria-describedby="${inputId}-feedback"
       .min=${propertySchema.min}
       .max=${propertySchema.max}
@@ -563,6 +577,7 @@ export class DynamicTableFormElement extends LivechatElement {
   _renderTextarea = (rowId: number,
     inputId: string,
     inputName: string,
+    inputTitle: string | DirectiveResult | undefined,
     propertyName: string,
     propertySchema: CellDataSchema,
     propertyValue: string,
@@ -576,6 +591,7 @@ export class DynamicTableFormElement extends LivechatElement {
         )
       )}
       id=${inputId}
+      title=${ifDefined(inputTitle)}
       aria-describedby="${inputId}-feedback"
       min=${ifDefined(propertySchema.min)}
       max=${ifDefined(propertySchema.max)}
@@ -588,6 +604,7 @@ export class DynamicTableFormElement extends LivechatElement {
   _renderCheckbox = (rowId: number,
     inputId: string,
     inputName: string,
+    inputTitle: string | DirectiveResult | undefined,
     propertyName: string,
     propertySchema: CellDataSchema,
     propertyValue: boolean,
@@ -602,6 +619,7 @@ export class DynamicTableFormElement extends LivechatElement {
         )
       )}
       id=${inputId}
+      title=${ifDefined(inputTitle)}
       aria-describedby="${inputId}-feedback"
       @change=${(event: Event) => this._updatePropertyFromValue(event, propertyName, propertySchema, rowId)}
       value="1"
@@ -611,6 +629,7 @@ export class DynamicTableFormElement extends LivechatElement {
   _renderSelect = (rowId: number,
     inputId: string,
     inputName: string,
+    inputTitle: string | DirectiveResult | undefined,
     propertyName: string,
     propertySchema: CellDataSchema,
     propertyValue: string,
@@ -623,11 +642,12 @@ export class DynamicTableFormElement extends LivechatElement {
         )
       )}
       id=${inputId}
+      title=${ifDefined(inputTitle)}
       aria-describedby="${inputId}-feedback"
       aria-label=${inputName}
       @change=${(event: Event) => this._updatePropertyFromValue(event, propertyName, propertySchema, rowId)}
     >
-      <option ?selected=${!propertyValue}>${propertySchema.label ?? 'Choose your option'}</option>
+      <option ?selected=${!propertyValue}>${inputTitle ?? ''}</option>
       ${Object.entries(propertySchema.options ?? {})
         ?.map(([value, name]) =>
           html`<option ?selected=${propertyValue === value} value=${value}>${name}</option>`
@@ -638,6 +658,7 @@ export class DynamicTableFormElement extends LivechatElement {
   _renderImageFileInput = (rowId: number,
     inputId: string,
     inputName: string,
+    inputTitle: string | DirectiveResult | undefined,
     propertyName: string,
     propertySchema: CellDataSchema,
     propertyValue: string,
@@ -647,6 +668,7 @@ export class DynamicTableFormElement extends LivechatElement {
       .name=${inputName}
       class=${classMap(this._getInputValidationClass(propertyName, originalIndex))}
       id=${inputId}
+      .inputTitle=${inputTitle as any}
       aria-describedby="${inputId}-feedback"
       @change=${(event: Event) => this._updatePropertyFromValue(event, propertyName, propertySchema, rowId)}
       .value=${propertyValue}
diff --git a/client/common/lib/elements/image-file-input.ts b/client/common/lib/elements/image-file-input.ts
index 2180cd0e..6c6a528d 100644
--- a/client/common/lib/elements/image-file-input.ts
+++ b/client/common/lib/elements/image-file-input.ts
@@ -1,11 +1,11 @@
 // SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
 //
 // SPDX-License-Identifier: AGPL-3.0-only
-
 import { LivechatElement } from './livechat'
 import { html } from 'lit'
+import type { DirectiveResult } from 'lit/directive'
 import { customElement, property } from 'lit/decorators.js'
-
+import { ifDefined } from 'lit/directives/if-defined.js'
 /**
  * Special element to upload image files.
  * If no current value, displays an input type="file" field.
@@ -29,13 +29,16 @@ export class ImageFileInputElement extends LivechatElement {
   @property({ attribute: false })
   public maxSize?: number
 
+  @property({ attribute: false })
+  public inputTitle?: string | DirectiveResult
+
   @property({ attribute: false })
   public accept: string[] = ['image/jpg', 'image/png', 'image/gif']
 
   protected override render = (): unknown => {
     return html`
       ${this.value
-        ? html`<img src=${this.value} @click=${(ev: Event) => {
+        ? html`<img src=${this.value} alt=${ifDefined(this.inputTitle)} @click=${(ev: Event) => {
           ev.preventDefault()
           const upload: HTMLInputElement | null | undefined = this.parentElement?.querySelector('input[type="file"]')
           upload?.click()
@@ -44,6 +47,7 @@ export class ImageFileInputElement extends LivechatElement {
       }
       <input
         type="file"
+        title=${ifDefined(this.inputTitle)}
         accept="${this.accept.join(',')}"
         class="form-control"
         style=${this.value ? 'display: none;' : ''}
diff --git a/client/common/lib/elements/tags-input.ts b/client/common/lib/elements/tags-input.ts
index 2f71657a..f505e3ba 100644
--- a/client/common/lib/elements/tags-input.ts
+++ b/client/common/lib/elements/tags-input.ts
@@ -12,6 +12,7 @@ import { ifDefined } from 'lit/directives/if-defined.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { animate, fadeOut, fadeIn } from '@lit-labs/motion'
 import { repeat } from 'lit/directives/repeat.js'
+import type { DirectiveResult } from 'lit/directive'
 
 // FIXME: find a better way to store this image.
 // This content comes from the file assets/images/copy.svg, after svgo cleaning.
@@ -48,7 +49,7 @@ export class TagsInputElement extends LivechatElement {
   private _inputValue?: string = ''
 
   @property({ attribute: false })
-  public inputPlaceholder?: string = ''
+  public inputTitle?: string | DirectiveResult = ''
 
   @property({ attribute: false })
   public datalist?: string[]
@@ -166,7 +167,7 @@ export class TagsInputElement extends LivechatElement {
         @input=${(e: InputEvent) => this._handleInputEvent(e)}
         @change=${(e: Event) => e.stopPropagation()}
         .value=${this._inputValue ?? ''}
-        placeholder=${ifDefined(this.inputPlaceholder)} />
+        title=${ifDefined(this.inputTitle)} />
         ${(this.datalist)
           ? html`<datalist id="${this.id ?? 'tags-input'}-datalist">
             ${(this.datalist ?? []).map((value) => html`<option value=${value}>`)}