aria fixes

pages/_includes/cards/invoices.html

@@ -42,7 +42,7 @@
 			<tbody>
 			{% for invoice in site.data.invoices limit: 8 %}
 			<tr>
-				<td><input class="form-check-input m-0 align-middle" type="checkbox"></td>
+				<td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
 				<td><span class="text-muted">00{{ forloop.index | plus: 1400 }}</span></td>
 				<td><a href="invoice.html" class="text-reset" tabindex="-1">{{ invoice.name }}</a></td>
 				<td>

pages/_includes/layout/page-title-actions.html

@@ -27,6 +27,6 @@
 		{% include ui/button.html text="New view" color="secondary" %}
 	</span>
 	{% include ui/button.html icon="plus" text="Create new report" color="primary" class="ml-3 d-none d-sm-inline-block" %}
-	{% include ui/button.html icon="plus" icon-only=true color="primary" class="ml-3 d-sm-none" %}
+	{% include ui/button.html icon="plus" icon-only=true color="primary" class="ml-3 d-sm-none" text="Create new report" %}
 	{% endif %}
 </div>

pages/_includes/layout/topnav.html

@@ -10,7 +10,7 @@
 	<div class="navbar navbar-border {% if page.topnav-dark %}navbar-dark bg-dark text-white{% else %}navbar-light bg-white{% endif %}">
 		<div class="container{% if include.topnav-fluid %}-fluid{% endif %}">
 
-			<button class="navbar-toggler mr-auto {% if page.sidebar %}hide-sidebar-visible{% else %}d-{{ breakpoint }}-none{% endif %}" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false">
+			<button class="navbar-toggler mr-auto {% if page.sidebar %}hide-sidebar-visible{% else %}d-{{ breakpoint }}-none{% endif %}" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
 				<span class="navbar-toggler-icon"></span>
 			</button>
 
@@ -30,8 +30,7 @@
 				</li>
 
 				<li class="nav-item dropdown">
-					<a href="#" data-toggle="dropdown"
-					   class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+					<a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
 						{% include ui/avatar.html src=person.photo size="sm" %}
 						<span class="ml-2 d-none d-lg-block lh-1">
 							{{ person.full_name }}

pages/_includes/ui/button.html

@@ -19,7 +19,7 @@
 {% endif %}
 
 {% assign e = include.element | default: 'a' %}
-<{{ e }}{% if e == 'a' %} href="{{ href }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}"{% if include.external %} target="_blank" rel="noreferrer"{% endif %}{% if include.modal %} data-toggle="modal" data-target="#modal-{{ include.modal }}"{% endif %}>
+<{{ e }}{% if e == 'a' %} href="{{ href }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}"{% if include.external %} target="_blank" rel="noreferrer"{% endif %}{% if include.modal %} data-toggle="modal" data-target="#modal-{{ include.modal }}"{% endif %}{% if include.icon-only %} aria-label="{{ include.text | default: "Button" }}"{% endif %}>
 {% if include.spinner %}
 {% include ui/spinner.html color=false size="sm" class=spinner-class element="span" %}{% endif %}
 {% if include.icon %}{% include ui/icon.html icon=include.icon use-svg=true color=include.icon-color %}{% endif %}

scss/_variables.scss

@@ -51,8 +51,8 @@ $white: #ffffff !default;
 $body-bg: $light !default;
 $body-color: $dark !default;
 
-$text-muted: mix($body-color, #fff, 68%) !default;
-$border-color: rgba(mix($body-color, #fff, 68%), .24) !default;
+$text-muted: mix($body-color, #fff, 70%) !default;
+$border-color: rgba(mix($body-color, #fff, 70%), .24) !default;
 
 $hover-bg: $light-white !default;
 $active-bg: rgba($blue, .06) !default;

scss/fonts/_webfonts.scss

 @if $google-font {
-  $google-font-url: "https://fonts.googleapis.com/css?family=" + str-replace($google-font, " ", "+") + ":300,400,500,600,700" !default;
+  $google-font-url: "https://fonts.googleapis.com/css?family=" + str-replace($google-font, " ", "+") + ":300,400,500,600,700&display=swap" !default;
 
   @import url($google-font-url);
 }