feat: use regular card styles for search results page#256
Merged
Conversation
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
|
Change the search results to use the regular card styles/markup, as it is used on other pages, with the added badge that includes the date. Removes most of its custom card styling and markup. Adds an option to `buildCard` to pass in the image url instead of the picture element, and refactors where `createOptimizedPicture` is used so it runs within this function instead of having to be imported and called elsewhere. Adds a parameter so `buildCard` can be created with an `li` container instead of a `div`. ADB-315
jawinn
force-pushed
the
feat-search-cards
branch
from
7c870a4 to
c8f5fd6
Compare
jawinn
commented
Jun 12, 2026
| const image = document.createElement('img'); | ||
| image.src = result.image; | ||
| image.alt = ""; | ||
| image.loading = "lazy"; |
Collaborator
Author
There was a problem hiding this comment.
Note: the new built card markup is already set loading to lazy.
jawinn
commented
Jun 12, 2026
|
|
||
| if (cardData?.img) { | ||
| cardData.img.classList.add('card__image'); | ||
| cardData.img.setAttribute('alt', ''); |
Collaborator
Author
There was a problem hiding this comment.
Note: this was mistakenly modifying alt on the picture element (not a thing) instead of the child img. Fixed in the new version.
kaseybon
reviewed
Jun 16, 2026
Keep the results article date reading order the same as its visual order and add punctuation so there is a pause before the title when it is read by a screen reader (Voiceover).
kaseybon
approved these changes
Jun 23, 2026
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Summary of changes
Use regular card styles for search results page
Changes the search results to use the regular card styles/markup, as it is used on other pages. Includes the added badge with the date. Removes most of its custom card styling and markup.
Adds an option to
buildCardto pass in the image URL instead of the picture element, and refactors wherecreateOptimizedPictureis used so it runs within this function instead of having to be imported and called elsewhere.Adds a parameter so
buildCardcan be created with anlicontainer instead of adiv.Relevant Links
Test URLs:
Checklist
Validation
Browser Testing
We should aim to support the latest version of the listed browsers. For older versions or other browsers not on the list, content should be accessible, even if it doesn't completely match the designs.
Developers should test as they work in the browsers available on their machines. If they have access to other devices to test other browser/OS combinations, they should do that when possible.
Windows
MacOS
Android
iOS