new language selector #4343
Merged
new language selector #4343
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* Update language-selector.js * Update language-selector.test.js * Update language-selector.css * Update language-selector.js
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
Commits
|
|
Comment on lines
+100
to
+107
| searchContainer.innerHTML = ` | ||
| <div class="search-input-wrapper"> | ||
| <svg class="search-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M14.8243 13.9758L10.7577 9.90923C11.5332 8.94809 12 7.72807 12 6.40005C12 3.31254 9.48755 0.800049 6.40005 0.800049C3.31254 0.800049 0.800049 3.31254 0.800049 6.40004C0.800049 9.48755 3.31254 12 6.40005 12C7.72807 12 8.9481 11.5331 9.90922 10.7577L13.9758 14.8243C14.093 14.9414 14.2461 15 14.4 15C14.5539 15 14.7071 14.9414 14.8243 14.8243C15.0586 14.5899 15.0586 14.2102 14.8243 13.9758ZM6.40005 10.8C3.97426 10.8 2.00005 8.82582 2.00005 6.40004C2.00005 3.97426 3.97426 2.00004 6.40005 2.00004C8.82583 2.00004 10.8 3.97426 10.8 6.40004C10.8 8.82582 8.82583 10.8 6.40005 10.8Z" fill="#666"/> | ||
| </svg> | ||
| <input type="text" placeholder="${placeholderText}" class="search-input" id="language-selector-search" aria-autocomplete="list" aria-controls="language-selector-listbox" autocomplete="off" /> | ||
| </div> | ||
| `; |
Check warning
Code scanning / CodeQL
DOM text reinterpreted as HTML Medium
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI about 1 month ago
To fix the issue, we need to ensure that the placeholderText is properly escaped before being interpolated into the HTML string. This can be achieved by using a utility function to encode special HTML characters (e.g., <, >, &, "). This will prevent any malicious content from being interpreted as HTML or JavaScript.
The best approach is to:
- Introduce an HTML-escaping utility function if one does not already exist in the codebase.
- Use this function to sanitize
placeholderTextbefore it is interpolated into the HTML string on line 100.
Suggested changeset
1
libs/blocks/language-selector/language-selector.js
| @@ -91,2 +91,12 @@ | ||
| function createDropdownElements(placeholderText) { | ||
| const escapeHTML = (str) => str.replace(/[&<>"']/g, (char) => ({ | ||
| '&': '&', | ||
| '<': '<', | ||
| '>': '>', | ||
| '"': '"', | ||
| "'": ''', | ||
| }[char])); | ||
|
|
||
| const sanitizedPlaceholderText = escapeHTML(placeholderText); | ||
|
|
||
| const dropdown = createTag('div'); | ||
| @@ -104,3 +114,3 @@ | ||
| </svg> | ||
| <input type="text" placeholder="${placeholderText}" class="search-input" id="language-selector-search" aria-autocomplete="list" aria-controls="language-selector-listbox" autocomplete="off" /> | ||
| <input type="text" placeholder="${sanitizedPlaceholderText}" class="search-input" id="language-selector-search" aria-autocomplete="list" aria-controls="language-selector-listbox" autocomplete="off" /> | ||
| </div> | ||
| @@ -113,3 +123,3 @@ | ||
| tabindex: '0', | ||
| 'aria-label': placeholderText, | ||
| 'aria-label': sanitizedPlaceholderText, | ||
| }); |
Copilot is powered by AI and may make mistakes. Always verify output.
milo-pr-merge bot
pushed a commit
that referenced
this pull request
Jun 11, 2025
* new language selector (#4343) * language-selector * language-selector * fix lan selector * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * libs/blocks/language-selector/language-selector.js * wip * wip * fix existing page issue * Update language-selector.js * Update language-selector.js * Update language-selector.css * Update language-selector.css * Update language-selector.css * Update language-selector.js * Update language-selector.js * Update language-selector.css * Update language-selector.js * Update language-selector.css * Update language-selector.js * Update language-selector.css * Update language-selector.js * Update language-selector.js * Update language-selector.css * show localize search text * fix tabbing and key up/down * add unit test * Code optimization (#4289) Update language-selector.js * Update language-selector.css * Update language-selector.js * Update language-selector.css * Update language-selector.css * Update language-selector.js * Update language-selector.css * Update language-selector.js * Update language-selector.css * Update language-selector.css * Update language-selector.css * Update language-selector.css * Update language-selector.css * Update language-selector.css * Update language-selector.css * Update language-selector.css * Css nls (#4318) * Update language-selector.css * Update language-selector.css * Update language-selector.css * Update language-selector.js * Final nls (#4320) * Update language-selector.js * Update language-selector.test.js * Update language-selector.css * Update language-selector.js * Update language-selector.css * Update language-selector.css * Update language-selector.js * Update language-selector.js * Keyboard navigation fix * add esc and focus out event to close the language selector dropdown * fix unit test --------- Co-authored-by: Bandana Laishram <bandanalaishram@gmail.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Resolves: MWPW-NUMBER
Test URLs:
GNav Test URLs
Gnav + Footer + Region Picker modal:
Thin Gnav + ThinFooter + Region Picker dropup:
Localnav + Promo:
Sticky Branch Banner:
Inline Branch Banner:
Blog
RTL Locale