Implement comprehensive WCAG 2.1 AA accessibility compliance

resources/assets/v2/src/js/accessibility.js

@@ -0,0 +1,72 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const sidebarToggle = document.querySelector('.sidebar-toggle');
+    if (sidebarToggle) {
+        sidebarToggle.addEventListener('click', function() {
+            const isExpanded = this.getAttribute('aria-expanded') === 'true';
+            this.setAttribute('aria-expanded', !isExpanded);
+        });
+    }
+
+    const treeviewLinks = document.querySelectorAll('.treeview > a');
+    treeviewLinks.forEach(function(link) {
+        link.addEventListener('click', function(e) {
+            e.preventDefault();
+            const isExpanded = this.getAttribute('aria-expanded') === 'true';
+            this.setAttribute('aria-expanded', !isExpanded);
+
+            const submenu = this.nextElementSibling;
+            if (submenu && submenu.classList.contains('treeview-menu')) {
+                submenu.style.display = isExpanded ? 'none' : 'block';
+            }
+        });
+    });
+
+    const modals = document.querySelectorAll('.modal');
+    modals.forEach(function(modal) {
+        modal.addEventListener('shown.bs.modal', function() {
+            const firstFocusable = modal.querySelector('input, button, select, textarea, [tabindex]:not([tabindex="-1"])');
+            if (firstFocusable) {
+                firstFocusable.focus();
+            }
+        });
+
+        modal.addEventListener('hidden.bs.modal', function() {
+            const trigger = document.querySelector('[data-target="#' + modal.id + '"]');
+            if (trigger) {
+                trigger.focus();
+            }
+        });
+    });
+
+    function announceToScreenReader(message) {
+        const announcement = document.createElement('div');
+        announcement.setAttribute('aria-live', 'polite');
+        announcement.setAttribute('aria-atomic', 'true');
+        announcement.className = 'sr-only';
+        announcement.textContent = message;
+        document.body.appendChild(announcement);
+
+        setTimeout(function() {
+            document.body.removeChild(announcement);
+        }, 1000);
+    }
+
+    const forms = document.querySelectorAll('form');
+    forms.forEach(function(form) {
+        form.addEventListener('submit', function(e) {
+            const errors = form.querySelectorAll('.text-danger[role="alert"]');
+            if (errors.length > 0) {
+                announceToScreenReader('Form has ' + errors.length + ' error' + (errors.length > 1 ? 's' : '') + '. Please review and correct.');
+            }
+        });
+    });
+
+    document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape') {
+            const openModals = document.querySelectorAll('.modal.in, .modal.show');
+            openModals.forEach(function(modal) {
+                $(modal).modal('hide');
+            });
+        }
+    });
+});

resources/assets/v2/src/sass/app.scss

@@ -48,7 +48,20 @@ $success: #64B624 !default;
 
 
 // some local CSS
