Browse Source

Fix Accessibility keyboard when sorting with <th>

Fix #1393
Example: http://jsfiddle.net/e3nk137y/3061/
Dennis Hernández 10 years ago
parent
commit
7e489d06cd
1 changed files with 11 additions and 1 deletions
  1. 11 1
      src/bootstrap-table.js

+ 11 - 1
src/bootstrap-table.js

@@ -710,6 +710,7 @@
                     sprintf(' rowspan="%s"', column.rowspan),
                     sprintf(' colspan="%s"', column.colspan),
                     sprintf(' data-field="%s"', column.field),
+                    "tabindex='0'",
                     '>');
 
                 html.push(sprintf('<div class="th-inner %s">', that.options.sortable && column.sortable ?
@@ -748,6 +749,15 @@
             }
         });
 
+        this.$container.find("th").off('keypress').on('keypress', function (event) {
+            if (that.options.sortable && $(this).data().sortable) {
+                var code = event.keyCode || event.which;
+                if(code == 13) { //Enter keycode
+                    that.onSort(event);
+                }
+            }
+        });
+
         if (!this.options.showHeader || this.options.cardView) {
             this.$header.hide();
             this.$tableHeader.hide();
@@ -861,7 +871,7 @@
     };
 
     BootstrapTable.prototype.onSort = function (event) {
-        var $this = $(event.currentTarget).parent(),
+        var $this = event.type === "keypress" ? $(event.currentTarget) : $(event.currentTarget).parent(),
             $this_ = this.$header.find('th').eq($this.index());
 
         this.$header.add(this.$header_).find('span.order').remove();