From f0533a9b2e467d7ed9bcecfd0ca37fc4478b81d8 Mon Sep 17 00:00:00 2001
From: woothu <32914662+woothu@users.noreply.github.com>
Date: Wed, 29 Jan 2020 16:31:11 +0100
Subject: [PATCH] refactor: view refactors, snapshot update

---
 CONTRIBUTING.md                               |   2 +-
 src/containers/TheFooter.vue                  |   2 +-
 src/views/base/Navbars.vue                    |  12 +-
 src/views/buttons/Dropdowns.vue               |   2 +-
 src/views/charts/CChartRadarExample.vue       |   4 +-
 src/views/notifications/Alerts.vue            |   2 +-
 .../__snapshots__/TheFooter.spec.js.snap      |   2 +-
 .../TheHeaderDropdownAccnt.spec.js.snap       |   2 +-
 .../__snapshots__/Dashboard.spec.js.snap      |   1 +
 .../__snapshots__/Breadcrumbs.spec.js.snap    |   4 +-
 .../base/__snapshots__/Cards.spec.js.snap     |  16 +-
 .../base/__snapshots__/Carousels.spec.js.snap |   4 +-
 .../base/__snapshots__/Collapses.spec.js.snap |   4 +-
 .../base/__snapshots__/Navbars.spec.js.snap   |  20 +-
 .../base/__snapshots__/Navs.spec.js.snap      |   2 +-
 .../base/__snapshots__/Switches.spec.js.snap  |   1 +
 .../base/__snapshots__/Table.spec.js.snap     |   1 +
 .../__snapshots__/BrandButtons.spec.js.snap   | 408 +++++-------------
 .../ButtonDropdowns.spec.js.snap              |  24 +-
 .../__snapshots__/ButtonGroups.spec.js.snap   |   6 +-
 .../__snapshots__/Badges.spec.js.snap         |  16 +-
 .../theme/__snapshots__/Colors.spec.js.snap   |   8 +-
 .../users/__snapshots__/User.spec.js.snap     |   1 +
 .../users/__snapshots__/Users.spec.js.snap    |   1 +
 24 files changed, 152 insertions(+), 393 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index e2c3c8a4..630e302c 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -144,7 +144,7 @@ Inspired by Sparkbox's awesome article on [semantic commit messages](http://sees
 - fix (bug fix) -> ```git commit -m 'fix: commit-message-here'```
 - refactor (refactoring production code) -> ```git commit -m 'refactor: commit-message-here'```
 - style (formatting, missing semi colons, etc; no code change) -> ```git commit -m 'style: commit-message-here'```
-- test (adding missing tests, refactoring tests; no production code change) -> ```git test -m 'refactor: commit-message-here'```
+- test (adding missing tests, refactoring tests; no production code change) -> ```git commit -m 'test: commit-message-here'```
 
 ## Code guidelines
 
diff --git a/src/containers/TheFooter.vue b/src/containers/TheFooter.vue
index 8606811b..f3133368 100644
--- a/src/containers/TheFooter.vue
+++ b/src/containers/TheFooter.vue
@@ -2,7 +2,7 @@
   <CFooter>
     <div>
       <a href="https://coreui.io" target="_blank">CoreUI</a>
-      <span class="ml-1">&copy; 2019 creativeLabs.</span>
+      <span class="ml-1">&copy; 2020 creativeLabs.</span>
     </div>
     <div class="ml-auto">
       <span class="mr-1">Powered by</span>
diff --git a/src/views/base/Navbars.vue b/src/views/base/Navbars.vue
index 4c1c7302..c3d13b2b 100644
--- a/src/views/base/Navbars.vue
+++ b/src/views/base/Navbars.vue
@@ -30,13 +30,13 @@
 
             <!-- Right aligned nav items -->
             <CNavbarNav class="ml-auto">
-              <CForm inline>
+              <CForm inline class="align-middle">
                 <CInput
-                  class="mr-sm-2"
+                  class="mr-2 my-0"
                   placeholder="Search"
                   size="sm"
                 />
-                <CButton color="light" size="sm" class="my-2 my-sm-0">
+                <CButton color="light" size="sm">
                   Search
                 </CButton>
               </CForm>
@@ -44,7 +44,6 @@
               <CDropdown
                 toggler-text="Lang"
                 in-nav
-                placement="bottom-end"
               >
                   <CDropdownItem>EN</CDropdownItem>
                   <CDropdownItem>ES</CDropdownItem>
