search

Netcentric / vg-macktrucks-com-rd

Franklin Site Redesign for https://www.macktrucks.com
Apache License 2.0
1 stars 0 forks source link

Breadcrumbs #44 #213

Closed jonatan-lledo-netcentric closed 4 months ago

jonatan-lledo-netcentric commented 5 months ago

New

the breadcrumb shows or hides based on the current width, even on resizing following the design pattern: 1st Home becomes an ellipsis 2nd current Active link is hided 3rd and beyond the middle links hide from the 2nd until the very last item

Test URLs

drafts/jlledo/v2/breadcrumb-demo

#

Fix #44

Test URLs:

aem-code-sync[bot] commented 5 months ago

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed. In case there are problems, just click a checkbox below to rerun the respective action.

Commits * [1029159](https://github.com/Netcentric/vg-macktrucks-com-rd/pull/213/commits/10291599dad1bb9b08b8f1343100869c04ac4f6e) :white_check_mark: (latest) * [d75a091](https://github.com/Netcentric/vg-macktrucks-com-rd/pull/213/commits/d75a091036985f6377375ec1f877e0970c90be7a) :white_check_mark: * [89ca08f](https://github.com/Netcentric/vg-macktrucks-com-rd/pull/213/commits/89ca08f16945c5c55feeabc19d79a2222fdc8293) :white_check_mark: * [4bba861](https://github.com/Netcentric/vg-macktrucks-com-rd/pull/213/commits/4bba86188bc31ac7008085003b70992e03930efb) :white_check_mark: * [812a835](https://github.com/Netcentric/vg-macktrucks-com-rd/pull/213/commits/812a835fc8f9cc21ce3c7dde2281e305552e8423) :white_check_mark: * [ee995f4](https://github.com/Netcentric/vg-macktrucks-com-rd/pull/213/commits/ee995f43c29aed3254eb672eb918fe3f85f487d2) :white_check_mark:
aem-code-sync[bot] commented 5 months ago
Page Scores Audits Google
/drafts/jlledo/v2/breadcrumb-demo PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
jonatan-lledo-netcentric commented 5 months ago

As per https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/ I was expecting <nav> with <ol> and <li> to be used.

I added the nav and ul/li elements to follow the a11y pattern

Clever solution, with the observers and calculations. Do I understand correctly that the demo with Flexbox was not feasible for the requirements provided?

the example removes all the elements from the end of the list and this doesn't work for our needs