Problem/Motivation

At the moment you have four grey buttons close to each other: Date created, Filters, List and Grid. Those four buttons look nearly identical, only exception is the Filters button which happens to have an icon alongside. As a sighted user you have to read or at least visually scan each button and cognitively process its text. Except the aforementioned icon for the Filters button there isn't any visual queue for alternative ways of orientation and processing.

the project browser filter component with th sort by and filters buttons on the right and underneath the list and grid button

Proposed resolution

The cognitive load, understanding what the function of the last two buttons is, might be lowered. Instead of relying entirely on reading and visually scanning it might be easier to use familiar icons for sighted users for the list and grid buttons. Those might be an icon with three or four horizontal lines for the list button and one icon with four squares in a 2x2 grid for the <code>grid button. Those icons users are already familiar with from web and desktop apps. For screenreader users it would be no difference in the output to before if the aria-label attribute would be added to the buttons.

Remaining tasks

  • ✅ File an issue about this project
  • ☐ Manual Testing
  • ☐ Code Review
  • ☐ Accessibility Review
  • ☐ Automated tests needed/written?
CommentFileSizeAuthor
#17 icon-order.png4.29 KBlibbna
#16 Screenshot from 2022-07-22 17-40-37.png2.5 KBomkar-pd
#15 button_anatomy.png33.26 KBrkoller
#11 3293937 after.png19.07 KBaarti zikre
#6 after.png15.08 KBlibbna
#6 before.png19.26 KBlibbna
#4 button-icons.png22.52 KBomkar-pd
list_grid.png29.12 KBrkoller

Issue fork project_browser-3293937

Command icon 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:

About issue forks

Comments

rkoller created an issue. See original summary.

omkar-pd made their first commit to this issue’s fork.

omkar-pd opened merge request !185

omkar-pd’s picture

omkar-pd commented
Status: Active » Needs review
StatusFileSize
new button-icons.png22.52 KB

Added four horizontal lines icon for list and 2x2 icon for grid as proposed.

libbna’s picture

libbna commented
Assigned: Unassigned » libbna

I will review this

libbna’s picture

libbna commented
Assigned: libbna » Unassigned
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new before.png19.26 KB
new after.png15.08 KB

Icons are added perfectly as mentioned in "proposed solution".

Marking this as RTBC.

narendrar’s picture

narendrar
He/Him
Primary language English
Location Jaipur, India
commented
Related issues: +#3293424: Be consistent in using origin_url (and consider making it easier to include)
narendrar’s picture

narendrar
He/Him
Primary language English
Location Jaipur, India
commented
Status: Reviewed & tested by the community » Needs work

Image links can be updated as per suggestion in related issue.

omkar-pd’s picture

omkar-pd commented
Status: Needs work » Needs review

Added drupalSettings.project_browser.origin_url and drupalSettings.project_browser.module_path to constants.js and updated the image links using constants.

narendrar’s picture

narendrar
He/Him
Primary language English
Location Jaipur, India
commented
Status: Needs review » Reviewed & tested by the community

Looks good to me. Thanks 👍

aarti zikre’s picture

aarti zikre commented
StatusFileSize
new 3293937 after.png19.07 KB

Verified Merge request on Drupal 9.5.x dev version
https://git.drupalcode.org/project/project_browser/-/merge_requests/185/...

Testing Steps:
* Install a new Drupal instance
* Clone Project browser module using git clone https://git.drupalcode.org/project/project_browser.git
* Add & fetch this issue fork’s repository using
git remote add project_browser-3293937 git@git.drupal.org:issue/project_browser-3293937.git
git fetch project_browser-3293937
* Switch to that branch
git checkout 3293937-add-icons-to
* Clear all catches
* Go to /admin/modules/browse

Test Result
Both list and grid buttons have the icon. By default grid is selected also all switching to another view mode is working as expected.

Refer SS
2022-07-15/3293937 after.png

Test: Pass
Can be move to RTBC

tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
commented
Status: Reviewed & tested by the community » Needs work

This MR now contains parts of #3293424: Be consistent in using origin_url (and consider making it easier to include).
Either we need to remove that from here and fix it all in the other issue, or this issue should wait on the other to be fixed first.

omkar-pd’s picture

omkar-pd commented

I think this issue is ready to be merged. maybe we can remove it from here and fix all in other issue. What's your suggestion?

libbna’s picture

libbna commented

Yes! We can remove the changes from here and merge this issue because the change is at only one place and removing it will not be a big task.

rkoller’s picture

rkoller
he/him
Primary language German
Location Nürnberg, Germany
commented
StatusFileSize
new button_anatomy.png33.26 KB

I also don't mind where this issue here is fixed. either in this issue or in the one linked in #12. Wherever it is most suitable and convenient from a developer point of view. Only one or two comments about the patch in general since I was finally able to test in the browser.

1) the grid icon isn't in line with the requirement for the iconography in the drupal design system in the drupal wiki (see https://www.drupal.org/docs/core-modules-and-themes/core-themes/claro-th...). outlined versions should be avoided.

2) my initial suggestion in the issue summary was to add the icons without any visible text - and I still would prefer that variant. but by showing an icon with a visible text then the order should be switched and the icon be shown first and the text be appended as shown in the drupal design system figma file: https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/💧-Drupal-Design-system?node-id=553%3A0

button anatomy from the drupal design system

already mentioned one caveat in that context in comment #20 [#3293929#comment-14619621]. not sure if non primary buttons are intended to have icons.

omkar-pd’s picture

omkar-pd commented
Status: Needs work » Needs review
StatusFileSize
new Screenshot from 2022-07-22 17-40-37.png2.5 KB

Made all the changes.
Summary:-

1. Changed outlined version of grid icon.
2. Switched order of the icon as per #15.
3. Also removed part of the code from Be consistent in using origin_url (and consider making it easier to include).

libbna’s picture

libbna commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new icon-order.png4.29 KB

Reviewed the last MR and it LGTM. The constants, ORIGIN_URL and MODULE_PATH has been removed and also the the position of the icon and text is also changed (adding screenshot).

tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
commented
Status: Reviewed & tested by the community » Fixed

Thanks! Merged

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.