Duplicate ID error when using the date filter multiple times on the same view

Created on 13 September 2023, 10 months ago

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

  1. Create a view and add the exposed date filter twice to the view.
  2. Navigate to the view.
  3. Open Axe development tools and click "Scan All of my page" button.
  4. 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.
πŸ› Bug report
Status

Needs review

Version

2.0

Component

Views Filter

Created by

πŸ‡ΊπŸ‡ΈUnited States TheLoneliestMonk

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

  • Issue created by @TheLoneliestMonk
  • πŸ‡ΊπŸ‡ΈUnited States TheLoneliestMonk

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

  • Open in Jenkins β†’ Open on Drupal.org β†’
    Core: 7.x + Environment: PHP 7.4 & MySQL 5.7
    last update 10 months ago
    82 pass
  • πŸ‡ΊπŸ‡ΈUnited States dmundra Eugene, OR

    I am updating the title and description to clarify the issue.

  • πŸ‡ΊπŸ‡ΈUnited States dmundra Eugene, OR

    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';
    
    
  • Status changed to Needs review 10 months ago
  • πŸ‡ΊπŸ‡ΈUnited States dmundra Eugene, OR
  • πŸ‡ΊπŸ‡ΈUnited States dmundra Eugene, OR
  • πŸ‡ΊπŸ‡ΈUnited States dmundra Eugene, OR
Production build 0.69.0 2024