@@ -55,7 +54,6 @@
               <CDropdown
                 in-nav
                 toggler-text="User"
-                placement="bottom-end"
               >
                 <CDropdownItem>Profile</CDropdownItem>
                 <CDropdownItem>Signout</CDropdownItem>
@@ -112,7 +110,6 @@
               <!-- Navbar dropdowns -->
               <CDropdown
                 toggler-text="Lang"
-                placement="bottom-end"
                 in-nav
               >
                 <CDropdownItem>EN</CDropdownItem>
@@ -122,7 +119,6 @@
               </CDropdown>
               <CDropdown
                 toggler-text="User"
-                placement="bottom-end"
                 in-nav
               >
                 <CDropdownItem>Account</CDropdownItem>
@@ -176,7 +172,7 @@ export default {
     return {
       show: false,
       navbarText: false,
-      navbarDropdown: false,
+      navbarDropdown: false
     }
   }
 }
diff --git a/src/views/buttons/Dropdowns.vue b/src/views/buttons/Dropdowns.vue
index 9c2117bb..01b5a1be 100644
--- a/src/views/buttons/Dropdowns.vue
+++ b/src/views/buttons/Dropdowns.vue
@@ -111,7 +111,7 @@
             <div>
               <CDropdown
                 color="secondary"
-                :offset="25"
+                :offset="[10, 5]"
                 toggler-text="Offset Dropdown"
                 class="m-2"
               >
