fix(tabs): ensure tablist is keyboard reachable when no active tab is defined#2072
Open
akashsonune wants to merge 19 commits into
Open
fix(tabs): ensure tablist is keyboard reachable when no active tab is defined#2072akashsonune wants to merge 19 commits into
akashsonune wants to merge 19 commits into
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
akashsonune
changed the title
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Code Review
This pull request introduces a tabindexValue computed signal to manage the tabindex attribute within the SiTabBaseDirective. The review identifies that using a computed signal for this logic is problematic because it depends on a non-signal property from the focus key manager, which will not trigger necessary updates during keyboard navigation. Furthermore, the current implementation may result in multiple tabs having a zero tabindex. The feedback recommends replacing the signal with a method to ensure proper re-evaluation and correct roving tabindex behavior.
Member
Author
|
@panch1739 @dr-itz WDYT? Alternatively as per- https://www.w3.org/WAI/ARIA/apg/patterns/tabs/ there should be at least one tab active. In that case, we can make the first non disabled tab as active if no active tab is provided. Shall we do this instead? |
akashsonune
force-pushed
the
fix/a11y-tabs-keyboard-entry-without-active-tab
branch
from
15a5ae0 to
05e7c36
Compare
chintankavathia
requested changes
May 27, 2026
Member
chintankavathia
left a comment
chintankavathia
left a comment
There was a problem hiding this comment.
@akashsonune please rebase
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Tablist is not reachable when there is no active tab
Documentation.
Examples.
Dashboards Demo.
Playwright report.
Coverage Reports: