[#30534] - [4.0] com_finder ul instead of dl for easier styling
- Fixed in Code Base
- 2 Sep 2020
- Medium
- Build: 4.0-dev
- # 30534
- Diff
- hans2103:4.0-dev-a11y--com_finder-ol-instead-of-dl-for-easier-styling
User tests: Successful: Unsuccessful:
Pull Request for Issue # .
Summary of Changes
quote from @Hackwar taken from a private message to find out reason of changing ul to dl
I used a DL because I considered that the syntactically correct structure. There is no deeper reasoning.
Changing it from DL back to UL makes it easier for frontend developers to style each search result.
Styling DT+DD is not as easy as styling a LI
Testing Instructions
- Go to the search results.
- using Joomla 4 with Blog Sample Data it will be the following url with
blogas searched word.
/index.php/component/finder/search?q=blog&Itemid=101&Itemid=101
- using Joomla 4 with Blog Sample Data it will be the following url with
- Inspect element on the search results and see the HTML structure
- Apply this PR, refresh the page
- Inspect element on the search results and see the HTML structure
Actual result BEFORE applying this Pull Request
It is very hard to style dt+dd+dd+dd as a card. Try adding a background image, box-shadow and spacing between the individual search results.
Expected result AFTER applying this Pull Request
After applying this PR it is much easier to style individual search results.
Documentation Changes Required
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Front End com_finder |
| Labels |
Added:
?
|
||
Thank you for testing.
Perhaps a bit overstructured in the inner part of the li-element. There are three levels: header->h4->a for each result title and three times the same class: result-title(in li, header and h4)
After merging this PR where DL will be replaced by UL I will create a new PR to simplify the HTML structure of a search result. I agree on the HTML structure.
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30534.
| Status | Pending | ⇒ | Ready to Commit |
RTC
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30534.
Makes sense. But given it’s search results I assume ol is more logical than ul as they are ordered by search relevancy
Thats true. But still think it makes more sense to do it like that
| Status | Ready to Commit | ⇒ | Fixed in Code Base |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2020-09-02 08:58:25 |
| Closed_By | ⇒ | wilsonge | |
| Labels |
Added:
?
|
||
Thanks!
I have tested this item✅ successfully on c9f4593
The code looks like described.
Perhaps a bit overstructured in the inner part of the li-element. There are three levels: header->h4->a for each result title and three times the same class: result-title(in li, header and h4)
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30534.