Add Apply and Clear buttons to Categories dropdown

One thing to bear in mind is the buttons could make things more difficult for keyboard users. Some thought would need to be given to make sure they aren't disadvantaged.

I've added the tag for wcag2.2. sc 3.2.2 https://www.w3.org/WAI/WCAG22/Understanding/on-input.html which basically illustrates why the proposed resolution, having an apply and clear button, is important or probably necessary.

re #2 in what regard would/could the buttons make things more difficult for keyboard users?

@rkoller At the moment the keyboard user can tab onto the category box, press space to open it, then use up/down arrows to move between categories, and space to select/deselect them. Pressing tab will close the drop-down and move to the next control.

I agree that having the modules change behind the drop-down as we currently do is confusing. We just need to ensure there is a clear an intuative UI for getting from the list of categories to the apply/reset buttons.

This is now down to nightwatch test failures.So I'll try to resolve them else i will post a detailed description of the problem with the tests and maybe solution😅.

I don't see a ton here to complain about from the code perspective (I haven't manually tested it), but I do have some questions about using styling classes to hook into functional behaviors. That seems like a red flag to me. But maybe I'm missing something?

Found some issues while testing this MR

• Select/unselect a category multiple times and then click Apply. Category is showing multiple times in label.
• Unable to unselect a category from keyboard.
• Clicking Clear does not remove selected categories.
• Unable to select multiple categories after clicking apply.

All the feedbacks are addressed and tests are also passing.Marking it NR.

+1 for making the buttons visible all the time. but there is one potentially tricky problem to consider, the user is navigation the multiselect by the up and down arrow key. how should the transition between the options in the select list and the apply and clear button be accomplished? at the moment if you navigate down to the end of the list the apply button gets into focus but you are unable to reach the clear button by the arrow keys. and if you press the tab key the security advisory coverage select gets into focus. on shift focus you get onto the filter button that was unreachable before. but how to handle things for keyboard users with the position fixed of that apply and clear button i consider tricky.

ps: on the browse page is also get tens of the following redundant errors:

