Duplicate ID error when using the date filter multiple times on the same view [#3387092]

Problem/Motivation

A view with more than one exposed date filter creates a non-unique ids when generating the HTML wrappers for the filter fields; this generates an accessibility error when checking for accessibility issues with AXE Development Tools.

By default the view will increment the filter identifier. The first one is 'date_filter' and next one is 'date_filter_1'. However that identifier does not get applied to the wrappers and those use the field instead.

The ids are generated in the date_views/includes/date_views_filter_handler_simple.inc file, specifically in the date_parts_form() function.

Steps to reproduce

Create a view and add the exposed date filter twice to the view.
Navigate to the view.
Open Axe development tools and click "Scan All of my page" button.
Should see an error stating Id attribute value must be unique.

Proposed resolution

Use the $identifier parameter to the date_parts_form() function to create the id.
When an id is created check if one of the same name already exists add an extension to the string.
Allow users to define an id to be used in the view.

Remaining tasks

Test the patch. - Done
Review the patch.

Comment	File	Size	Author
#2	a11y_dupe_ids-3387092-2.patch	806 bytes	theloneliestmonk

Comments

Comment #1

13 September 2023 at 15:24

TheLoneliestMonk created an issue. See original summary.

Comment #2

theloneliestmonk commented 13 September 2023 at 15:43

Status	File	Size
new	a11y_dupe_ids-3387092-2.patch	806 bytes

Here is a patch using the proposed solution of using the $identifier parameter instead of the object "field" value.

Comment #3

dmundra

he/him

English

commented 13 September 2023 at 18:33

Title:	a11y_dupe_ids	» Duplicate ID error when using the date filter multiple times on the same view
Issue summary:	View changes

I updated the title and description to clarify the problem.

Comment #4

dmundra

he/him

English

commented 13 September 2023 at 18:37

Status:

Active

» Needs review

Here is a basic view that could be used to test the issue. In the view we add the date filter twice (one to filter on post date and another for the updated date).

I tested the patch and it fixes the issue for me.

$view = new view();
$view->name = 'date_filter_test';
$view->description = '';
$view->tag = 'default';
$view->base_table = 'node';
$view->human_name = 'Date filter test';
$view->core = 7;
$view->api_version = '3.0';
$view->disabled = FALSE; /* Edit this to true to make a default view disabled initially */

/* Display: Master */
$handler = $view->new_display('default', 'Master', 'default');
$handler->display->display_options['title'] = 'Date filter test';
$handler->display->display_options['use_more_always'] = FALSE;
$handler->display->display_options['access']['type'] = 'perm';
$handler->display->display_options['cache']['type'] = 'none';
$handler->display->display_options['query']['type'] = 'views_query';
$handler->display->display_options['exposed_form']['type'] = 'basic';
$handler->display->display_options['pager']['type'] = 'none';
$handler->display->display_options['style_plugin'] = 'table';
/* Field: Content: Title */
$handler->display->display_options['fields']['title']['id'] = 'title';
$handler->display->display_options['fields']['title']['table'] = 'node';
$handler->display->display_options['fields']['title']['field'] = 'title';
$handler->display->display_options['fields']['title']['alter']['word_boundary'] = FALSE;
$handler->display->display_options['fields']['title']['alter']['ellipsis'] = FALSE;
/* Field: Content: Post date */
$handler->display->display_options['fields']['created']['id'] = 'created';
$handler->display->display_options['fields']['created']['table'] = 'node';
$handler->display->display_options['fields']['created']['field'] = 'created';
$handler->display->display_options['fields']['created']['date_format'] = 'long';
$handler->display->display_options['fields']['created']['second_date_format'] = 'long';
/* Field: Content: Updated date */
$handler->display->display_options['fields']['changed']['id'] = 'changed';
$handler->display->display_options['fields']['changed']['table'] = 'node';
$handler->display->display_options['fields']['changed']['field'] = 'changed';
$handler->display->display_options['fields']['changed']['date_format'] = 'long';
$handler->display->display_options['fields']['changed']['second_date_format'] = 'long';
/* Sort criterion: Content: Title */
$handler->display->display_options['sorts']['title']['id'] = 'title';
$handler->display->display_options['sorts']['title']['table'] = 'node';
$handler->display->display_options['sorts']['title']['field'] = 'title';
$handler->display->display_options['sorts']['title']['order'] = 'DESC';
/* Filter criterion: Content: Published status */
$handler->display->display_options['filters']['status']['id'] = 'status';
$handler->display->display_options['filters']['status']['table'] = 'node';
$handler->display->display_options['filters']['status']['field'] = 'status';
$handler->display->display_options['filters']['status']['value'] = 1;
$handler->display->display_options['filters']['status']['group'] = 1;
$handler->display->display_options['filters']['status']['expose']['operator'] = FALSE;
/* Filter criterion: Content: Type */
$handler->display->display_options['filters']['type']['id'] = 'type';
$handler->display->display_options['filters']['type']['table'] = 'node';
$handler->display->display_options['filters']['type']['field'] = 'type';
$handler->display->display_options['filters']['type']['value'] = array(
  'page' => 'page',
);
/* Filter criterion: Date: Date (node) */
$handler->display->display_options['filters']['date_filter']['id'] = 'date_filter';
$handler->display->display_options['filters']['date_filter']['table'] = 'node';
$handler->display->display_options['filters']['date_filter']['field'] = 'date_filter';
$handler->display->display_options['filters']['date_filter']['operator'] = 'between';
$handler->display->display_options['filters']['date_filter']['exposed'] = TRUE;
$handler->display->display_options['filters']['date_filter']['expose']['operator_id'] = 'date_filter_op';
$handler->display->display_options['filters']['date_filter']['expose']['label'] = 'Filter by post date';
$handler->display->display_options['filters']['date_filter']['expose']['use_operator'] = TRUE;
$handler->display->display_options['filters']['date_filter']['expose']['operator'] = 'date_filter_op';
$handler->display->display_options['filters']['date_filter']['expose']['identifier'] = 'date_filter';
$handler->display->display_options['filters']['date_filter']['expose']['remember_roles'] = array(
  2 => '2',
);
$handler->display->display_options['filters']['date_filter']['date_fields'] = array(
  'node.created' => 'node.created',
);
/* Filter criterion: Date: Date (node) */
$handler->display->display_options['filters']['date_filter_1']['id'] = 'date_filter_1';
$handler->display->display_options['filters']['date_filter_1']['table'] = 'node';
$handler->display->display_options['filters']['date_filter_1']['field'] = 'date_filter';
$handler->display->display_options['filters']['date_filter_1']['operator'] = 'between';
$handler->display->display_options['filters']['date_filter_1']['exposed'] = TRUE;
$handler->display->display_options['filters']['date_filter_1']['expose']['operator_id'] = 'date_filter_1_op';
$handler->display->display_options['filters']['date_filter_1']['expose']['label'] = 'Filter by updated date';
$handler->display->display_options['filters']['date_filter_1']['expose']['use_operator'] = TRUE;
$handler->display->display_options['filters']['date_filter_1']['expose']['operator'] = 'date_filter_1_op';
$handler->display->display_options['filters']['date_filter_1']['expose']['identifier'] = 'date_filter_1';
$handler->display->display_options['filters']['date_filter_1']['expose']['remember_roles'] = array(
  2 => '2',
);
$handler->display->display_options['filters']['date_filter_1']['date_fields'] = array(
  'node.changed' => 'node.changed',
);

/* Display: Page */
$handler = $view->new_display('page', 'Page', 'page');
$handler->display->display_options['path'] = 'date-filter-test';