Problem/Motivation
In alpha1 the normal button state looks like that:

while in the active state the button looks like that:

so there are two problems imho. in the current implementation the state is solely communicated via the orientation of the icon and not via the background color of the button like in the Drupal design system Figma file. By rotating the icon based on the state the actual meaning of the icon is inverted alongside. That might be confusing cuz currently the icon communicates broaden search results for the non-active state and narrow/filtered search results for the active state. The correct orientation for the filter icon semantically would be the one in the active state screenshot - meaning to narrow down/filter the results from top to bottom.
Proposed resolution
- I wouldn't rotate the icon on state change and keep it in the orientation shown in the active.png
- For state change use the background color used for
active(pressed)normal/defaultbuttons in the Drupal design system Figma file
Remaining tasks
- ✅ File an issue about this project
- ☐ Manual Testing
- ☐ Code Review
- ☐ Accessibility Review
- ☐ Automated tests needed/written?
| Comment | File | Size | Author |
|---|---|---|---|
| #20 | button_anatomy.png | 33.26 KB | rkoller |
| #15 | after-active.png | 43.73 KB | libbna |
| #15 | before-active.png | 43.77 KB | libbna |
Issue fork project_browser-3293929
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #2
rkollerComment #3
libbna commentedHi @rkoller. I will try to work on this. If possible can you please share the link for Drupal design system Figma file so that I can change the background color. Thanks.
Comment #4
rkollerapologies for the late reply am in the course of migrating and setting up a new computer so a few notifications slipped through. the link to the Drupal Design system is this one: https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/💧-Drupal-Design-system?node-id=553%3A0 (the drop down button page could be found at the top the second from left - the section about states)
Comment #5
libbna commentedThanks @rkoller. I will soon start working on this.
Comment #7
libbna commentedComment #8
sharayurajput commentedits working properly as per mentioned in proposed resolution and also background color is changing so LGTM
Comment #9
Munavijayalakshmi commentedComment #10
Munavijayalakshmi commentedcheck console tabs.
Comment #11
Munavijayalakshmi commentedadded patch as per Proposed resolution in description.
Comment #12
Munavijayalakshmi commentedComment #13
libbna commented@Munavijayalakshmi we don't need to change the background of the of an image, we have to change the the bg color of a button as given in figma design.
Marking the status to needs work.
Comment #14
libbna commentedComment #15
libbna commentedadding screenshots also.
Comment #16
rkollerthank you for working on it! but it is odd. I successfully applied the patch to my drupal 9.5 install with project_browser dev even though the merge request shows a merge error. I've also checked the source afterwards that the rotation transform gets removed and the background-colour gets changed. so the changes got applied.
but somehow I've done two or three
drush cras well as cleared the caches in safari, firefox and edge but everything looks like no changes have been applied. therefor I am unable to confirm that everything is working as expected. ( I guess it might have to do with mutagen in my local environment - haven't had any problems with that on my old computer so far - will report back as soon as I figured out the root cause)Comment #17
rkoller@libbna and others, one question. I think I figured out the possible issue why the changes haven't shown up on my end described in #16. is it possible that I have to manually trigger a svelte compile when reviewing patches for project browser? cuz I've noticed the changes in the
search.sveltefile are in place and get properly applied but in the browser they dont show up. looks likesveltejs/public/build/bundle.cssdoesn't reflect those yet. am not a developer and never worked with svelte on my own in the context of the issue queue therefor the probably basic question.Comment #18
libbna commented@rkoller yes there might be a chance that the changes doesn't get reflected so for that what you can do is:
/project_browser/sveltejsyarn installyarn run builddrush crComment #19
narendrarMR looks good to me. Tested manually and colour of button changes on filter open.
Comment #20
rkollerahhhhhh thanks a lot @libbna! now I am able to see the changes after building.
about the changes now that I am able to see things in the browser. the icon doesn't rotate anymore and the color of the active state looks correct and good. thank you!
one detail about the iconography. for scanability I personally prefer to prepend the icon to the text that way a sighted user relying on a visual queue instead of reading is able to simply scan the icon and is able to skip the reading. But in the current state the user has to scan the text anyway first before reaching the icon. I've taken another look at the button anatomy in the drupal design system and my suggestion is in line with the guidelines there as well. meaning the icon is first and the text afterwards:
The only detail I am not sure if it is intended to have an icon for a none primary button?!
another detail is related to the following issue (https://www.drupal.org/project/project_browser/issues/3293909) we've discussed in yesterdays a11y office hour (see the talking point "mike - project browser patch" - the first of the two). Currently the icon has an alt attribute but it is missing a tooltip. Because the visible text for the button shows only "Filter" but it is basically the advanced filter and that could be reflected in the tooltip like it is already in the alt text. Only constraint and consensus in yesterdays meeting the text for the alt attribute and the tooltip shouldn't be identical. But guess if the other issue came to a final conclusion it could be adjusted to that?
I'll set the status back to needs work due to the icon position.
Comment #21
libbna commented@rkoller I didn't get about alt attribute and tooltip think but I have changed the position of an icon. Marking it needs review for the icon position.
Comment #22
chrisfromredfinComment #23
libbna commentedComment #24
libbna commentedI tried to rebase it but facing some issues so un-assigning myself so that others can work on it.
Comment #25
lucasbaralmi will try to work and rebase this.
Comment #26
lucasbaralmI did the rebase, there is still a need to resolve the Custom Commands Failed error, I will unasign myself so that someone else can work on it.
Comment #28
tim.plunkettFixed the rebase (multiple nested merge commits there?) and it should be fine now
Comment #29
chrisfromredfinThis is a noticeable improvement. Manually tested and reviewed!
Comment #31
fjgarlin commentedI just rebased this issue again with the latest changes.
Comment #32
fjgarlin commentedAlso tested via drupalpod so will commit it.
Comment #34
fjgarlin commented