Olivero: Refactor navigation.es6.js to meet Drupal's JavaScript coding standards

js-fixed class for the header is changed to is-fixed and js-overlay-active to is-overlay-active in patch #2.

The fixed header is working fine. This can be move to RTBC

Verified at live preview https://3212981-refactor-navigation-js-6mvrgpr2ci8ntkdg9ksdsev5t07t1aut....

Was these left unchanged on purpose?

@mherchel the issue you reference in #7 is this issue.

We need to convert navigation.es6.js to use regular JavaScript selectors to using attribute selectors where possible. For attributes, we should use data-drupal-selector="selector-name"

- This is addresses throughout the patch.

We should use SMACSS style is- selectors to indicate state (see https://css-tricks.com/bem-101/#:~:text=%2F*%20btn%20module%20with%20sta...)

- From #6, this now returns no results: grep -r 'js-fixed' core/themes/olivero

We have one instance of adding a keyup event listener for Escape that will not work in IE11

- This is addressed on line 363.

Marking as RTBC.

There is one small issue on IE11.

The escape key does exit the navigation, but it does not return focus to the dropdown arrow. See attached recording

Then RTBC!

+++ b/core/themes/olivero/js/navigation.js
@@ -32,7 +32,7 @@
-      if (e.key === 'Escape') {
+      if (e.key === 'Escape' || e.key === 'Esc') {

This seems like a bug which we should solve in a separate issue and make sure it's properly tested. Other than that, this looks good 👍

Hi @mherchel i have checked the #18, Now the 'js-fixed' changed to 'is-fixed' and 'js-overlay-active' to 'is-overlay-active'.

Before patch we have 'js-fixed' and 'js-overlay-active':

After patch we have 'is-fixed' and 'is-overlay-active'

Moving to RTBC

Committed 34633c2 and pushed to 9.3.x. Also cherry-picked to 9.2.x since Olivero is experimental. Thanks!