Skip to content

Commit 1a0ddba

Browse files
xidedixxidedix
committed
refactor(tabs): add role="tablist", minor cleanups
1 parent 2cc68c9 commit 1a0ddba

File tree

1 file changed

+25
-25
lines changed

1 file changed

+25
-25
lines changed

Diff for: ‎src/app/views/base/tabs/tabs.component.html

+25-25
Original file line numberDiff line numberDiff line change
@@ -5,40 +5,40 @@
55
<strong>Angular Tabs</strong> <small>underline</small>
66
</c-card-header>
77
<c-card-body>
8-
<c-nav variant="underline-border">
8+
<c-nav variant="underline-border" role="tablist">
99
<c-nav-item>
10-
<a [cTabContent]="tabContent1" [tabPaneIdx]="0" cNavLink>
10+
<button [cTabContent]="tabContent1" [tabPaneIdx]="0" cNavLink >
1111
<svg cIcon class="me-2" name="cilHome"></svg>
1212
Home
13-
</a>
13+
</button>
1414
</c-nav-item>
1515
<c-nav-item>
16-
<a [cTabContent]="tabContent1" [tabPaneIdx]="1" cNavLink>
16+
<button [cTabContent]="tabContent1" [tabPaneIdx]="1" cNavLink >
1717
<svg cIcon class="me-2" name="cilUser"></svg>
1818
Profile
19-
</a>
19+
</button>
2020
</c-nav-item>
2121
<c-nav-item>
22-
<a [cTabContent]="tabContent1" [tabPaneIdx]="2" cNavLink
23-
[disabled]="tabContent1.activeTabPaneIdx < 1">
22+
<button [cTabContent]="tabContent1" [tabPaneIdx]="2" cNavLink
23+
[disabled]="tabContent1.activeTabPaneIdx < 1" >
2424
<svg cIcon class="me-2" name="cilCode"></svg>
2525
Contact
26-
</a>
26+
</button>
2727
</c-nav-item>
2828
</c-nav>
2929
<c-tab-content #tabContent1="cTabContent" [activeTabPaneIdx]="0" cRounded="bottom">
30-
<c-tab-pane class="p-3 preview" role="tabpanel">
30+
<c-tab-pane class="p-3 preview" >
3131
This is some placeholder content the <strong>Home</strong> tab's associated content. Clicking another tab
3232
will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
3333
content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
3434
</c-tab-pane>
35-
<c-tab-pane class="p-3 preview" role="tabpanel">
35+
<c-tab-pane class="p-3 preview" >
3636
This is some placeholder content the <strong>Profile</strong> tab's associated content. Clicking another
3737
tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
3838
content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
3939
</c-tab-pane>
4040
@if (tabContent1.activeTabPaneIdx > 0) {
41-
<c-tab-pane class="p-3 preview" role="tabpanel">
41+
<c-tab-pane class="p-3 preview" >
4242
This is some placeholder content the <strong>Contact</strong> tab's associated content. Clicking another
4343
tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
4444
content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
@@ -54,19 +54,19 @@
5454
<strong>Angular Tabs</strong> <small>tabs</small>
5555
</c-card-header>
5656
<c-card-body>
57-
<c-nav variant="tabs">
57+
<c-nav variant="tabs" role="tablist">
5858
@for (nav of panes; track nav; let i = $index, isLast = $last) {
5959
<c-nav-item>
60-
<a [cTabContent]="tabContent2" [disabled]="isLast" [tabPaneIdx]="i" cNavLink>
60+
<button [cTabContent]="tabContent2" [disabled]="isLast" [tabPaneIdx]="i" cNavLink >
6161
<svg cIcon class="me-2" [name]="nav.icon"></svg>
6262
{{ nav.name }}
63-
</a>
63+
</button>
6464
</c-nav-item>
6565
}
6666
</c-nav>
6767
<c-tab-content #tabContent2="cTabContent" [activeTabPaneIdx]="0" cRounded="bottom">
6868
@for (pane of panes; track pane; let i = $index) {
69-
<c-tab-pane class="p-3 preview">
69+
<c-tab-pane class="p-3 preview" >
7070
This is some placeholder content the <strong>{{ pane.name }}</strong> tab's associated content. Clicking
7171
another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
7272
control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered
@@ -83,38 +83,38 @@
8383
<strong>Angular Tabs</strong> <small>pills</small>
8484
</c-card-header>
8585
<c-card-body>
86-
<c-nav variant="pills">
86+
<c-nav variant="pills" role="tablist">
8787
<c-nav-item>
88-
<a [cTabContent]="tabContent3" [tabPaneIdx]="0" cNavLink>
88+
<button [cTabContent]="tabContent3" [tabPaneIdx]="0" cNavLink >
8989
<svg cIcon class="me-2" name="cilHome"></svg>
9090
Home
91-
</a>
91+
</button>
9292
</c-nav-item>
9393
<c-nav-item>
94-
<a [cTabContent]="tabContent3" [tabPaneIdx]="1" cNavLink>
94+
<button [cTabContent]="tabContent3" [tabPaneIdx]="1" cNavLink >
9595
<svg cIcon class="me-2" name="cilUser"></svg>
9696
Profile
97-
</a>
97+
</button>
9898
</c-nav-item>
9999
<c-nav-item>
100-
<a [cTabContent]="tabContent3" [tabPaneIdx]="2" cNavLink>
100+
<button [cTabContent]="tabContent3" [tabPaneIdx]="2" cNavLink >
101101
<svg cIcon class="me-2" name="cilCode"></svg>
102102
Contact
103-
</a>
103+
</button>
104104
</c-nav-item>
105105
</c-nav>
106106
<c-tab-content #tabContent3="cTabContent" cRounded="bottom" [activeTabPaneIdx]="0">
107-
<c-tab-pane aria-labelledby="docs-code-preview" class="p-3 preview" role="tabpanel">
107+
<c-tab-pane aria-labelledby="docs-code-preview" class="p-3 preview" >
108108
This is some placeholder content the <strong>Home</strong> tab's associated content. Clicking another tab
109109
will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
110110
content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
111111
</c-tab-pane>
112-
<c-tab-pane aria-labelledby="docs-code-preview" class="p-3 preview" role="tabpanel">
112+
<c-tab-pane aria-labelledby="docs-code-preview" class="p-3 preview" >
113113
This is some placeholder content the <strong>Profile</strong> tab's associated content. Clicking another
114114
tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
115115
content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
116116
</c-tab-pane>
117-
<c-tab-pane aria-labelledby="docs-code-preview" class="p-3 preview" role="tabpanel">
117+
<c-tab-pane aria-labelledby="docs-code-preview" class="p-3 preview" >
118118
This is some placeholder content the <strong>Contact</strong> tab's associated content. Clicking another
119119
tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
120120
content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

0 commit comments

Comments
 (0)