[19.0][IMP] base_tier_validation: rewrite tier_review_widget collapse with native <details>#44
Draft
bosd wants to merge 1 commit into
Draft
Conversation
…native <details>
Replace the OWL-driven panel/card collapse machinery with the native
HTML5 ``<details>`` / ``<summary>`` element. The browser handles the
toggle, the open state and keyboard accessibility natively; no
JavaScript needed.
Removed:
- ``onToggleCollapse`` handler in ``tier_review_widget.esm.js``
(~13 lines walking ``ev.currentTarget.closest(".panel-heading")``
/ ``.card-header`` and toggling ``style.display`` manually).
- ``useState`` import and the ``this.state.collapse`` boolean.
- The ``<a class="o_info_btn" data-toggle="..." t-on-click="...">``
shim and the explicit ``<div id="collapse1" class="collapse">``
wrapper.
Added:
- ``<details class="o_tier_review_details" open="open"><summary>``
with the same "Reviews" label. ``open`` attribute defaults to
expanded, matching the previous behaviour.
- SCSS to re-skin the disclosure marker: ``summary::before`` shows
the FontAwesome caret (``\f0d7``) and rotates -90° when the
``<details>`` is closed. ``summary::-webkit-details-marker``
hidden so we don't render two triangles.
Net effect:
- ~30 lines of JS gone, ``useState`` import dropped.
- ~12 lines of SCSS replaced (Bootstrap 3 ``panel-*`` rules dropped
outright; the new selectors target a single ``.o_tier_review_*``
namespace).
- Same UX (click ``Reviews`` heading to toggle).
- Accessibility: native ``<details>`` is keyboard-operable
(Space / Enter) out of the box; the previous ``<a href="#">``
shim wasn't.
Contributor
|
Hi @LoisRForgeFlow, |
OCA-git-bot
added
mod:base_tier_validation
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
Replace the OWL-driven panel/card collapse machinery in the embedded Reviews widget with the native HTML5
<details>/<summary>element. Browser handles open/close state, keyboard accessibility, and the disclosure triangle; no JavaScript needed.What goes away
onToggleCollapsehandler (~13 lines walkingev.currentTarget.closest(".panel-heading")then togglingstyle.displaymanually).useStateimport andthis.state.collapseboolean.<a class="o_info_btn" data-toggle="..." t-on-click="...">shim and the explicit<div id="collapse1" class="collapse">wrapper..panel-group,.panel-heading,.panel-title,.panel-bodyall dropped — none of these classes exist in Bootstrap 5 which Odoo 19 ships).What replaces it
<details class="o_tier_review_details" open="open"><summary>Reviews</summary><div class="o_tier_review_body">...</div></details>. Theopenattribute defaults to expanded, matching the previous default.summary::before { content: "\f0d7" }, rotates-90°when the<details>is closed.summary::-webkit-details-marker { display: none }so we don't render two triangles.Net effect
<a href="#">shim, click-only<details>, Space/Enter, screen-reader-awareSame UX (click Reviews heading to toggle, defaults to open).
Overlap with PR #23
PR #23 modernised the same widget from Bootstrap 3 (
panel-*) to Bootstrap 5 (card-*). This PR goes one step further and removes the surrounding card scaffolding entirely. If PR #23 lands first, this PR will need a trivial conflict resolution on the same files — net result is identical. If this PR lands first, the Bootstrap-modernisation commit in PR #23 becomes redundant for these files (the rest of PR #23 — search view, avatars, icons, coverage tests — is unaffected).Test plan
account.moveunder tier validation). The Reviews section is open by default with the caret pointing down.<a>shim.)