feat(tabs): make menu keyboard reachable#2077
Conversation
…kerConfig BREAKING CHANGE: `CriterionDefinition.datepickerConfig` type narrowed The type of `datepickerConfig` in `CriterionDefinition` (filtered-search) changed from `DatepickerInputConfig` to `Omit<DatepickerInputConfig, 'enableDateRange' | 'enableTwoMonthDateRange'>`. The properties `enableDateRange` and `enableTwoMonthDateRange ` are no longer accepted in `datepickerConfig` when used with filtered-search criteria, as they had no effect in that context. Migration: Remove any `enableDateRange` and `enableTwoMonthDateRange` properties from your `datepickerConfig` objects passed to `CriterionDefinition`.
Adding a set of utilities that allows customers to create selects with custom backed value selection, for instance using `si-tree-view`. A very simple version of it can look like this: ```ts @component({ selector: 'app-tree-select', imports: [SiSelectComboboxComponent, SiSelectDropdownDirective, SiTreeViewComponent], template: ` <si-select-combobox> @if (select.value(); as val) { {{ val }} } @else { <span class="text-secondary">Select a location...</span> } </si-select-combobox> <ng-template si-select-dropdown> <si-tree-view class="d-block" ariaLabel="Locations" [items]="items()" [enableSelection]="true" [singleSelectMode]="true" [isVirtualized]="false" (treeItemClicked)="selectItem($event)" /> </ng-template> `, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [ { directive: SiCustomSelectDirective, inputs: ['disabled', 'readonly', 'value'], outputs: ['valueChange'] } ] }) export class TreeSelectComponent { protected readonly select = inject(SiCustomSelectDirective); /** The tree items to display. */ readonly items = input<TreeItem[]>([]); selectItem(item: TreeItem): void { if (item.label) { this.select.updateValue(item.label as string); this.select.close(); } } } ``` The goal is to empower applications to build selects with whatever content they need while we take care of accesibility and proper appereance. Closes #1840
chore(demo): wrap thead th elements in tr for proper table styling
…initCards `initCards()` subscribes to `card.expandChange` but is called from multiple paths (`subscribeToCards`, `ngOnChanges`, `restore`) without unsubscribing previous subscriptions, causing handlers to fire multiple times. Use `outputToObservable` with `takeUntil` to teardown previous subscriptions on reinit and `takeUntilDestroyed` for component destroy cleanup.
Change the `ariaLabel` input type from string to `TranslatableString`
|
In the tabs-menu example -https://element.siemens.io/element-examples/#/overview/si-tabs/si-tabs-menu?q=tabs I do not see any Accessibility issue since we can reach all the tabs via keyboard arrows, but having the menu button in tab order would improve user experience in my opinion, as It would help to visualize all tabs at once in such case. @panch1739 @dr-itz WDYT? |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request improves the accessibility of the SiTabsetComponent by making the overflow menu button keyboard-accessible and adding a translatable ARIA label. It introduces a moreTabsLabel input, imports the necessary translation utilities, and updates the translation keys interface. A review comment identifies that the removal of SI_BREADCRUMB_ROUTER_LABEL is out of scope and could lead to compilation errors.
| 'SI_APPLICATION_HEADER.TOGGLE_NAVIGATION'?: string; | ||
| 'SI_ATTACHMENT_LIST.REMOVE_ATTACHMENT'?: string; | ||
| 'SI_BREADCRUMB'?: string; | ||
| 'SI_BREADCRUMB_ROUTER_LABEL'?: string; |
There was a problem hiding this comment.
The removal of 'SI_BREADCRUMB_ROUTER_LABEL' appears to be an unrelated change to this PR, which focuses on making the tab menu keyboard reachable. If this key is still in use elsewhere in the application, removing it from this interface will cause compilation errors under strict type checking. Please verify if this deletion was intentional and necessary for this feature.
5 participants
No description provided.