Add aria-sort attribute to the appropriate th
Add the aria-sort attribute to the th of the column by which the data is sorted. This is conceivably useful to let screen readers know how the table is sorted, but it also allows CSS styles to be applied, for example to highlight the sorted column header or to change an icon in the column header to indicate the sort direction. This required breaking the start of the table into separate variables so that the column headers can be addressed individually. This is a step toward being able to reorder (#66) or remove (#133) columns.pull/142/head
Ryan Schmidt
parent
4a6845348b
commit
c07bc573d1
|
|
@ -667,7 +667,7 @@ make_content_buf(
|
|||
ngx_tm_t tm;
|
||||
ngx_array_t entries;
|
||||
ngx_time_t *tp;
|
||||
ngx_uint_t i, j;
|
||||
ngx_uint_t i, j, sort_criterion;
|
||||
ngx_str_t path;
|
||||
ngx_dir_t dir;
|
||||
ngx_buf_t *b;
|
||||
|
|
@ -853,6 +853,14 @@ make_content_buf(
|
|||
len = r->uri.len + escape_html
|
||||
+ ngx_sizeof_ssz(t_body2)
|
||||
+ ngx_sizeof_ssz(t_list_begin)
|
||||
+ ngx_sizeof_ssz(t_list_colhead_name1)
|
||||
+ ngx_sizeof_ssz(t_list_colhead_name2)
|
||||
+ ngx_sizeof_ssz(t_list_colhead_size1)
|
||||
+ ngx_sizeof_ssz(t_list_colhead_size2)
|
||||
+ ngx_sizeof_ssz(t_list_colhead_date1)
|
||||
+ ngx_sizeof_ssz(t_list_colhead_date2)
|
||||
+ ngx_sizeof_ssz(" aria-sort=\"descending\"")
|
||||
+ ngx_sizeof_ssz(t_list_mid)
|
||||
+ ngx_sizeof_ssz(t_parentdir_entry)
|
||||
+ ngx_sizeof_ssz(t_list_end)
|
||||
+ ngx_fancyindex_timefmt_calc_size (&alcf->time_format) * entries.nelts
|
||||
|
|
@ -860,6 +868,14 @@ make_content_buf(
|
|||
else
|
||||
len = r->uri.len + escape_html
|
||||
+ ngx_sizeof_ssz(t_list_begin)
|
||||
+ ngx_sizeof_ssz(t_list_colhead_name1)
|
||||
+ ngx_sizeof_ssz(t_list_colhead_name2)
|
||||
+ ngx_sizeof_ssz(t_list_colhead_size1)
|
||||
+ ngx_sizeof_ssz(t_list_colhead_size2)
|
||||
+ ngx_sizeof_ssz(t_list_colhead_date1)
|
||||
+ ngx_sizeof_ssz(t_list_colhead_date2)
|
||||
+ ngx_sizeof_ssz(" aria-sort=\"descending\"")
|
||||
+ ngx_sizeof_ssz(t_list_mid)
|
||||
+ ngx_sizeof_ssz(t_parentdir_entry)
|
||||
+ ngx_sizeof_ssz(t_list_end)
|
||||
+ ngx_fancyindex_timefmt_calc_size (&alcf->time_format) * entries.nelts
|
||||
|
|
@ -923,44 +939,51 @@ make_content_buf(
|
|||
case 'M': /* Sort by mtime */
|
||||
if (sort_descending) {
|
||||
sort_cmp_func = ngx_http_fancyindex_cmp_entries_mtime_desc;
|
||||
if (alcf->default_sort != NGX_HTTP_FANCYINDEX_SORT_CRITERION_DATE_DESC)
|
||||
sort_criterion = NGX_HTTP_FANCYINDEX_SORT_CRITERION_DATE_DESC;
|
||||
if (sort_criterion != alcf->default_sort)
|
||||
sort_url_args = "?C=M&O=D";
|
||||
}
|
||||
else {
|
||||
sort_cmp_func = ngx_http_fancyindex_cmp_entries_mtime_asc;
|
||||
if (alcf->default_sort != NGX_HTTP_FANCYINDEX_SORT_CRITERION_DATE)
|
||||
sort_criterion = NGX_HTTP_FANCYINDEX_SORT_CRITERION_DATE;
|
||||
if (sort_criterion != alcf->default_sort)
|
||||
sort_url_args = "?C=M&O=A";
|
||||
}
|
||||
break;
|
||||
case 'S': /* Sort by size */
|
||||
if (sort_descending) {
|
||||
sort_cmp_func = ngx_http_fancyindex_cmp_entries_size_desc;
|
||||
if (alcf->default_sort != NGX_HTTP_FANCYINDEX_SORT_CRITERION_SIZE_DESC)
|
||||
sort_criterion = NGX_HTTP_FANCYINDEX_SORT_CRITERION_SIZE_DESC;
|
||||
if (sort_criterion != alcf->default_sort)
|
||||
sort_url_args = "?C=S&O=D";
|
||||
}
|
||||
else {
|
||||
sort_cmp_func = ngx_http_fancyindex_cmp_entries_size_asc;
|
||||
if (alcf->default_sort != NGX_HTTP_FANCYINDEX_SORT_CRITERION_SIZE)
|
||||
sort_url_args = "?C=S&O=A";
|
||||
sort_criterion = NGX_HTTP_FANCYINDEX_SORT_CRITERION_SIZE;
|
||||
if (sort_criterion != alcf->default_sort)
|
||||
sort_url_args = "?C=S&O=A";
|
||||
}
|
||||
break;
|
||||
case 'N': /* Sort by name */
|
||||
default:
|
||||
if (sort_descending) {
|
||||
sort_cmp_func = ngx_http_fancyindex_cmp_entries_name_desc;
|
||||
if (alcf->default_sort != NGX_HTTP_FANCYINDEX_SORT_CRITERION_NAME_DESC)
|
||||
sort_criterion = NGX_HTTP_FANCYINDEX_SORT_CRITERION_NAME_DESC;
|
||||
if (sort_criterion != alcf->default_sort)
|
||||
sort_url_args = "?C=N&O=D";
|
||||
}
|
||||
else {
|
||||
sort_cmp_func = ngx_http_fancyindex_cmp_entries_name_asc;
|
||||
if (alcf->default_sort != NGX_HTTP_FANCYINDEX_SORT_CRITERION_NAME)
|
||||
sort_criterion = NGX_HTTP_FANCYINDEX_SORT_CRITERION_NAME;
|
||||
if (sort_criterion != alcf->default_sort)
|
||||
sort_url_args = "?C=N&O=A";
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
else {
|
||||
switch (alcf->default_sort) {
|
||||
sort_criterion = alcf->default_sort;
|
||||
switch (sort_criterion) {
|
||||
case NGX_HTTP_FANCYINDEX_SORT_CRITERION_DATE_DESC:
|
||||
sort_cmp_func = ngx_http_fancyindex_cmp_entries_mtime_desc;
|
||||
break;
|
||||
|
|
@ -1031,6 +1054,41 @@ make_content_buf(
|
|||
/* Open the <table> tag */
|
||||
b->last = ngx_cpymem_ssz(b->last, t_list_begin);
|
||||
|
||||
/* Write the column headers */
|
||||
b->last = ngx_cpymem_ssz(b->last, t_list_colhead_name1);
|
||||
switch (sort_criterion) {
|
||||
case NGX_HTTP_FANCYINDEX_SORT_CRITERION_NAME_DESC:
|
||||
b->last = ngx_cpymem_ssz(b->last, " aria-sort=\"descending\"");
|
||||
break;
|
||||
case NGX_HTTP_FANCYINDEX_SORT_CRITERION_NAME:
|
||||
b->last = ngx_cpymem_ssz(b->last, " aria-sort=\"ascending\"");
|
||||
break;
|
||||
}
|
||||
b->last = ngx_cpymem_ssz(b->last, t_list_colhead_name2);
|
||||
b->last = ngx_cpymem_ssz(b->last, t_list_colhead_size1);
|
||||
switch (sort_criterion) {
|
||||
case NGX_HTTP_FANCYINDEX_SORT_CRITERION_SIZE_DESC:
|
||||
b->last = ngx_cpymem_ssz(b->last, " aria-sort=\"descending\"");
|
||||
break;
|
||||
case NGX_HTTP_FANCYINDEX_SORT_CRITERION_SIZE:
|
||||
b->last = ngx_cpymem_ssz(b->last, " aria-sort=\"ascending\"");
|
||||
break;
|
||||
}
|
||||
b->last = ngx_cpymem_ssz(b->last, t_list_colhead_size2);
|
||||
b->last = ngx_cpymem_ssz(b->last, t_list_colhead_date1);
|
||||
switch (sort_criterion) {
|
||||
case NGX_HTTP_FANCYINDEX_SORT_CRITERION_DATE_DESC:
|
||||
b->last = ngx_cpymem_ssz(b->last, " aria-sort=\"descending\"");
|
||||
break;
|
||||
case NGX_HTTP_FANCYINDEX_SORT_CRITERION_DATE:
|
||||
b->last = ngx_cpymem_ssz(b->last, " aria-sort=\"ascending\"");
|
||||
break;
|
||||
}
|
||||
b->last = ngx_cpymem_ssz(b->last, t_list_colhead_date2);
|
||||
|
||||
/* Begin the table body */
|
||||
b->last = ngx_cpymem_ssz(b->last, t_list_mid);
|
||||
|
||||
tp = ngx_timeofday();
|
||||
|
||||
/* "Parent dir" entry, always first if displayed */
|
||||
|
|
|
|||
30
template.h
30
template.h
|
|
@ -65,9 +65,26 @@ static const u_char t_list_begin[] = ""
|
|||
"<table id=\"list\">"
|
||||
"<thead>"
|
||||
"<tr>"
|
||||
"<th colspan=\"2\"><a href=\"?C=N&O=A\">File Name</a> <a href=\"?C=N&O=D\"> ↓ </a></th>"
|
||||
"<th><a href=\"?C=S&O=A\">File Size</a> <a href=\"?C=S&O=D\"> ↓ </a></th>"
|
||||
"<th><a href=\"?C=M&O=A\">Date</a> <a href=\"?C=M&O=D\"> ↓ </a></th>"
|
||||
;
|
||||
static const u_char t_list_colhead_name1[] = ""
|
||||
"<th colspan=\"2\""
|
||||
;
|
||||
static const u_char t_list_colhead_name2[] = ""
|
||||
"><a href=\"?C=N&O=A\">File Name</a> <a href=\"?C=N&O=D\"> ↓ </a></th>"
|
||||
;
|
||||
static const u_char t_list_colhead_size1[] = ""
|
||||
"<th"
|
||||
;
|
||||
static const u_char t_list_colhead_size2[] = ""
|
||||
"><a href=\"?C=S&O=A\">File Size</a> <a href=\"?C=S&O=D\"> ↓ </a></th>"
|
||||
;
|
||||
static const u_char t_list_colhead_date1[] = ""
|
||||
"<th"
|
||||
;
|
||||
static const u_char t_list_colhead_date2[] = ""
|
||||
"><a href=\"?C=M&O=A\">Date</a> <a href=\"?C=M&O=D\"> ↓ </a></th>"
|
||||
;
|
||||
static const u_char t_list_mid[] = ""
|
||||
"</tr>"
|
||||
"</thead>"
|
||||
"\n"
|
||||
|
|
@ -96,6 +113,13 @@ static const u_char t_foot[] = ""
|
|||
+ nfi_sizeof_ssz(t_body1) \
|
||||
+ nfi_sizeof_ssz(t_body2) \
|
||||
+ nfi_sizeof_ssz(t_list_begin) \
|
||||
+ nfi_sizeof_ssz(t_list_colhead_name1) \
|
||||
+ nfi_sizeof_ssz(t_list_colhead_name2) \
|
||||
+ nfi_sizeof_ssz(t_list_colhead_size1) \
|
||||
+ nfi_sizeof_ssz(t_list_colhead_size2) \
|
||||
+ nfi_sizeof_ssz(t_list_colhead_date1) \
|
||||
+ nfi_sizeof_ssz(t_list_colhead_date2) \
|
||||
+ nfi_sizeof_ssz(t_list_mid) \
|
||||
+ nfi_sizeof_ssz(t_parentdir_entry) \
|
||||
+ nfi_sizeof_ssz(t_list_end) \
|
||||
+ nfi_sizeof_ssz(t_foot) \
|
||||
|
|
|
|||
|
|
@ -63,9 +63,19 @@
|
|||
<table id="list">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2"><a href="?C=N&O=A">File Name</a> <a href="?C=N&O=D"> ↓ </a></th>
|
||||
<th><a href="?C=S&O=A">File Size</a> <a href="?C=S&O=D"> ↓ </a></th>
|
||||
<th><a href="?C=M&O=A">Date</a> <a href="?C=M&O=D"> ↓ </a></th>
|
||||
<!-- var t_list_colhead_name1 -->
|
||||
<th colspan="2"
|
||||
<!-- var t_list_colhead_name2 -->
|
||||
><a href="?C=N&O=A">File Name</a> <a href="?C=N&O=D"> ↓ </a></th>
|
||||
<!-- var t_list_colhead_size1 -->
|
||||
<th
|
||||
<!-- var t_list_colhead_size2 -->
|
||||
><a href="?C=S&O=A">File Size</a> <a href="?C=S&O=D"> ↓ </a></th>
|
||||
<!-- var t_list_colhead_date1 -->
|
||||
<th
|
||||
<!-- var t_list_colhead_date2 -->
|
||||
><a href="?C=M&O=A">Date</a> <a href="?C=M&O=D"> ↓ </a></th>
|
||||
<!-- var t_list_mid -->
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue