chore(docs): update tabs docs examples for additional ARIA markup (#5106)

tmorehouse · web-flow · commit 404d6e87067c · 2020-04-06T15:13:20.000-03:00
diff --git a/docs/components/header.vue b/docs/components/header.vue
@@ -29,7 +29,7 @@
     </b-navbar-brand>
 
     <div class="navbar-nav-scroll">
-      <b-navbar-nav is-nav class="bd-navbar-nav flex-row">
+      <b-navbar-nav class="bd-navbar-nav flex-row">
         <b-nav-item to="/docs" active-class="active" exact>Docs</b-nav-item>
         <b-nav-item to="/docs/components" active-class="active">Components</b-nav-item>
         <b-nav-item to="/docs/directives" active-class="active">Directives</b-nav-item>
diff --git a/src/components/card/README.md b/src/components/card/README.md
@@ -296,7 +296,7 @@ may be needed depending on your card content.
   <b-card no-body class="overflow-hidden" style="max-width: 540px;">
     <b-row no-gutters>
       <b-col md="6">
-        <b-card-img src="https://picsum.photos/400/400/?image=20" class="rounded-0"></b-card-img>
+        <b-card-img src="https://picsum.photos/400/400/?image=20" alt="Image" class="rounded-0"></b-card-img>
       </b-col>
       <b-col md="6">
         <b-card-body title="Horizontal Card">
diff --git a/src/components/tabs/README.md b/src/components/tabs/README.md
@@ -57,17 +57,17 @@ When `<b-tabs>` is in `card` mode, each `<b-tab>` sub-component will automatical
   <b-card no-body>
     <b-tabs card>
       <b-tab no-body title="Picture 1">
-        <b-card-img bottom src="https://picsum.photos/600/200/?image=21"></b-card-img>
+        <b-card-img bottom src="https://picsum.photos/600/200/?image=21" alt="Image 21"></b-card-img>
         <b-card-footer>Picture 1 footer</b-card-footer>
       </b-tab>
 
       <b-tab no-body title="Picture 2">
-        <b-card-img bottom src="https://picsum.photos/600/200/?image=25"></b-card-img>
+        <b-card-img bottom src="https://picsum.photos/600/200/?image=25" alt="Image 25"></b-card-img>
         <b-card-footer>Picture 2 footer</b-card-footer>
       </b-tab>
 
       <b-tab no-body title="Picture 3">
-        <b-card-img bottom src="https://picsum.photos/600/200/?image=26"></b-card-img>
+        <b-card-img bottom src="https://picsum.photos/600/200/?image=26" alt="Image 26"></b-card-img>
         <b-card-footer>Picture 3 footer</b-card-footer>
       </b-tab>
 
@@ -289,8 +289,8 @@ If you want to add extra tabs that do not have any content, you can put them in
   <b-tabs>
     <!-- Add your b-tab components here -->
     <template v-slot:tabs-end>
-      <b-nav-item href="#" @click="() => {}">Another tab</b-nav-item>
-      <li class="nav-item align-self-center">Plain text</li>
+      <b-nav-item href="#" role="presentation" @click="() => {}">Another tab</b-nav-item>
+      <li role="presentation" class="nav-item align-self-center">Plain text</li>
     </template>
   </b-tabs>
 </div>
@@ -531,7 +531,7 @@ It is recommended to use the `disabled` attribute on the `<b-tab>` component ins
 
         <!-- New Tab Button (Using tabs-end slot) -->
         <template v-slot:tabs-end>
-          <b-nav-item @click.prevent="newTab" href="#"><b>+</b></b-nav-item>
+          <b-nav-item role="presentation" @click.prevent="newTab" href="#"><b>+</b></b-nav-item>
         </template>
 
         <!-- Render this if no tabs -->
