Problem/Motivation

The Sort option dropdown does not indicate that it contains options to sort the results. The default displayed is "Project Usage", It is not clear to users that this dropdown has other options to sort the results by. The "Filters" button is clear that you select that button to view the available filters. The Sort option needs the same type of clarify.

Steps to reproduce

1. After installing and enabling the project_browser module
2. Visit the /admin/module/browse page
3. Select Project Usage and Filters options to understand what they do.

Proposed resolution

Add a "Sort" label above the dropdown to indicate the purpose of the dropdown. Make sure the solution meets accessibility guidelines.

Remaining tasks

  • ✅ File an issue about this project
  • ☐ Manual Testing
  • ☐ Code Review
  • ☐ Accessibility Review
  • ☐ Automated tests needed/written?
CommentFileSizeAuthor
#8 sort_label.png85.16 KBsrishtiiee
Sortoptions.png120.01 KBleslieg

Issue fork project_browser-3285880

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

leslieg created an issue. See original summary.

leslieg’s picture

leslieg commented
Status: Active » Needs work
leslieg’s picture

leslieg commented
Issue summary: View changes

srishtiiee made their first commit to this issue’s fork.

srishtiiee’s picture

srishtiiee commented
Status: Needs work » Needs review

This was previously discussed in "The sort dropdown should be a
element" and as the sorting criteria is set to project_usage by default, it would be fine to go back to having a hidden option which would appear only once when the page is first loaded and will provide more clarity over its functionality without affecting the expected behaviour of the select list.

bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented
Status: Needs review » Needs work

The solution in the MR will not work is it's not accessible. "Sort" is reported as the value of the select, which is not how it is currently sorting, nor is it a valid option. This is even technically inaccurate for sighted users as the default sort criteria isn't "sort". The element should always report the value it represents, even on page load.

There'a already a label for this form element that is currently visually-hidden. Unhide that (or at least unhide the word "sort") and you'll have a label that indicates the element's purpose while keeping the <select> semantically correct.

srishtiiee’s picture

srishtiiee commented

Got it! Thanks for explaining. I'll make the changes.

srishtiiee’s picture

srishtiiee commented
Issue summary: View changes
Status: Needs work » Needs review
StatusFileSize
new sort_label.png85.16 KB

narendrar’s picture

narendrar
He/Him
Primary language English
Location Jaipur, India
commented

Looks good to me. May be one small change that can be done to look visually correct is to replace Sort by with Sort by:

narendrar’s picture

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

tim.plunkett made their first commit to this issue’s fork.

tim.plunkett’s picture

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

Merged, thanks!

Status: Fixed » Closed (fixed)

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