10000 chore(docs): update tabs docs examples for additional ARIA markup (#5… · bootstrap-vue/bootstrap-vue@404d6e8 · GitHub
[go: up one dir, main page]

Skip to content

Commit 404d6e8

Browse files
authored
chore(docs): update tabs docs examples for additional ARIA markup (#5106)
1 parent 59cca83 commit 404d6e8

File tree

3 files changed

+8
-8
lines changed

3 files changed

+8
-8
lines changed

docs/components/header.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
</b-navbar-brand>
3030

3131
<div class="navbar-nav-scroll">
32-
<b-navbar-nav is-nav class="bd-navbar-nav flex-row">
32+
<b-navbar-nav class="bd-navbar-nav flex-row">
3333
<b-nav-item to="/docs" active-class="active" exact>Docs</b-nav-item>
3434
<b-nav-item to="/docs/components" active-class="active">Components</b-nav-item>
3535
<b-nav-item to="/docs/directives" active-class="active">Directives</b-nav-item>

src/components/card/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -296,7 +296,7 @@ may be needed depending on your card content.
296296
<b-card no-body class="overflow-hidden" style="max-width: 540px;">
297297
<b-row no-gutters>
298298
<b-col md="6">
299-
<b-card-img src="https://picsum.photos/400/400/?image=20" class="rounded-0"></b-card-img>
299+
<b-card-img src="https://picsum.photos/400/400/?image=20" alt="Image" class="rounded-0"></b-card-img>
300300
</b-col>
301301
<b-col md="6">
302302
<b-card-body title="Horizontal Card">

src/components/tabs/README.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -57,17 +57,17 @@ When `<b-tabs>` is in `card` mode, each `<b-tab>` sub-component will automatical
5757
<b-card no-body>
5858
<b-tabs card>
5959
<b-tab no-body title="Picture 1">
60-
<b-card-img bottom src="https://picsum.photos/600/200/?image=21"></b-card-img>
60+
<b-card-img bottom src="https://picsum.photos/600/200/?image=21" alt="Image 21"></b-card-img>
6161
<b-card-footer>Picture 1 footer</b-card-footer>
6262
</b-tab>
6363

6464
<b-tab no-body title="Picture 2">
65-
<b-card-img bottom src="https://picsum.photos/600/200/?image=25"></b-card-img>
65+
<b-card-img bottom src="https://picsum.photos/600/200/?image=25" alt="Image 25"></b-card-img>
6666
<b-card-footer>Picture 2 footer</b-card-footer>
6767
</b-tab>
6868

6969
<b-tab no-body title="Picture 3">
70-
<b-card-img bottom src="https://picsum.photos/600/200/?image=26"></b-card-img>
70+
<b-card-img bottom src="https://picsum.photos/600/200/?image=26" alt="Image 26"></b-card-img>
7171
<b-card-footer>Picture 3 footer</b-card-footer>
7272
</b-tab>
7373

@@ -289,8 +289,8 @@ If you want to add extra tabs that do not have any content, you can put them in
289289
<b-tabs>
290290
<!-- Add your b-tab components here -->
291291
<template v-slot:tabs-end>
292-
<b-nav-item href="#" @click="() => {}">Another tab</b-nav-item>
293-
<li class="nav-item align-self-center">Plain text</li>
292+
<b-nav-item href="#" role="presentation" @click="() => {}">Another tab</b-nav-item>
293+
<li role="presentation" class="nav-item align-self-center">Plain text</li>
294294
</template>
295295
</b-tabs>
296296
</div>
@@ -531,7 +531,7 @@ It is recommended to use the `disabled` attribute on the `<b-tab>` component ins
531531

532532
<!-- New Tab Button (Using tabs-end slot) -->
533533
<template v-slot:tabs-end>
534-
<b-nav-item @click.prevent="newTab" href="#"><b>+</b></b-nav-item>
534+
<b-nav-item role="presentation" @click.prevent="newTab" href="#"><b>+</b></b-nav-item>
535535
</template>
536536

537537
<!-- Render this if no tabs -->

0 commit comments

Comments
 (0)
0