Problem/Motivation

During the usability sessions, some participants confused the filter form items with the 'add content' action link.

Some participants started to fill out the form items, and then pressed 'Add content', thinking they were creating content of that type and title.

Proposed resolution

Wrap the form items in a fieldset titled 'filter', to visually encapsulate the form.

Remaining tasks

  1. Design review
  2. Implement the suggestions
  3. Test

User interface changes

Clearer tabs for the content type pages

API changes

None

Data model changes

None

Comments

pguillard’s picture

I guess we should do the same for "add people" in the people adminitration page (/admin/people)

I can't figure out how to add a fieldset there, for this specific view filter. However it would be easy with CSS.

pguillard’s picture

Hum... my solution looks more like a hack, but it works, and it seems it doesn't break the tests.
Any hints appreciated !

screenshot

pguillard’s picture

Status: Active » Needs review

Status: Needs review » Needs work
lewisnyman’s picture

Component: node system » views.module
Issue tags: +VDC, +Accessibility

Thanks for working on this. This adds a fieldset around all views exposed filters but that seems to have the desired affect. Is it possible to move the submit button inside the fieldset as well?

Also tagging with accessibility because it affects accessibility.

pguillard’s picture

Status: Needs work » Needs review
StatusFileSize
new3.11 KB
new1.17 KB
new16.22 KB

I moved the submit button inside the fieldset as well (both Apply and Reset).
But again, it must be improved !

filters-screenshot.png (

Status: Needs review » Needs work
pguillard’s picture

Status: Needs work » Needs review
StatusFileSize
new434 bytes

I didn't succeed to troubleshoot the tests.. And the fieldset is applied for any views filter..With many impacts, and maybe.. bugs.
So I think there is a better solution : CSS. No impact. And the result is the one we want.

Here is the patch, without interdiff, cause it is a new one.

dawehner’s picture

Ha, I like the fact that we might just need to use CSS, not sure though whether this would be okay accessibility wise.
@pguillard Do you maybe know more about that?

+++ b/core/modules/views/src/Form/ViewsExposedForm.php
@@ -80,6 +80,12 @@ public function buildForm(array $form, FormStateInterface $form_state) {
+    $form['filter'] = array(
+      '#type' => 'fieldset',
+      '#title' => t('Filter'),
+      '#collapsible' => TRUE,
+      '#collapsed' => FALSE,
+    );

I certainly think we should not add a fieldset to the markup for all views. This is a special case potentially here

pguillard’s picture

In terms of accessibility, I guess we bring nothing and remove nothing.

mgifford’s picture

Issue tags: -Accessibility

Looks that way. Seems like a good UX improvement though.

pguillard’s picture

I would say RTBC ?

lewisnyman’s picture

Status: Needs review » Needs work

Instead of copying the CSS, I would prefer it if we could add a reusable class. That is inline with our CSS standards. Would that be possible?

lewisnyman’s picture

pguillard’s picture

@LewisNyman : should I go for #14 or wait for the pane task and #15 ?

lunk rat’s picture

This same issue came up again today in another usability test at UMN.

pguillard’s picture

Status: Needs work » Needs review
StatusFileSize
new531 bytes

A new patch with extra CSS in classy/css/exposed-filters.css which I think is much better (Anyway #9 was not applying anymore).
I could also add an extra class, "views-exposed-wrapper" for instance.

pguillard’s picture

Issue tags: -UMN 2015

Version: 8.0.x-dev » 8.1.x-dev

Drupal 8.0.6 was released on April 6 and is the final bugfix release for the Drupal 8.0.x series. Drupal 8.0.x will not receive any further development aside from security fixes. Drupal 8.1.0-rc1 is now available and sites should prepare to update to 8.1.0.

Bug reports should be targeted against the 8.1.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

leandro713’s picture

Status: Needs review » Reviewed & tested by the community
StatusFileSize
new27.93 KB
new23.94 KB

i've applied patch #18, the interface looks now much more clear

BEFORE
before patch
AFTER
before patch

yoroy’s picture

Version: 8.1.x-dev » 8.2.x-dev
Status: Reviewed & tested by the community » Needs work
StatusFileSize
new89.33 KB

I looked at how field sets are used elsewhere in core admin and I'm only finding collapsible ones. Even found a similar interface for URL aliases:

(I don't think the blue Filter button is a good idea there)

So maybe we should make this a collapsible fieldset as well with a title of "Filter content".

leandro713’s picture

Also, i would include the below section «with selection» into the fieldset or would create another fieldset for this.

The title of the first fieldset would be «FILTER CONTENT», as stated @yoroy
The title of the second fieldset would be «MODIFY CONTENT»

yoroy’s picture

Issue tags: -VDC +sprint
yoroy’s picture

Issue tags: +VDC
yoroy’s picture

Issue tags: +ux-hierarchy
yoroy’s picture

pguillard’s picture

Status: Needs work » Needs review
StatusFileSize
new3.19 KB
new1.71 KB

I just try to revive this issue :

So #18 was made with CSS changes
I got back to #7 with a form filter.

pguillard’s picture

Issue tags: +DevDaysMilan

Status: Needs review » Needs work
pguillard’s picture

Status: Needs work » Needs review
StatusFileSize
new2.49 KB
new2.49 KB

Tets will not pass, but it should be slightly better..

Status: Needs review » Needs work

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.0-beta1 was released on August 3, 2016, which means new developments and disruptive changes should now be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

yoroy’s picture

Issue tags: +Dublin2016
tomatkins’s picture

I am working on this issue at Drupalcon Dublin. Reconfiguring initial GIT configuration (I cloned 8.3.x., at the sprint. According to documentation I need to be working off of 8.3.0-dev. Submitting patch to this issue or to https://www.drupal.org/node/2785051 by COB today Saturday Oct.1.)

tomatkins’s picture

Patch submitted on other "similar issue" - https://www.drupal.org/node/2785051 - This current issue remains.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.0-alpha1 will be released the week of January 30, 2017, which means new developments and disruptive changes should now be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

ckrina’s picture

Status: Needs work » Postponed

I'd like to pospone the development here until a generic & integrated design for VBO and filters has been decided. See #2721807: Design for filters and bulk operations.

ckrina’s picture

Issue summary: View changes
Status: Postponed » Needs work
StatusFileSize
new75.85 KB

Since the design has been reviewed in #2721807: Design for filters and bulk operations, together with the new design for VBO, this issue can continue.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.0-alpha1 will be released the week of July 31, 2017, which means new developments and disruptive changes should now be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.0-alpha1 will be released the week of January 17, 2018, which means new developments and disruptive changes should now be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.7.x-dev » 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

bnjmnm’s picture

Status: Needs work » Closed (outdated)