Fix styles tab keyboad navigation failing to focus longhands

When focussing a shorthand value in the styles tab, stepping to the next
property gets blocked if the shorhand tree element is folded, i.e., the
corresponding longhands are not visible. In that case, the next property
to get focussed is the invisible longhand, but the element cannot
actually be focussed meaning stepping just stops.

Bug: 396311936
Change-Id: I1cfde2bde4d7b9b6e51b7f407a194297873db58a
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6680978
Commit-Queue: Changhao Han <changhaohan@chromium.org>
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Auto-Submit: Philip Pfaffe <pfaffe@chromium.org>

Author: pfaffe

front_end/panels/elements/StylePropertiesSection.ts

@@ -522,7 +522,8 @@ export class StylePropertiesSection {
 
     let focusNext: HTMLElement|null = null;
     const focusable =
-        Array.from((this.propertiesTreeOutline.shadowRoot.querySelectorAll('[tabindex]') as NodeListOf<HTMLElement>));
+        Array.from((this.propertiesTreeOutline.shadowRoot.querySelectorAll('[tabindex]') as NodeListOf<HTMLElement>))
+            .filter(e => e.checkVisibility());
 
     if (focusable.length === 0) {
       return;