diff --git a/src/views/charts/CChartRadarExample.vue b/src/views/charts/CChartRadarExample.vue
index 9939da30..d5094ffc 100644
--- a/src/views/charts/CChartRadarExample.vue
+++ b/src/views/charts/CChartRadarExample.vue
@@ -19,7 +19,7 @@ export default {
     defaultDatasets () {
       return [
         {
-          label: '2017',
+          label: '2019',
           backgroundColor: 'rgba(179,181,198,0.2)',
           borderColor: 'rgba(179,181,198,1)',
           pointBackgroundColor: 'rgba(179,181,198,1)',
@@ -30,7 +30,7 @@ export default {
           data: [65, 59, 90, 81, 56, 55, 40]
         },
         {
-          label: '2018',
+          label: '2020',
           backgroundColor: 'rgba(255,99,132,0.2)',
           borderColor: 'rgba(255,99,132,1)',
           pointBackgroundColor: 'rgba(255,99,132,1)',
diff --git a/src/views/notifications/Alerts.vue b/src/views/notifications/Alerts.vue
index f57e85a4..223fda7a 100644
--- a/src/views/notifications/Alerts.vue
+++ b/src/views/notifications/Alerts.vue
@@ -188,7 +188,7 @@ export default {
       this.dismissCountDown = this.dismissSecs
     },
     showDismissibleAlerts () {
-      ['alert1', 'alert2', 'alert3'].forEach(alert => this[alert] = true)
+      ['alert1', 'alert2'].forEach(alert => this[alert] = true)
     }
   }
 }
diff --git a/tests/unit/containers/__snapshots__/TheFooter.spec.js.snap b/tests/unit/containers/__snapshots__/TheFooter.spec.js.snap
index 83e7adc0..74304f11 100644
--- a/tests/unit/containers/__snapshots__/TheFooter.spec.js.snap
+++ b/tests/unit/containers/__snapshots__/TheFooter.spec.js.snap
@@ -16,7 +16,7 @@ exports[`TheFooter.vue renders correctly 1`] = `
     <span
       class="ml-1"
     >
-      © 2019 creativeLabs.
+      © 2020 creativeLabs.
     </span>
   </div>
    
diff --git a/tests/unit/containers/__snapshots__/TheHeaderDropdownAccnt.spec.js.snap b/tests/unit/containers/__snapshots__/TheHeaderDropdownAccnt.spec.js.snap
index d48e9e4f..d8430350 100644
--- a/tests/unit/containers/__snapshots__/TheHeaderDropdownAccnt.spec.js.snap
+++ b/tests/unit/containers/__snapshots__/TheHeaderDropdownAccnt.spec.js.snap
@@ -7,7 +7,7 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
   class="c-header-nav-items"
   flip="true"
   innav="true"
-  offset="0"
+  offset="0,0"
   placement="bottom-end"
   togglertext="Dropdown"
 >
diff --git a/tests/unit/views/__snapshots__/Dashboard.spec.js.snap b/tests/unit/views/__snapshots__/Dashboard.spec.js.snap
index 53b3c50d..34ad255a 100644
--- a/tests/unit/views/__snapshots__/Dashboard.spec.js.snap
+++ b/tests/unit/views/__snapshots__/Dashboard.spec.js.snap
@@ -950,6 +950,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
             class="mb-0 table-outline"
             fields="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
             head-color="light"
+            header="true"
             hover="true"
             items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
             itemsperpage="10"
diff --git a/tests/unit/views/base/__snapshots__/Breadcrumbs.spec.js.snap b/tests/unit/views/base/__snapshots__/Breadcrumbs.spec.js.snap
index e19eb41a..edee7447 100644
--- a/tests/unit/views/base/__snapshots__/Breadcrumbs.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Breadcrumbs.spec.js.snap
@@ -15,12 +15,10 @@ exports[`Breadcrumbs.vue renders correctly 1`] = `
       >
         <svg
           class="c-icon"
+          role="img"
           viewBox="0 0 64 64"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <title>
-            cilJustifyCenter
-          </title>
           undefined
         </svg>
         <strong>
diff --git a/tests/unit/views/base/__snapshots__/Cards.spec.js.snap b/tests/unit/views/base/__snapshots__/Cards.spec.js.snap
index ac63ff2c..7b912841 100644
--- a/tests/unit/views/base/__snapshots__/Cards.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Cards.spec.js.snap
@@ -76,12 +76,10 @@ exports[`Cards.vue renders correctly 1`] = `
         >
           <svg
             class="c-icon"
+            role="img"
             viewBox="0 0 64 64"
             xmlns="http://www.w3.org/2000/svg"
           >
-            <title>
-              cilCheck
-            </title>
             undefined
           </svg>
            Card with icon
@@ -729,12 +727,10 @@ exports[`Cards.vue renders correctly 1`] = `
             >
               <svg
                 class="c-icon"
+                role="img"
                 viewBox="0 0 64 64"
                 xmlns="http://www.w3.org/2000/svg"
               >
-                <title>
-                  cilSettings
-                </title>
                 undefined
               </svg>
             </a>
@@ -746,12 +742,10 @@ exports[`Cards.vue renders correctly 1`] = `
             >
               <svg
                 class="c-icon"
+                role="img"
                 viewBox="0 0 64 64"
                 xmlns="http://www.w3.org/2000/svg"
               >
-                <title>
-                  cilChevronBottom
-                </title>
                 undefined
               </svg>
             </a>
@@ -763,12 +757,10 @@ exports[`Cards.vue renders correctly 1`] = `
             >
               <svg
                 class="c-icon"
+                role="img"
                 viewBox="0 0 64 64"
                 xmlns="http://www.w3.org/2000/svg"
               >
-                <title>
-                  cilXCircle
-                </title>
                 undefined
               </svg>
             </a>
diff --git a/tests/unit/views/base/__snapshots__/Carousels.spec.js.snap b/tests/unit/views/base/__snapshots__/Carousels.spec.js.snap
index c38d3086..d9cba445 100644
--- a/tests/unit/views/base/__snapshots__/Carousels.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Carousels.spec.js.snap
@@ -15,12 +15,10 @@ exports[`Carousels.vue renders correctly 1`] = `
       >
         <svg
           class="c-icon"
+          role="img"
           viewBox="0 0 64 64"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <title>
-            cilJustifyCenter
-          </title>
           undefined
         </svg>
          
diff --git a/tests/unit/views/base/__snapshots__/Collapses.spec.js.snap b/tests/unit/views/base/__snapshots__/Collapses.spec.js.snap
index 3c465950..99e3a24c 100644
--- a/tests/unit/views/base/__snapshots__/Collapses.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Collapses.spec.js.snap
@@ -15,12 +15,10 @@ exports[`Collapses.vue renders correctly 1`] = `
       >
         <svg
           class="c-icon"
+          role="img"
           viewBox="0 0 64 64"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <title>
-            cilJustifyCenter
-          </title>
           undefined
         </svg>
          
diff --git a/tests/unit/views/base/__snapshots__/Navbars.spec.js.snap b/tests/unit/views/base/__snapshots__/Navbars.spec.js.snap
index b46cb1d7..883eb149 100644
--- a/tests/unit/views/base/__snapshots__/Navbars.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Navbars.spec.js.snap
@@ -90,10 +90,11 @@ exports[`Navbars.vue renders correctly 1`] = `
             tag="ul"
           >
             <cform-stub
+              class="align-middle"
               inline="true"
             >
               <cinput-stub
-                class="mr-sm-2"
+                class="mr-2 my-0"
                 lazy="400"
                 placeholder="Search"
                 size="sm"
@@ -102,7 +103,6 @@ exports[`Navbars.vue renders correctly 1`] = `
                
               <cbutton-stub
                 activeclass="active"
-                class="my-2 my-sm-0"
                 color="light"
                 event="click"
                 exactactiveclass="active"
@@ -121,8 +121,8 @@ exports[`Navbars.vue renders correctly 1`] = `
               caret="true"
               flip="true"
               innav="true"
-              offset="0"
-              placement="bottom-end"
+              offset="0,0"
+              placement="bottom-start"
               togglertext="Lang"
             >
               <cdropdownitem-stub
@@ -170,8 +170,8 @@ exports[`Navbars.vue renders correctly 1`] = `
               caret="true"
               flip="true"
               innav="true"
-              offset="0"
-              placement="bottom-end"
+              offset="0,0"
+              placement="bottom-start"
               togglertext="User"
             >
               <cdropdownitem-stub
@@ -360,8 +360,8 @@ exports[`Navbars.vue renders correctly 1`] = `
               caret="true"
               flip="true"
               innav="true"
-              offset="0"
-              placement="bottom-end"
+              offset="0,0"
+              placement="bottom-start"
               togglertext="Lang"
             >
               <cdropdownitem-stub
@@ -409,8 +409,8 @@ exports[`Navbars.vue renders correctly 1`] = `
               caret="true"
               flip="true"
               innav="true"
-              offset="0"
-              placement="bottom-end"
+              offset="0,0"
+              placement="bottom-start"
               togglertext="User"
             >
               <cdropdownitem-stub
diff --git a/tests/unit/views/base/__snapshots__/Navs.spec.js.snap b/tests/unit/views/base/__snapshots__/Navs.spec.js.snap
index f6f04c6c..c74a1c3d 100644
--- a/tests/unit/views/base/__snapshots__/Navs.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Navs.spec.js.snap
@@ -453,7 +453,7 @@ exports[`Navs.vue renders correctly 1`] = `
           flip="true"
           id="nav7_ddown"
           nav=""
-          offset="0"
+          offset="0,0"
           placement="bottom-end"
           togglertext="Dropdown"
         >
diff --git a/tests/unit/views/base/__snapshots__/Switches.spec.js.snap b/tests/unit/views/base/__snapshots__/Switches.spec.js.snap
index ddd39400..725d9eae 100644
--- a/tests/unit/views/base/__snapshots__/Switches.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Switches.spec.js.snap
@@ -1684,6 +1684,7 @@ exports[`Switches.vue renders correctly 1`] = `
           <cdatatable-stub
             class="table-align-middle mb-0"
             fields="[object Object],[object Object],[object Object]"
+            header="true"
             hover="true"
             items="[object Object],[object Object],[object Object]"
             itemsperpage="10"
diff --git a/tests/unit/views/base/__snapshots__/Table.spec.js.snap b/tests/unit/views/base/__snapshots__/Table.spec.js.snap
index 5f1cbb84..79f0b1af 100644
--- a/tests/unit/views/base/__snapshots__/Table.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Table.spec.js.snap
@@ -13,6 +13,7 @@ exports[`Table.vue renders correctly 1`] = `
   <ccardbody-stub>
     <cdatatable-stub
       fields="username,registered,role,status"
+      header="true"
       itemsperpage="5"
       pagination="true"
       responsive="true"
diff --git a/tests/unit/views/buttons/__snapshots__/BrandButtons.spec.js.snap b/tests/unit/views/buttons/__snapshots__/BrandButtons.spec.js.snap
index 6c610275..e9dbcb16 100644
--- a/tests/unit/views/buttons/__snapshots__/BrandButtons.spec.js.snap
+++ b/tests/unit/views/buttons/__snapshots__/BrandButtons.spec.js.snap
@@ -68,12 +68,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibFacebook
-              </title>
               undefined
             </svg>
              
@@ -88,12 +86,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibTwitter
-              </title>
               undefined
             </svg>
              
@@ -108,12 +104,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibLinkedin
-              </title>
               undefined
             </svg>
              
@@ -128,12 +122,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibFlickr
-              </title>
               undefined
             </svg>
              
@@ -148,12 +140,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibTumblr
-              </title>
               undefined
             </svg>
              
@@ -168,12 +158,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibXing
-              </title>
               undefined
             </svg>
              
@@ -188,12 +176,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibGithub
-              </title>
               undefined
             </svg>
              
@@ -208,12 +194,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibStackOverflow
-              </title>
               undefined
             </svg>
              
@@ -228,12 +212,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibYoutube
-              </title>
               undefined
             </svg>
              
@@ -248,12 +230,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibDribbble
-              </title>
               undefined
             </svg>
              
@@ -268,12 +248,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibInstagram
-              </title>
               undefined
             </svg>
              
@@ -288,12 +266,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibPinterest
-              </title>
               undefined
             </svg>
              
@@ -308,12 +284,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibVk
-              </title>
               undefined
             </svg>
              
@@ -328,12 +302,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibYahoo
-              </title>
               undefined
             </svg>
              
@@ -348,12 +320,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibBehance
-              </title>
               undefined
             </svg>
              
@@ -368,12 +338,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibReddit
-              </title>
               undefined
             </svg>
              
@@ -388,12 +356,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibVimeo
-              </title>
               undefined
             </svg>
              
@@ -415,12 +381,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibFacebook
-              </title>
               undefined
             </svg>
              
@@ -435,12 +399,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibTwitter
-              </title>
               undefined
             </svg>
              
@@ -455,12 +417,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibLinkedin
-              </title>
               undefined
             </svg>
              
@@ -475,12 +435,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibFlickr
-              </title>
               undefined
             </svg>
              
@@ -495,12 +453,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibTumblr
-              </title>
               undefined
             </svg>
              
@@ -515,12 +471,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibXing
-              </title>
               undefined
             </svg>
              
@@ -535,12 +489,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibGithub
-              </title>
               undefined
             </svg>
              
@@ -555,12 +507,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibStackOverflow
-              </title>
               undefined
             </svg>
              
@@ -575,12 +525,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibYoutube
-              </title>
               undefined
             </svg>
              
@@ -595,12 +543,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibDribbble
-              </title>
               undefined
             </svg>
              
@@ -615,12 +561,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibInstagram
-              </title>
               undefined
             </svg>
              
@@ -635,12 +579,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibPinterest
-              </title>
               undefined
             </svg>
              
@@ -655,12 +597,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibVk
-              </title>
               undefined
             </svg>
              
@@ -675,12 +615,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibYahoo
-              </title>
               undefined
             </svg>
              
@@ -695,12 +633,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibBehance
-              </title>
               undefined
             </svg>
              
@@ -715,12 +651,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibReddit
-              </title>
               undefined
             </svg>
              
@@ -735,12 +669,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibVimeo
-              </title>
               undefined
             </svg>
              
@@ -768,12 +700,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibFacebook
-              </title>
               undefined
             </svg>
              
@@ -788,12 +718,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibTwitter
-              </title>
               undefined
             </svg>
              
@@ -808,12 +736,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibLinkedin
-              </title>
               undefined
             </svg>
              
@@ -828,12 +754,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibFlickr
-              </title>
               undefined
             </svg>
              
@@ -848,12 +772,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibTumblr
-              </title>
               undefined
             </svg>
              
@@ -868,12 +790,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibXing
-              </title>
               undefined
             </svg>
              
@@ -888,12 +808,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibGithub
-              </title>
               undefined
             </svg>
              
@@ -908,12 +826,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibStackOverflow
-              </title>
               undefined
             </svg>
              
@@ -928,12 +844,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibYoutube
-              </title>
               undefined
             </svg>
              
@@ -948,12 +862,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibDribbble
-              </title>
               undefined
             </svg>
              
@@ -968,12 +880,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibInstagram
-              </title>
               undefined
             </svg>
              
@@ -988,12 +898,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibPinterest
-              </title>
               undefined
             </svg>
              
@@ -1008,12 +916,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibVk
-              </title>
               undefined
             </svg>
              
@@ -1028,12 +934,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibYahoo
-              </title>
               undefined
             </svg>
              
@@ -1048,12 +952,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibBehance
-              </title>
               undefined
             </svg>
              
@@ -1068,12 +970,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibReddit
-              </title>
               undefined
             </svg>
              
@@ -1088,12 +988,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibVimeo
-              </title>
               undefined
             </svg>
              
@@ -1155,12 +1053,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibFacebook
-              </title>
               undefined
             </svg>
           </button>
@@ -1171,12 +1067,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibTwitter
-              </title>
               undefined
             </svg>
           </button>
@@ -1187,12 +1081,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibLinkedin
-              </title>
               undefined
             </svg>
           </button>
@@ -1203,12 +1095,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibFlickr
-              </title>
               undefined
             </svg>
           </button>
@@ -1219,12 +1109,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibTumblr
-              </title>
               undefined
             </svg>
           </button>
@@ -1235,12 +1123,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibXing
-              </title>
               undefined
             </svg>
           </button>
@@ -1251,12 +1137,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibGithub
-              </title>
               undefined
             </svg>
           </button>
@@ -1267,12 +1151,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibStackOverflow
-              </title>
               undefined
             </svg>
           </button>
@@ -1283,12 +1165,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibYoutube
-              </title>
               undefined
             </svg>
           </button>
@@ -1299,12 +1179,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibDribbble
-              </title>
               undefined
             </svg>
           </button>
@@ -1315,12 +1193,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibInstagram
-              </title>
               undefined
             </svg>
           </button>
@@ -1331,12 +1207,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibPinterest
-              </title>
               undefined
             </svg>
           </button>
@@ -1347,12 +1221,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibVk
-              </title>
               undefined
             </svg>
           </button>
@@ -1363,12 +1235,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibYahoo
-              </title>
               undefined
             </svg>
           </button>
@@ -1379,12 +1249,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibBehance
-              </title>
               undefined
             </svg>
           </button>
@@ -1395,12 +1263,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibReddit
-              </title>
               undefined
             </svg>
           </button>
@@ -1411,12 +1277,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-sm"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibVimeo
-              </title>
               undefined
             </svg>
           </button>
@@ -1434,12 +1298,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibFacebook
-              </title>
               undefined
             </svg>
           </button>
@@ -1450,12 +1312,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibTwitter
-              </title>
               undefined
             </svg>
           </button>
@@ -1466,12 +1326,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibLinkedin
-              </title>
               undefined
             </svg>
           </button>
@@ -1482,12 +1340,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibFlickr
-              </title>
               undefined
             </svg>
           </button>
@@ -1498,12 +1354,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibTumblr
-              </title>
               undefined
             </svg>
           </button>
@@ -1514,12 +1368,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibXing
-              </title>
               undefined
             </svg>
           </button>
@@ -1530,12 +1382,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibGithub
-              </title>
               undefined
             </svg>
           </button>
@@ -1546,12 +1396,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibStackOverflow
-              </title>
               undefined
             </svg>
           </button>
@@ -1562,12 +1410,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibYoutube
-              </title>
               undefined
             </svg>
           </button>
@@ -1578,12 +1424,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibDribbble
-              </title>
               undefined
             </svg>
           </button>
@@ -1594,12 +1438,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibInstagram
-              </title>
               undefined
             </svg>
           </button>
@@ -1610,12 +1452,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibPinterest
-              </title>
               undefined
             </svg>
           </button>
@@ -1626,12 +1466,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibVk
-              </title>
               undefined
             </svg>
           </button>
@@ -1642,12 +1480,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibYahoo
-              </title>
               undefined
             </svg>
           </button>
@@ -1658,12 +1494,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibBehance
-              </title>
               undefined
             </svg>
           </button>
@@ -1674,12 +1508,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibReddit
-              </title>
               undefined
             </svg>
           </button>
@@ -1690,12 +1522,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibVimeo
-              </title>
               undefined
             </svg>
           </button>
@@ -1719,12 +1549,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibFacebook
-              </title>
               undefined
             </svg>
           </button>
@@ -1735,12 +1563,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibTwitter
-              </title>
               undefined
             </svg>
           </button>
@@ -1751,12 +1577,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibLinkedin
-              </title>
               undefined
             </svg>
           </button>
@@ -1767,12 +1591,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibFlickr
-              </title>
               undefined
             </svg>
           </button>
@@ -1783,12 +1605,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibTumblr
-              </title>
               undefined
             </svg>
           </button>
@@ -1799,12 +1619,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibXing
-              </title>
               undefined
             </svg>
           </button>
@@ -1815,12 +1633,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibGithub
-              </title>
               undefined
             </svg>
           </button>
@@ -1831,12 +1647,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibStackOverflow
-              </title>
               undefined
             </svg>
           </button>
@@ -1847,12 +1661,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibYoutube
-              </title>
               undefined
             </svg>
           </button>
@@ -1863,12 +1675,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibDribbble
-              </title>
               undefined
             </svg>
           </button>
@@ -1879,12 +1689,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibInstagram
-              </title>
               undefined
             </svg>
           </button>
@@ -1895,12 +1703,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibPinterest
-              </title>
               undefined
             </svg>
           </button>
@@ -1911,12 +1717,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibVk
-              </title>
               undefined
             </svg>
           </button>
@@ -1927,12 +1731,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibYahoo
-              </title>
               undefined
             </svg>
           </button>
@@ -1943,12 +1745,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibBehance
-              </title>
               undefined
             </svg>
           </button>
@@ -1959,12 +1759,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibReddit
-              </title>
               undefined
             </svg>
           </button>
@@ -1975,12 +1773,10 @@ exports[`BrandButtons.vue renders correctly 1`] = `
           >
             <svg
               class="c-icon c-icon-lg"
+              role="img"
               viewBox="0 0 64 64"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                cibVimeo
-              </title>
               undefined
             </svg>
           </button>
diff --git a/tests/unit/views/buttons/__snapshots__/ButtonDropdowns.spec.js.snap b/tests/unit/views/buttons/__snapshots__/ButtonDropdowns.spec.js.snap
index 94d623a8..28be1d42 100644
--- a/tests/unit/views/buttons/__snapshots__/ButtonDropdowns.spec.js.snap
+++ b/tests/unit/views/buttons/__snapshots__/ButtonDropdowns.spec.js.snap
@@ -16,12 +16,10 @@ exports[`Dropdowns.vue renders correctly 1`] = `
         >
           <svg
             class="c-icon"
+            role="img"
             viewBox="0 0 64 64"
             xmlns="http://www.w3.org/2000/svg"
           >
-            <title>
-              cilJustifyCenter
-            </title>
             undefined
           </svg>
            
@@ -229,12 +227,10 @@ exports[`Dropdowns.vue renders correctly 1`] = `
         >
           <svg
             class="c-icon"
+            role="img"
             viewBox="0 0 64 64"
             xmlns="http://www.w3.org/2000/svg"
           >
-            <title>
-              cilJustifyCenter
-            </title>
             undefined
           </svg>
            
@@ -498,12 +494,10 @@ exports[`Dropdowns.vue renders correctly 1`] = `
         >
           <svg
             class="c-icon"
+            role="img"
             viewBox="0 0 64 64"
             xmlns="http://www.w3.org/2000/svg"
           >
-            <title>
-              cilJustifyCenter
-            </title>
             undefined
           </svg>
            
@@ -586,12 +580,10 @@ exports[`Dropdowns.vue renders correctly 1`] = `
         >
           <svg
             class="c-icon"
+            role="img"
             viewBox="0 0 64 64"
             xmlns="http://www.w3.org/2000/svg"
           >
-            <title>
-              cilJustifyCenter
-            </title>
             undefined
           </svg>
            
@@ -809,12 +801,10 @@ exports[`Dropdowns.vue renders correctly 1`] = `
         >
           <svg
             class="c-icon"
+            role="img"
             viewBox="0 0 64 64"
             xmlns="http://www.w3.org/2000/svg"
           >
-            <title>
-              cilJustifyCenter
-            </title>
             undefined
           </svg>
            
@@ -939,12 +929,10 @@ exports[`Dropdowns.vue renders correctly 1`] = `
         >
           <svg
             class="c-icon"
+            role="img"
             viewBox="0 0 64 64"
             xmlns="http://www.w3.org/2000/svg"
           >
-            <title>
-              cilJustifyCenter
-            </title>
             undefined
           </svg>
            
diff --git a/tests/unit/views/buttons/__snapshots__/ButtonGroups.spec.js.snap b/tests/unit/views/buttons/__snapshots__/ButtonGroups.spec.js.snap
index 30388248..deebe075 100644
--- a/tests/unit/views/buttons/__snapshots__/ButtonGroups.spec.js.snap
+++ b/tests/unit/views/buttons/__snapshots__/ButtonGroups.spec.js.snap
@@ -381,7 +381,7 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
               caret="true"
               color="success"
               flip="true"
-              offset="0"
+              offset="0,0"
               placement="bottom-start"
               right=""
               text="Menu"
@@ -439,7 +439,7 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
               caret="true"
               color="info"
               flip="true"
-              offset="0"
+              offset="0,0"
               placement="bottom-start"
               right=""
               split="true"
@@ -809,7 +809,7 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
             class="mx-1"
             color="secondary"
             flip="true"
-            offset="0"
+            offset="0,0"
             placement="bottom-end"
             togglertext="Dropdown"
           >
diff --git a/tests/unit/views/notifications/__snapshots__/Badges.spec.js.snap b/tests/unit/views/notifications/__snapshots__/Badges.spec.js.snap
index bb6d9775..aded0dc0 100644
--- a/tests/unit/views/notifications/__snapshots__/Badges.spec.js.snap
+++ b/tests/unit/views/notifications/__snapshots__/Badges.spec.js.snap
@@ -15,12 +15,10 @@ exports[`Badges.vue renders correctly 1`] = `
       >
         <svg
           class="c-icon"
+          role="img"
           viewBox="0 0 64 64"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <title>
-            cilJustifyCenter
-          </title>
           undefined
         </svg>
          
@@ -126,12 +124,10 @@ exports[`Badges.vue renders correctly 1`] = `
       >
         <svg
           class="c-icon"
+          role="img"
           viewBox="0 0 64 64"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <title>
-            cilJustifyCenter
-          </title>
           undefined
         </svg>
          Badge
@@ -202,12 +198,10 @@ exports[`Badges.vue renders correctly 1`] = `
       >
         <svg
           class="c-icon"
+          role="img"
           viewBox="0 0 64 64"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <title>
-            cilJustifyCenter
-          </title>
           undefined
         </svg>
          Badge
@@ -278,12 +272,10 @@ exports[`Badges.vue renders correctly 1`] = `
       >
         <svg
           class="c-icon"
+          role="img"
           viewBox="0 0 64 64"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <title>
-            cilJustifyCenter
-          </title>
           undefined
         </svg>
          Badge
diff --git a/tests/unit/views/theme/__snapshots__/Colors.spec.js.snap b/tests/unit/views/theme/__snapshots__/Colors.spec.js.snap
index 312aafe2..f1c7efbd 100644
--- a/tests/unit/views/theme/__snapshots__/Colors.spec.js.snap
+++ b/tests/unit/views/theme/__snapshots__/Colors.spec.js.snap
@@ -10,12 +10,10 @@ exports[`Colors.vue renders correctly 1`] = `
     >
       <svg
         class="c-icon"
+        role="img"
         viewBox="0 0 64 64"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <title>
-          cilDrop
-        </title>
         undefined
       </svg>
        Theme colors
@@ -415,12 +413,10 @@ exports[`Colors.vue renders correctly 1`] = `
     >
       <svg
         class="c-icon"
+        role="img"
         viewBox="0 0 64 64"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <title>
-          cilDrop
-        </title>
         undefined
       </svg>
        Grays
diff --git a/tests/unit/views/users/__snapshots__/User.spec.js.snap b/tests/unit/views/users/__snapshots__/User.spec.js.snap
index 8fbef2e6..ac07cc92 100644
--- a/tests/unit/views/users/__snapshots__/User.spec.js.snap
+++ b/tests/unit/views/users/__snapshots__/User.spec.js.snap
@@ -21,6 +21,7 @@ exports[`User.vue renders correctly 1`] = `
         <cdatatable-stub
           fields="[object Object],[object Object]"
           fixed="true"
+          header="true"
           items="[object Object]"
           itemsperpage="10"
           responsive="true"
diff --git a/tests/unit/views/users/__snapshots__/Users.spec.js.snap b/tests/unit/views/users/__snapshots__/Users.spec.js.snap
index 351a5d95..f7b2a0df 100644
--- a/tests/unit/views/users/__snapshots__/Users.spec.js.snap
+++ b/tests/unit/views/users/__snapshots__/Users.spec.js.snap
@@ -23,6 +23,7 @@ exports[`Users.vue renders correctly 1`] = `
         <cdatatable-stub
           clickablerows="true"
           fields="[object Object],[object Object],[object Object],[object Object]"
+          header="true"
           hover="true"
           index-column=""
           items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"