Browse Source

Fix accessibility issues (#2791) (#2792)

* Fix accessibility issues

* Fix accessibility issues

* Fix accessibility issues
Eduardo de Moura Rodrigues 8 years ago
parent
commit
ce69ae8840

+ 6 - 6
src/bootstrap-table.js

@@ -1066,7 +1066,7 @@
             html.push(sprintf('<button class="btn' +
             html.push(sprintf('<button class="btn' +
                     sprintf(' btn-%s', this.options.buttonsClass) +
                     sprintf(' btn-%s', this.options.buttonsClass) +
                     sprintf(' btn-%s', this.options.iconSize) +
                     sprintf(' btn-%s', this.options.iconSize) +
-                    '" type="button" name="paginationSwitch" title="%s">',
+                    '" type="button" name="paginationSwitch" aria-label="pagination Switch" title="%s">',
                     this.options.formatPaginationSwitch()),
                     this.options.formatPaginationSwitch()),
                 sprintf('<i class="%s %s"></i>', this.options.iconsPrefix, this.options.icons.paginationSwitchDown),
                 sprintf('<i class="%s %s"></i>', this.options.iconsPrefix, this.options.icons.paginationSwitchDown),
                 '</button>');
                 '</button>');
@@ -1076,7 +1076,7 @@
             html.push(sprintf('<button class="btn' +
             html.push(sprintf('<button class="btn' +
                     sprintf(' btn-%s', this.options.buttonsClass) +
                     sprintf(' btn-%s', this.options.buttonsClass) +
                     sprintf(' btn-%s', this.options.iconSize) +
                     sprintf(' btn-%s', this.options.iconSize) +
-                    '" type="button" name="refresh" title="%s">',
+                    '" type="button" name="refresh" aria-label="refresh" title="%s">',
                     this.options.formatRefresh()),
                     this.options.formatRefresh()),
                 sprintf('<i class="%s %s"></i>', this.options.iconsPrefix, this.options.icons.refresh),
                 sprintf('<i class="%s %s"></i>', this.options.iconsPrefix, this.options.icons.refresh),
                 '</button>');
                 '</button>');
@@ -1086,7 +1086,7 @@
             html.push(sprintf('<button class="btn' +
             html.push(sprintf('<button class="btn' +
                     sprintf(' btn-%s', this.options.buttonsClass) +
                     sprintf(' btn-%s', this.options.buttonsClass) +
                     sprintf(' btn-%s', this.options.iconSize) +
                     sprintf(' btn-%s', this.options.iconSize) +
-                    '" type="button" name="toggle" title="%s">',
+                    '" type="button" name="toggle" aria-label="toggle" title="%s">',
                     this.options.formatToggle()),
                     this.options.formatToggle()),
                 sprintf('<i class="%s %s"></i>', this.options.iconsPrefix, this.options.icons.toggle),
                 sprintf('<i class="%s %s"></i>', this.options.iconsPrefix, this.options.icons.toggle),
                 '</button>');
                 '</button>');
@@ -1095,7 +1095,7 @@
         if (this.options.showColumns) {
         if (this.options.showColumns) {
             html.push(sprintf('<div class="keep-open btn-group" title="%s">',
             html.push(sprintf('<div class="keep-open btn-group" title="%s">',
                     this.options.formatColumns()),
                     this.options.formatColumns()),
-                '<button type="button" class="btn' +
+                '<button type="button" aria-label="columns" class="btn' +
                 sprintf(' btn-%s', this.options.buttonsClass) +
                 sprintf(' btn-%s', this.options.buttonsClass) +
                 sprintf(' btn-%s', this.options.iconSize) +
                 sprintf(' btn-%s', this.options.iconSize) +
                 ' dropdown-toggle" data-toggle="dropdown">',
                 ' dropdown-toggle" data-toggle="dropdown">',
@@ -1116,7 +1116,7 @@
                 var checked = column.visible ? ' checked="checked"' : '';
                 var checked = column.visible ? ' checked="checked"' : '';
 
 
                 if (column.switchable) {
                 if (column.switchable) {
-                    html.push(sprintf('<li>' +
+                    html.push(sprintf('<li role="menuitem">' +
                         '<label><input type="checkbox" data-field="%s" value="%s"%s> %s</label>' +
                         '<label><input type="checkbox" data-field="%s" value="%s"%s> %s</label>' +
                         '</li>', column.field, i, checked, column.title));
                         '</li>', column.field, i, checked, column.title));
                     switchableCount++;
                     switchableCount++;
@@ -1392,7 +1392,7 @@
                     } else {
                     } else {
                         active = page === that.options.pageSize ? ' class="active"' : '';
                         active = page === that.options.pageSize ? ' class="active"' : '';
                     }
                     }
-                    pageNumber.push(sprintf('<li%s><a href="javascript:void(0)">%s</a></li>', active, page));
+                    pageNumber.push(sprintf('<li role="menuitem"%s><a href="javascript:void(0)">%s</a></li>', active, page));
                 }
                 }
             });
             });
             pageNumber.push('</ul></span>');
             pageNumber.push('</ul></span>');