Deprecated function: Creation of dynamic property Drupal\project_browser\ProjectBrowser\Project::$created is deprecated in Drupal\Component\Serialization\PhpSerialize::decode() (line 21 of /var/www/html/repos/drupal/core/lib/Drupal/Component/Serialization/PhpSerialize.php).
Drupal\Component\Serialization\PhpSerialize::decode()
array_map() (Line: 70)
Drupal\Core\KeyValueStore\DatabaseStorageExpirable->getMultiple() (Line: 35)
Drupal\Core\KeyValueStore\StorageBase->get() (Line: 209)
Drupal\project_browser\EnabledSourceHandler->getStoredProject()
array_map() (Line: 107)
Drupal\project_browser\EnabledSourceHandler->getProjects() (Line: 59)
Drupal\project_browser\Controller\ProjectBrowserEndpointController->getAllProjects()
call_user_func_array() (Line: 123)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}() (Line: 593)
Drupal\Core\Render\Renderer->executeInRenderContext() (Line: 121)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->wrapControllerExecutionInRenderContext() (Line: 97)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}() (Line: 183)
Symfony\Component\HttpKernel\HttpKernel->handleRaw() (Line: 76)
Symfony\Component\HttpKernel\HttpKernel->handle() (Line: 53)
Drupal\Core\StackMiddleware\Session->handle() (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle() (Line: 28)
Drupal\Core\StackMiddleware\ContentLength->handle() (Line: 32)
Drupal\big_pipe\StackMiddleware\ContentLength->handle() (Line: 116)
Drupal\page_cache\StackMiddleware\PageCache->pass() (Line: 90)
Drupal\page_cache\StackMiddleware\PageCache->handle() (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle() (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle() (Line: 36)
Drupal\Core\StackMiddleware\AjaxPageState->handle() (Line: 51)
Drupal\Core\StackMiddleware\StackedHttpKernel->handle() (Line: 709)
Drupal\Core\DrupalKernel->handle() (Line: 19)

on the latest 2.0.x that doesnt happen

I have added CSS changes that fixes the position of the Apply and Clear button.See the SS:-

in regards of aesthetics two details. first, i am unable to test the current state since it is broken or at least the buttons are not showing anymore at the moment, but in my previous tests i'Ve noticed a regression that is illustrated in #15. we ve agreed on a previous issue that the user should always see only the half of the last visible option if there are more options than vertical available space. that way the user directly knows the list is scrollable. in the screenshot in #15 you see the last visible option fully visible instead. that way it is not directly apparent that the list is visible.

and i wonder if it would make sense to align the background color of that box/bar that contains those two buttons with the dark of the bulk action bar? to visualize that this is a button bar and not part of the multi select list anymore, to make it visualy distinguished from the actual list?

and in regards of the keyboard navigation. would it make sense to move the details about the keyboard navigation into #3458844: Improve keyboard navigation/general a11y for categories dropdown if the rest of this issue is ready?

I have adjusted the height to 50vh and also the spacing between the buttons as mentioned in #17. Also i the concern raise by @rkoller in #18 is fixed related to

last visible option fully visible

along with the black background colour for the div containing the 2 buttons (which matches the bulk operation) and now it will be easier for the user to distinguish from the actual list.

Also regarding

and in regards of the keyboard navigation. would it make sense to move the details about the keyboard navigation into #3458844: Improve keyboard navigation/general a11y for categories dropdown if the rest of this issue is ready?

I think we could do that as a part of the that issue.

Attaching the latest SS for ease of reviewing the changes.

The tests are failing because they are not able to interact with the elements(by scrolling).I can't figure out how does the addition of one more element in the scroll list is causing this issue.
I tried adjusting the z-index for the apply and clear button's div but that also didn't help to fix the problem because as you can see the css of the apply and clear button's div is causing the issue (see the SS).

For better understanding i changed the background colour.
I also tried to move the apply and clear button out of the select list(which is not actually we want) but that seems to pose a greater problem as you can see the SS.

If anyone has any idea of what could be reason for the test fails or what else can i try to fix the problem, it would be helpful if they can document it on the issue or give it a try to fix the problem.
Thanks in advance.

I tried adding the fix

$this->getSession()->evaluateScript('document.getElementById("67").scrollIntoView()');

,but it's not working for all the tests.

a brief note about color contrast, the apply button has a too low color contrast. I would go with the same color suggested on the bulk action issue, --color-blue-400 which is already used on the bulk action bar on admin/content. the general behavior in the context of keyboard navigation i'll retest later today.

I tried to get the other tests pass but they are not working.
These are the following that i tried:-

1. Scroll to next elements just after say media category in testPaging()'s case so that we can click on the media category easily as it is in the viewport.
2. Tried some more ways of scrolling methods
3. Tried selecting other categories but they don't have any results show up so they might not be helpfull such as Accessibility.

This is extremely out of date, sadly, and needs to be completely refactored to be brought in line with the way the Svelte app currently works. I think we can certainly write an automated test of this.

Agree this is beyond a rebase. Needs a new branch from 2.0, and for the changes to be reworked to match.

I created a new branch, rebased it and applied the changes manually.
Adding the screenshot how the buttons are looking.

I have unassigned the issue so that anyone else can work on tests.

Addressed both points mentioned in #36. Now both buttons will remain sticky, and only the options will be scrollable. Also, the clear button will clear the selected options (no need to click on apply after clear).
Keeping assigned to myself to work on failed pipeline issues.

I have updated the functionality of clear button as suggested in #42.

If you check some categories and hit apply, then use "Clear filters" it now clears the selected filters, including the selected categories, however it does not clear the checkboxes from the component. The categories still appear with the checkboxes selected. So it's only a display issue. See attached file