>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3541502. --> Reported by: [anjali rathod](https://www.drupal.org/user/3655906) Related to !641 !632 >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>The newly introduced language selector is not styled.</p> <h4 id="summary-steps-reproduce">Steps to reproduce</h4> <ol> <li>Clone the Drupal CMS repo and check out 2.x</li> <li>Run <code>ddev launch</code></li> <li>See the installer screens have a language selector</li> </ol> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <h4>Proposed Resolution</h4> <p>The new language selector designs provide users with an intuitive way to change the installation language during Drupal CMS setup. This component should integrate seamlessly with the existing Gin design system while offering familiar interaction patterns based on Google <a href="https://translate.google.com">Translate's language selector</a>.</p> <p>Implement a comprehensive language selector component that maintains consistency with Drupal CMS design standards while providing an accessible and user-friendly language switching experience.</p> <p><img src="https://www.drupal.org/files/issues/2025-09-18/installer-opened.png" alt=""></p> <h4>Key Requirements</h4> <ul> <li>Follow Gin design system standards for buttons, modals, and form elements.</li> <li>Implement Google Translate-inspired interaction patterns for familiarity.</li> <li>Ensure full accessibility compliance with WCAG guidelines, supporting both keyboard and mouse navigation.</li> <li>Provide responsive behavior across all screen sizes.</li> </ul> <h4>Components</h4> <h5>Default Trigger Button</h5> <p>The language selector appears as a standard <strong>tertiary</strong> (no ghost /border button) dropdown button incorporating Gin's established design patterns (spacing, hover colors...) with the globe icon indicating language functionality and dropdown chevron suggesting expandable content. Using the tertiary styles help provide visual hierarchy within the installer interface.<br> Accessibility Requirements:</p> <ul> <li>aria-haspopup="dialog" attribute</li> <li>aria-expanded="false" in default state</li> <li>Descriptive aria-label for screen readers</li> <li>Keyboard focusable with proper focus indicators</li> </ul> <p><img src="https://www.drupal.org/files/issues/2025-09-18/button-language.png" alt=""></p> <h5>Modal / popup</h5> <p>When activated, the component displays a centered modal overlay, centered positioned with <a href="https://www.figma.com/design/IQNqQnxkUiFjp5GSp9E3nV/Design-System---Drupal-CMS?node-id=5150-1343">Gin's default Modal shadow</a> (but not dark header). </p> <p><strong>Dismissal Methods:</strong></p> <ul> <li>Language selection automatically closes modal</li> <li>Click outside modal (backdrop click) closes overlay</li> <li>Escape key press closes modal</li> </ul> <p><strong>Focus Management:</strong></p> <ul> <li>Focus returns to trigger button when modal closes</li> <li>Focus trapping within modal when open</li> <li>Logical tab order through modal elements</li> </ul> <p><strong>Content Organization:</strong></p> <ul> <li>Search input field prominently positioned at top</li> <li>Language options have responsive columns</li> <li>Scrollable container when full list is revealed</li> </ul> <p><img src="https://www.drupal.org/files/issues/2025-09-18/installer-opened.png" alt=""></p> <h5>Search Functionality</h5> <p>Live search filtering helps users quickly locate their preferred language without showing all of them.</p> <p><img src="https://www.drupal.org/files/issues/2025-09-18/installer-modal-filtered.png" alt=""></p> <p><strong>Search Behavior:</strong></p> <ul> <li>Real-time filtering as user types</li> <li>Searches across all available languages (not just visible subset)</li> <li>Case-insensitive matching on language names</li> <li>Clear search results when input is empty</li> </ul> <p><strong>Search Interface:</strong></p> <ul> <li>Standard text input with search icon</li> <li>Placeholder text indicating search functionality, no label</li> <li>Appropriate input styling matching Gin form standards</li> <li>Clear/reset button when search term is present</li> </ul> <h5>Language List Items</h5> <p>Individual language options should look like links/tertiary buttons with small text to accommodate enough items but with enough padding for touch targets, left aligned and look like <em>tags</em> (with background style when hovered. There should be a focus state also. When active it should have a visual indicator (checkmark icon)</p> <p>Figma link to the designs: <a href="https://www.figma.com/design/lKjfH0RI181Yca2MC1Esb5/Drupal-CMS---Interface-Screens?node-id=4443-22875&amp;t=CR7Mbcdfj9cxvh8f-1">https://www.figma.com/design/lKjfH0RI181Yca2MC1Esb5/Drupal-CMS---Interface-Screens?node-id=4443-22875&amp;t=CR7Mbcdfj9cxvh8f-1</a></p> > Related issue: [Issue #3512398](https://www.drupal.org/node/3512398)