Review and update language selector implementation - discussion

[sergeleger]

Comparing the previous version with the new version:

This is a consequence of changes to Angular's Material UI library. There are possibly a few different solutions I had found, but the recommend approach is to wrap the <mat-select /> into a <mat-form-field /> which renders something like this:

Closed and opened:

The argument for <mat-form-field /> controlling the width of the dropdown is an accessibility issue, if an option value needs a lot of width to display properly in the <mat-select /> field, then the <mat-form-field/> should be equally wide to not truncate the value. (summarizing, I intended to share a link where this was discussed...).

There might be options to control the new display of the <mat-select />, but I'm not certain how much we'd be diverging from Material UI recommendations.

Here's the implementation that generated those last images:

<mat-form-field style="width: 5em">
  <mat-select
    [ngModel]="language"
    (selectionChange)="onLanguageSelect($event)"
  >
    @for (l of languages; track l) {
    <mat-option [value]="l.value">
      {{ l.label.toUpperCase() }}
    </mat-option>
    }
  </mat-select>
</mat-form-field>

@dlothian and @joanise I'm not tackling it now, but we could start a discussion about your preferences and options.