-.skip-links {display: none;}
+.skip-links {
+    position: absolute;
+    left: -9999px;
+    z-index: 999999;
+    padding: 8px 16px;
+    background: #000;
+    color: #fff;
+    text-decoration: none;
+    border-radius: 3px;
+}
+.skip-links:focus {
+    left: 6px;
+    top: 7px;
+}
 
 /*
 Remove bottom margin from unstyled lists
@@ -80,6 +93,59 @@ h3.hover-expand:hover {
     appearance: auto;
 }
 
+.form-control:focus {
+    outline: 2px solid #1E6581;
+    outline-offset: 2px;
+}
+
+.btn:focus {
+    outline: 2px solid #1E6581;
+    outline-offset: 2px;
+}
+
+a:focus {
+    outline: 2px solid #1E6581;
+    outline-offset: 2px;
+}
+
+.sidebar-toggle:focus {
+    outline: 2px solid #1E6581;
+    outline-offset: 2px;
+}
+
+.treeview > a:focus {
+    outline: 2px solid #1E6581;
+    outline-offset: 2px;
+}
+
+.modal:focus {
+    outline: none;
+}
+
+.modal-content {
+    outline: 2px solid #1E6581;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    * {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}
+
+.sr-only {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+}
+
 // edit buttons
 .hidden-edit-button {
     cursor: pointer;

resources/views/accounts/create.twig

@@ -3,6 +3,8 @@
     {{ Breadcrumbs.render(Route.getCurrentRoute.getName, objectType) }}
 {% endblock %}
 {% block content %}
+    <h1>{{ ('create_new_' ~ objectType ~ '_account')|_ }}</h1>
+
     <!-- set location data high up -->
     <script type="text/javascript" nonce="{{ JS_NONCE }}">
         var locations = {{ locations|json_encode|raw }};

resources/views/accounts/delete.twig

@@ -13,7 +13,7 @@
             <div class="col-lg-6 col-lg-offset-3 col-md-12 col-sm-12">
                 <div class="box box-danger">
                     <div class="box-header with-border">
-                        <h3 class="box-title">{{ trans('form.delete_account', {'name': account.name}) }}</h3>
+                        <h1 class="box-title">{{ trans('form.delete_account', {'name': account.name}) }}</h1>
                     </div>
                     <div class="box-body">
                         <p class="text-danger">

resources/views/accounts/edit.twig

@@ -11,6 +11,8 @@
         var mapboxToken = "{{ config('firefly.mapbox_api_key') }}";
     </script>
 
+    <h1 class="sr-only">{{ ('edit_' ~ objectType ~ '_account')|_ }}</h1>
+
     <form method="post" action="{{ route('accounts.update',account.id) }}" class="form-horizontal"
           accept-charset="UTF-8"
           enctype="multipart/form-data">
@@ -23,7 +25,7 @@
             <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                 <div class="box box-primary">
                     <div class="box-header with-border">
-                        <h3 class="box-title">{{ 'mandatoryFields'|_ }}</h3>
+                        <h2 class="box-title">{{ 'mandatoryFields'|_ }}</h2>
                     </div>
                     <div class="box-body">
                         {{ ExpandedForm.text('name', account.name) }}
@@ -50,7 +52,7 @@
             <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                 <div class="box">
                     <div class="box-header with-border">
-                        <h3 class="box-title">{{ 'optionalFields'|_ }}</h3>
+                        <h2 class="box-title">{{ 'optionalFields'|_ }}</h2>
                     </div>
                     <div class="box-body">
                         {{ ExpandedForm.text('iban', account.iban) }}
@@ -87,7 +89,7 @@
                 {% if preFilled.account_role == 'ccAsset' %}
                     <div class="box">
                         <div class="box-header with-border">
-                            <h3 class="box-title">{{ 'credit_card_options'|_ }}</h3>
+                            <h2 class="box-title">{{ 'credit_card_options'|_ }}</h2>
                         </div>
                         <div class="box-body">
                             {{ ExpandedForm.select('cc_type',Config.get('firefly.ccTypes')) }}
@@ -102,7 +104,7 @@
                 {# panel for options  #}
                 <div class="box">
                     <div class="box-header with-border">
-                        <h3 class="box-title">{{ 'options'|_ }}</h3>
+                        <h2 class="box-title">{{ 'options'|_ }}</h2>
                     </div>
                     <div class="box-body">
                         {{ ExpandedForm.optionsList('update','account') }}

resources/views/accounts/index.twig

@@ -10,9 +10,9 @@
             <div class="col-lg-12 col-md-12 col-sm-12">
                 <div class="box" id="account-index-{{ objectType }}">
                     <div class="box-header with-border">
-                        <h3 class="box-title">
+                        <h1 class="box-title">
                             {{ subTitle }}
-                        </h3>
+                        </h1>
                         <div class="box-tools pull-right">
                             <div class="btn-group">
                                 <button class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><span class="fa fa-ellipsis-v"></span></button>

resources/views/accounts/reconcile/index.twig

@@ -10,14 +10,14 @@
         <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
             <div class="box">
                 <div class="box-header with-border">
-                    <h3 class="box-title">{{ 'reconcile_range'|_ }}</h3>
+                    <h1 class="box-title">{{ 'reconcile_range'|_ }}</h1>
                 </div>
                 <div class="box-body no-padding">
-                    <table class="table table-hover">
+                    <table class="table table-hover" aria-label="{{ 'reconcile_balance_table'|_ }}">
                         <thead>
                         <tr>
-                            <th colspan="2" style="width:50%;">{{ 'start_balance'|_ }}</th>
-                            <th colspan="2">{{ 'end_balance'|_ }}</th>
+                            <th colspan="2" style="width:50%;" scope="colgroup">{{ 'start_balance'|_ }}</th>
+                            <th colspan="2" scope="colgroup">{{ 'end_balance'|_ }}</th>
                         </tr>
                         </thead>
                         <tbody>
@@ -92,7 +92,7 @@
         <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
             <div class="box">
                 <div class="box-header with-border">
-                    <h3 class="box-title">{{ 'reconcile_options'|_ }}</h3>
+                    <h2 class="box-title">{{ 'reconcile_options'|_ }}</h2>
                 </div>
                 <div class="box-body">
                     <p class="lead" id="difference"></p>
@@ -110,7 +110,7 @@
         <div class="col-lg-12 col-md-12 col-sm-12">
             <div class="box">
                 <div class="box-header with-border">
-                    <h3 class="box-title">{{ 'transactions'|_ }}</h3>
+                    <h2 class="box-title">{{ 'transactions'|_ }}</h2>
                 </div>
                 <div class="box-body">
                     <div id="transactions_holder">

resources/views/accounts/reconcile/overview.twig

@@ -19,11 +19,18 @@
                     <input type="hidden" name="journals[]" value="{{ id }}"/>
                 {% endfor %}
 
-                <table class="table table-striped table-bordered">
-                    <tr>
-                        <td>{{ 'submitted_start_balance'|_ }} ({{ start.isoFormat(monthAndDayFormat) }})</td>
-                        <td>{{ formatAmountByAccount(account, startBalance) }}</td>
-                    </tr>
+                <table class="table table-striped table-bordered" aria-label="{{ 'reconciliation_summary'|_ }}">
+                    <thead>
+                        <tr>
+                            <th scope="col">{{ 'description'|_ }}</th>
+                            <th scope="col">{{ 'amount'|_ }}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>{{ 'submitted_start_balance'|_ }} ({{ start.isoFormat(monthAndDayFormat) }})</td>
+                            <td>{{ formatAmountByAccount(account, startBalance) }}</td>
+                        </tr>
                     <tr>
                         <td>{{ trans('firefly.selected_transactions', {count: selectedIds|length}) }}</td>
                         <td>{{ formatAmountByAccount(account, amount) }}</td>
@@ -49,6 +56,7 @@
                         </td>
 
                     </tr>
+                    </tbody>
                 </table>
                 <p>
                     {% if diffCompare > 0 %}

resources/views/accounts/reconcile/show.twig

@@ -24,26 +24,26 @@
 
                 </div>
                 <div class="box-body no-padding">
-                    <table class="table table-hover">
+                    <table class="table table-hover" aria-label="{{ 'transaction_journal_information'|_ }}">
                         <tbody>
                         <tr>
-                            <td>{{ trans('list.type') }}</td>
+                            <th scope="row">{{ trans('list.type') }}</th>
                             <td>{{ journal.transactiontype.type|_ }}</td>
                         </tr>
                         <tr>
-                            <td>{{ trans('list.description') }}</td>
+                            <th scope="row">{{ trans('list.description') }}</th>
                             <td>{{ journal.description }}</td>
                         </tr>
                         {# total amount #}
                         <tr>
-                            <td>{{ 'total_amount'|_ }}</td>
+                            <th scope="row">{{ 'total_amount'|_ }}</th>
                             <td>
                                 {{ formatAmountByAccount(transaction.account, transaction.amount) }}
 
                             </td>
                         </tr>
                         <tr>
-                            <td style="width:30%;">{{ trans('list.date') }}</td>
+                            <th scope="row" style="width:30%;">{{ trans('list.date') }}</th>
                             <td>{{ journal.date.isoFormat(monthAndDayFormat) }}</td>
                         </tr>
                         </tbody>
@@ -67,21 +67,21 @@
                     <h3 class="box-title">{{ 'transaction_journal_meta'|_ }}</h3>
                 </div>
                 <div class="box-body no-padding">
-                    <table class="table table-responsive table-hover">
+                    <table class="table table-responsive table-hover" aria-label="{{ 'transaction_journal_meta'|_ }}">
                         <tbody>
                         {#
                         <tr>
-                            <td>{{ 'categories'|_ }}</td>
+                            <th scope="row">{{ 'categories'|_ }}</th>
                             <td>{{ journalCategories(journal)|raw }}</td>
                         </tr>
                         #}
                         {% if journal.tags|length > 0 %}
                             <tr>
-                                <td>{{ 'tags'|_ }}</td>
+                                <th scope="row">{{ 'tags'|_ }}</th>
                                 <td>
                                     {% for tag in journal.tags %}
 
-                                        <h4 style="display: inline;"><a class="label label-success" href="{{ route('tags.show',tag) }}">
+                                        <span style="display: inline;"><a class="label label-success" href="{{ route('tags.show',tag) }}">
                                                 {% if tag.tag_mode == 'nothing' %}
                                                     <span class="fa fa-fw fa-tag"></span>
                                                 {% endif %}
@@ -92,7 +92,7 @@
                                                     <span class="fa fa-fw fa-sort-numeric-desc"></span>
                                                 {% endif %}
                                                 {{ tag.tag }}</a>
-                                        </h4>
+                                        </span>
                                     {% endfor %}
                                 </td>
                             </tr>

resources/views/accounts/reconcile/transactions.twig

@@ -1,15 +1,15 @@
-<table class="table table-striped table-condensed">
+<table class="table table-striped table-condensed" aria-label="{{ trans('firefly.reconcile_transactions_table') }}">
     <thead>
     <tr class="ignore">
-        <th class="hidden-xs" colspan="2">&nbsp;</th>
-        <th>{{ trans('list.description') }}</th>
-        <th style="text-align:right;">{{ trans('list.amount') }}</th>
-        <th class="hidden-xs hidden-sm hidden-md">{{ trans('list.reconcile') }}</th>
-        <th class="hidden-xs hidden-sm">{{ trans('list.date') }}</th>
-        <th class="hidden-xs hidden-sm hidden-md">{{ trans('list.from') }}</th>
-        <th class="hidden-xs hidden-sm hidden-md">{{ trans('list.to') }}</th>
-        <th class="hidden-xs"><span class="fa fa-pie-chart fa-fw" title="{{ trans('list.budget') }}"></span></th>
-        <th class="hidden-xs"><span class="fa fa-bookmark fa-fw" title="{{ trans('list.category') }}"></span></th>
+        <th class="hidden-xs" colspan="2" scope="col">&nbsp;</th>
+        <th scope="col">{{ trans('list.description') }}</th>
+        <th scope="col" style="text-align:right;">{{ trans('list.amount') }}</th>
+        <th class="hidden-xs hidden-sm hidden-md" scope="col">{{ trans('list.reconcile') }}</th>
+        <th class="hidden-xs hidden-sm" scope="col">{{ trans('list.date') }}</th>
+        <th class="hidden-xs hidden-sm hidden-md" scope="col">{{ trans('list.from') }}</th>
+        <th class="hidden-xs hidden-sm hidden-md" scope="col">{{ trans('list.to') }}</th>
+        <th class="hidden-xs" scope="col"><span class="fa fa-pie-chart fa-fw" title="{{ trans('list.budget') }}" aria-hidden="true"></span><span class="sr-only">{{ trans('list.budget') }}</span></th>
+        <th class="hidden-xs" scope="col"><span class="fa fa-bookmark fa-fw" title="{{ trans('list.category') }}" aria-hidden="true"></span><span class="sr-only">{{ trans('list.category') }}</span></th>
     </tr>
     </thead>
     <tbody>