fix: focus first color button when opening color popups (#10901) (#10905)

Co-authored-by: Sascha Ißbrücker <sissbruecker@vaadin.com>

Author: vaadin-bot

packages/rich-text-editor/src/vaadin-rich-text-editor-popup.js

@@ -35,7 +35,7 @@ class RichTextEditorPopup extends PolylitMixin(LitElement) {
       :host([opened]),
       :host([opening]),
       :host([closing]) {
-        display: contents !important;
+        display: block !important;
         position: fixed;
       }
 

packages/rich-text-editor/test/toolbar.test.js

@@ -241,6 +241,14 @@ describe('toolbar controls', () => {
             overlay = popup.shadowRoot.querySelector('vaadin-rich-text-editor-popup-overlay');
           });
 
+          it(`should focus first color button in ${style} popup when opened`, async () => {
+            getButton(style).click();
+            await oneEvent(overlay, 'vaadin-overlay-open');
+
+            const firstButton = popup.querySelector('button');
+            expect(document.activeElement).to.equal(firstButton);
+          });
+
           it(`should apply ${style} when clicking the "toolbar-button-${style}" and selecting value`, async () => {
             getButton(style).click();
             await oneEvent(overlay, 'vaadin-overlay-open');