Feature/4.0 dev a11y com finder refactor search result

[hans2103]

Pull Request for Issue # .

Summary of Changes

This pull request changes the HTML structure of the search results page.

• media/com_finder/finder.css is cleaned (via build/media_source off-course) Most of it came from 2011. :-)
• OL instead of UL. Since it is an ordered list... default sorted by relevance
• added attribute start on OL element so first list item on page 2 and further don't start with 1
• classNames to style individual parts of a search result item
• no h4 heading for a search title. Use className .result__title to style it.
• font-awesome icons for mime types instead of a background image via css

Testing Instructions

• Joomla 4 with Blog as sample data
• There is not enough content to get pagination working.
  • Global Configuration => set default list limit = 5 (lowest possible)
  • com_content => duplicate articles
• Go to frontend and apply search => search for the word blog
• Apply Pull Request
• Run npm run build:css
• Go to the frontend and refresh page with search results

Actual result BEFORE applying this Pull Request

Expected result AFTER applying this Pull Request

Why reinvent the wheel while Google did a lot of research how to display a search result. The com_finder display of a search result dates back to 2011 and haven't been changed since.
(image of initial description has been replaced)
Two screenshots of new com_finder search results. One with mime icon and one without mime type icon. Mime type is dynamical.

Documentation Changes Required

[brianteeman]

Looks great - I might be wrong but I think @wilsonge said that there should be no fontawesome dependencies in the front end

[hans2103]

Looks great - I might be wrong but I think @wilsonge said that there should be no fontawesome dependencies in the front end

@brianteeman thanks. Wasn't aware of no font-awesome dependency in the frontend. I will have to refactor the display of mime-type to something else. Perhaps included svg. Some else instead of that ugly image form 1995. :-)

[chmst]

Would be great to have an svg, as now also the alert icons are with svg. #30516

The structure looks good.

[hans2103]

Why reinvent the wheel while Google did a lot of research how to display a search result. The com_finder display of a search result dates back to 2011 and haven't been changed since.
(image of initial description has been replaced)
Two screenshots of new com_finder search results. One with mime icon and one without mime type icon. Mime type is dynamical.

updated the initial description of this commit so testers can directly see what to expect.

[paternax]

I have tested this item ✅ successfully on 89c6f72

It looks very good, much more clearer and more legible

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30550.}

[hans2103]

and with that change I would like to ask @paternax to test this PR again. :-)

[N6REJ]

I have tested this item 🔴 unsuccessfully on 22f2574


Spacing is not quite right. We need more space below each entry ( yellow ) and consistent spacing in file path ( red )

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30550.}

[hans2103]

I have tested this item 🔴 unsuccessfully on 22f2574

Spacing is not quite right. We need more space below each entry ( yellow ) and consistent spacing in file path ( red )

This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30550.

it seems that you forgot to run the command npm run build:css

[paternax]

I have tested this item ✅ successfully on 22f2574

I can't confirm the results of NGREJ. It looks very good. I would only put a bit more space between the URL and the title and bit less space between the title and the introtext

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30550.}

[N6REJ]

Tested successfully but recommend changing the padding & margin slightly to help with segmentation.

[paternax]

Result of testing:

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30550.}

[hans2103]

@N6REJ

Tested successfully but recommend changing the padding & margin slightly to help with segmentation.

That's a matter of taste I think. For me it's a bit awkward to see different spacing above and below the horizontal line. I've tried it on my test environment and resulted in equal spacing in the end.

[hans2103]

Thank you @paternax and @N6REJ for testing.

I would only put a bit more space between the URL and the title and bit less space between the title and the introtext.

I've equalized spacing between elements. (Just like spacing between elements in Google result item are the same)

Tested successfully but recommend changing the padding & margin slightly to help with segmentation.

Haven't changed spacing between items.

Due to this new commit all tests have to be done again.

Played with the results though... when adding the following in your local css you can change the looks of the result items to cards.

li.result__item {
    background-color: hsl(0, 0%, 96%);
    border-radius: .5rem;
    padding: 1.5em;
    box-shadow: 0 0 0.125em 0.125em hsl(0, 0%, 36%);
}
li.result__item + .result__item {
    border: 0;
}

[chmst]

I have tested this item ✅ successfully on 0791571

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30550.}

[paternax]

I have tested this item ✅ successfully on 0791571

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30550.}

[paternax]

The search results have never looked better

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30550.}

[Quy]

RTC

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30550.}

[infograf768]

@Hackwar
Is this PR OK for you?

[wilsonge]

Thanks!