+ 2 - 2
src/extensions/export/bootstrap-table-export.js

@@ -58,7 +58,7 @@
                         '<button class="btn' +
                         '<button class="btn' +
                             sprintf(' btn-%s', this.options.buttonsClass) +
                             sprintf(' btn-%s', this.options.buttonsClass) +
                             sprintf(' btn-%s', this.options.iconSize) +
                             sprintf(' btn-%s', this.options.iconSize) +
-                            ' dropdown-toggle" ' +
+                            ' dropdown-toggle" aria-label="export type" ' +
                             'title="' + this.options.formatExport() + '" ' +
                             'title="' + this.options.formatExport() + '" ' +
                             'data-toggle="dropdown" type="button">',
                             'data-toggle="dropdown" type="button">',
                             sprintf('<i class="%s %s"></i> ', this.options.iconsPrefix, this.options.icons.export),
                             sprintf('<i class="%s %s"></i> ', this.options.iconsPrefix, this.options.icons.export),
@@ -81,7 +81,7 @@
                 }
                 }
                 $.each(exportTypes, function (i, type) {
                 $.each(exportTypes, function (i, type) {
                     if (TYPE_NAME.hasOwnProperty(type)) {
                     if (TYPE_NAME.hasOwnProperty(type)) {
-                        $menu.append(['<li data-type="' + type + '">',
+                        $menu.append(['<li role="menuitem" data-type="' + type + '">',
                                 '<a href="javascript:void(0)">',
                                 '<a href="javascript:void(0)">',
                                     TYPE_NAME[type],
                                     TYPE_NAME[type],
                                 '</a>',
                                 '</a>',

+ 2 - 2
src/extensions/toolbar/bootstrap-table-toolbar.js

@@ -108,7 +108,7 @@
     $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales);
     $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales);
 
 
     var BootstrapTable = $.fn.bootstrapTable.Constructor,
     var BootstrapTable = $.fn.bootstrapTable.Constructor,
-        _initToolbar = BootstrapTable.prototype.initToolbar,        
+        _initToolbar = BootstrapTable.prototype.initToolbar,
         _load = BootstrapTable.prototype.load,
         _load = BootstrapTable.prototype.load,
         _initSearch = BootstrapTable.prototype.initSearch;
         _initSearch = BootstrapTable.prototype.initSearch;
 
 
@@ -131,7 +131,7 @@
             html = [];
             html = [];
 
 
         html.push(sprintf('<div class="columns columns-%s btn-group pull-%s" role="group">', this.options.buttonsAlign, this.options.buttonsAlign));
         html.push(sprintf('<div class="columns columns-%s btn-group pull-%s" role="group">', this.options.buttonsAlign, this.options.buttonsAlign));
-        html.push(sprintf('<button class="btn btn-default%s' + '" type="button" name="advancedSearch" title="%s">', that.options.iconSize === undefined ? '' : ' btn-' + that.options.iconSize, that.options.formatAdvancedSearch()));
+        html.push(sprintf('<button class="btn btn-default%s' + '" type="button" name="advancedSearch" aria-label="advanced search" title="%s">', that.options.iconSize === undefined ? '' : ' btn-' + that.options.iconSize, that.options.formatAdvancedSearch()));
         html.push(sprintf('<i class="%s %s"></i>', that.options.iconsPrefix, that.options.icons.advancedSearchIcon))
         html.push(sprintf('<i class="%s %s"></i>', that.options.iconsPrefix, that.options.icons.advancedSearchIcon))
         html.push('</button></div>');
         html.push('</button></div>');