Improve accessibility & best practices

creativetimofficial · Feb 12, 2019 · 88f7016 · 88f7016
1 parent a6db546
commit 88f7016
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 5 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
   <meta charset="utf-8">
   <link rel="apple-touch-icon" sizes="76x76" href="<%= webpackConfig.output.publicPath %>apple-icon.png">
@@ -8,7 +8,7 @@
 
   <title>Vue Black Dashboard Free</title>
   <!-- Bootstrap core CSS     -->
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5">
 
   <!--  Fonts and icons     -->
   <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet">

diff --git a/src/components/BaseDropdown.vue b/src/components/BaseDropdown.vue
@@ -10,6 +10,7 @@
         class="dropdown-toggle btn-rotate"
         :class="titleClasses"
         :aria-expanded="isOpen"
+        :aria-label="title"
         data-toggle="dropdown">
         <slot name="title" :is-open="isOpen">
           <i :class="icon"></i>

diff --git a/src/components/SidebarPlugin/SideBar.vue b/src/components/SidebarPlugin/SideBar.vue
@@ -8,7 +8,9 @@
     <!-- -->
     <div class="sidebar-wrapper" id="style-3">
       <div class="logo">
-        <a href="http://www.creative-tim.com" class="simple-text logo-mini">
+        <a href="http://www.creative-tim.com"
+           aria-label="sidebar mini logo"
+           class="simple-text logo-mini">
           <div class="logo-img"
                :class="{'logo-img-rtl': $rtl.isRTL}">
             <img

diff --git a/src/layout/dashboard/TopNavbar.vue b/src/layout/dashboard/TopNavbar.vue
@@ -4,7 +4,9 @@
     <div class="container-fluid">
       <div class="navbar-wrapper">
         <div class="navbar-toggle d-inline" :class="{toggled: $sidebar.showSidebar}">
-          <button type="button" class="navbar-toggler"
+          <button type="button"
+                  class="navbar-toggler"
+                  aria-label="Navbar toggle button"
                   @click="toggleSidebar">
             <span class="navbar-toggler-bar bar1"></span>
             <span class="navbar-toggler-bar bar2"></span>

diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue
@@ -32,6 +32,7 @@
           <div class="chart-area">
             <line-chart style="height: 100%"
                         ref="bigChart"
+                        chart-id="big-line-chart"
                         :chart-data="bigLineChart.chartData"
                         :gradient-colors="bigLineChart.gradientColors"
                         :gradient-stops="bigLineChart.gradientStops"
@@ -50,6 +51,7 @@
           </template>
           <div class="chart-area">
             <line-chart style="height: 100%"
+                        chart-id="purple-line-chart"
                         :chart-data="purpleLineChart.chartData"
                         :gradient-colors="purpleLineChart.gradientColors"
                         :gradient-stops="purpleLineChart.gradientStops"
@@ -66,6 +68,7 @@
           </template>
           <div class="chart-area">
             <bar-chart style="height: 100%"
+                       chart-id="blue-bar-chart"
                        :chart-data="blueBarChart.chartData"
                        :gradient-stops="blueBarChart.gradientStops"
                        :extra-options="blueBarChart.extraOptions">
@@ -81,6 +84,7 @@
           </template>
           <div class="chart-area">
             <line-chart style="height: 100%"
+                        chart-id="green-line-chart"
                         :chart-data="greenLineChart.chartData"
                         :gradient-stops="greenLineChart.gradientStops"
                         :extra-options="greenLineChart.extraOptions">
@@ -97,6 +101,7 @@
             <p class="card-category d-inline">{{$t('dashboard.today')}}</p>
             <base-dropdown menu-on-right=""
                            tag="div"
+                           aria-label="Settings menu"
                            title-classes="btn btn-link btn-icon"
                            :class="{'float-left': isRTL}">
               <i slot="title" class="tim-icons icon-settings-gear-63"></i>

diff --git a/src/pages/Dashboard/TaskList.vue b/src/pages/Dashboard/TaskList.vue
@@ -11,7 +11,7 @@
           <p class="text-muted">{{row.description}}</p>
         </td>
         <td class="td-actions text-right">
-          <base-button type="link">
+          <base-button type="link" aria-label="edit button">
             <i class="tim-icons icon-pencil"></i>
           </base-button>
         </td>