view table sort accessibility updates

web/themes/asc_bootstrap_bux/js/scripts.js

@@ -305,6 +305,25 @@ jQuery(document).ready(function(){
     }
   }
 
+//---------VIEW TABLE SORT ACCESSIBILITY---------//
+  if (jQuery("th[aria-sort='ascending']").length) {
+    var child = jQuery("th[aria-sort='ascending']").children("a").attr('name');
+
+    jQuery("th[aria-sort='ascending']").children("a").attr("aria-pressed","true");
+
+    jQuery("#arialive-viewtable").text("Sort ascending " + child + " column").delay( 1000 );
+  }
+
+  if (jQuery("th[aria-sort='descending']").length) {
+    var child = jQuery("th[aria-sort='descending']").children("a").attr('name');
+
+
+    jQuery("th[aria-sort='descending']").children("a").attr("aria-pressed","true");
+
+    jQuery("#arialive-viewtable").text("Sort descending " + child + " column").delay( 1000 );
+  }
+//-----END VIEW TABLE SORT ACCESSIBILITY---------//
+
 });
 
 // window.addEventListener("load", function(event) {

web/themes/asc_bootstrap_bux/templates/views/views-view-table.html.twig

+{#
+/**
+ * @file
+ * Default theme implementation for displaying a view as a table.
+ *
+ * Available variables:
+ * - attributes: Remaining HTML attributes for the element.
+ *   - class: HTML classes that can be used to style contextually through CSS.
+ * - title : The title of this group of rows.
+ * - header: The table header columns.
+ *   - attributes: Remaining HTML attributes for the element.
+ *   - content: HTML classes to apply to each header cell, indexed by
+ *   the header's key.
+ * - caption_needed: Is the caption tag needed.
+ * - caption: The caption for this table.
+ * - accessibility_description: Extended description for the table details.
+ * - accessibility_summary: Summary for the table details.
+ * - responsive: Whether or not to use the .table-responsive wrapper.
+ * - rows: Table row items. Rows are keyed by row number.
+ *   - attributes: HTML classes to apply to each row.
+ *   - columns: Row column items. Columns are keyed by column number.
+ *     - attributes: HTML classes to apply to each column.
+ *     - content: The column content.
+ * - bordered: Flag indicating whether or not the table should be bordered.
+ * - condensed: Flag indicating whether or not the table should be condensed.
+ * - hover: Flag indicating whether or not table rows should be hoverable.
+ * - striped: Flag indicating whether or not table rows should be striped.
+ * - responsive: Flag indicating whether or not the table should be wrapped to
+ *   be responsive (using the Bootstrap Framework .table-responsive wrapper).
+ *
+ * @ingroup templates
+ *
+ * @see template_preprocess_views_view_table()
+ */
+#}
+{% if responsive %}
+  <div class="table-responsive">
+{% endif %}
+{%
+  set classes = [
+    'table',
+    bordered ? 'table-bordered',
+    condensed ? 'table-condensed',
+    hover ? 'table-hover',
+    striped ? 'table-striped',
+    sticky ? 'sticky-enabled',
+  ]
+%}
+<div aria-live="polite" id="arialive-viewtable" class="sr-only"></div>
+<table{{ attributes.addClass(classes) }}>
+  {% if caption_needed %}
+    <caption class="sr-only">
+      {% if caption %}
+        {{ caption }}
+      {% else %}
+        {{ title }}
+      {% endif %}
+      {% if (summary is not empty) or (description is not empty) %}
+        <details>
+          {% if summary is not empty %}
+            <summary>{{ summary }}</summary>
+          {% endif %}
+          {% if description is not empty %}
+            {{ description }}
+          {% endif %}
+        </details>
+      {% endif %}
+    </caption>
+  {% endif %}
+  {% if header %}
+    <thead>
+    <tr>
+      {% for key, column in header %}
+        {% if column.default_classes %}
+          {%
+          set column_classes = [
+          'views-field',
+          'views-field-' ~ fields[key],
+          ]
+          %}
+        {% endif %}
+      <th{{ column.attributes.addClass(column_classes).setAttribute('scope', 'col') }}>
+        {%- if column.wrapper_element -%}
+          <{{ column.wrapper_element }}>
+          {%- if column.url -%}
+            <a href="{{ column.url }}" title="{{ column.title }}" role="button" name="{{ column.content }}">{{ column.content }}{{ column.sort_indicator }}</a>
+          {%- else -%}
+            {{ column.content }}{{ column.sort_indicator }}
+          {%- endif -%}
+          </{{ column.wrapper_element }}>
+        {%- else -%}
+          {%- if column.url -%}
+            <a href="{{ column.url }}" title="{{ column.title }}" role="button" name="{{ column.content }}">{{ column.content }}{{ column.sort_indicator }}</a>
+          {%- else -%}
+            {{- column.content }}{{ column.sort_indicator }}
+          {%- endif -%}
+        {%- endif -%}
+        </th>
+      {% endfor %}
+    </tr>
+    </thead>
+  {% endif %}
+  <tbody>
+  {% for row in rows %}
+    <tr{{ row.attributes }}>
+      {% for key, column in row.columns %}
+        {% if column.default_classes %}
+          {% set column_classes = [ 'views-field' ] %}
+          {% for field in column.fields %}
+            {% set column_classes = column_classes|merge(['views-field-' ~ field]) %}
+          {% endfor %}
+        {% endif %}
+      <td{{ column.attributes.addClass(column_classes) }}>
+        {%- if column.wrapper_element -%}
+          <{{ column.wrapper_element }}>
+          {% for content in column.content %}
+            {{ content.separator }}{{ content.field_output }}
+          {% endfor %}
+          </{{ column.wrapper_element }}>
+        {%- else -%}
+          {% for content in column.content %}
+            {{- content.separator }}{{ content.field_output -}}
+          {% endfor %}
+        {%- endif %}
+        </td>
+      {% endfor %}
+    </tr>
+  {% endfor %}
+  </tbody>
+</table>
+{% if responsive %}
+  </div>
+{% endif %}