MDL-78728 forms: correctly refer to outermost form element.

Read-only forms do not belong to a <form> element, so we can't refer
to that. Instead find the `.mform` element (which exists for regular
and read-only forms).
This commit is contained in:
Paul Holden 2023-09-04 16:10:13 +01:00
parent 8ac8ea416a
commit 3b2690ef9c
No known key found for this signature in database
GPG Key ID: A81A96D6045F6164
4 changed files with 24 additions and 26 deletions

View File

@ -6,6 +6,6 @@ define("core_form/collapsesections",["exports","jquery","core/pending"],(functio
* @copyright 2021 Bas Brands
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
* @since 4.0
*/Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=void 0,_jquery=_interopRequireDefault(_jquery),_pending=_interopRequireDefault(_pending);const SELECTORS_FORMHEADER=".fheader",SELECTORS_FORMCONTAINER="fieldset > .fcontainer",CLASSES_SHOW="show",CLASSES_COLLAPSED="collapsed";_exports.init=collapsesections=>{const pendingPromise=new _pending.default("core_form/collapsesections"),collapsemenu=document.querySelector(collapsesections),formParent=collapsemenu.closest("form"),formContainers=(null==formParent?void 0:formParent.querySelectorAll(SELECTORS_FORMCONTAINER))||[];collapsemenu.addEventListener("keydown",(e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),collapsemenu.click())}));let expandedcount=0;const formcontainercount=(0,_jquery.default)(SELECTORS_FORMCONTAINER).length;formContainers.forEach((container=>{container.classList.contains(CLASSES_SHOW)&&expandedcount++})),formcontainercount===expandedcount&&(collapsemenu.classList.remove(CLASSES_COLLAPSED),collapsemenu.setAttribute("aria-expanded",!0)),collapsemenu.addEventListener("click",(()=>{let action="hide";collapsemenu.classList.contains(CLASSES_COLLAPSED)&&(action="show"),formContainers.forEach((container=>(0,_jquery.default)(container).collapse(action)))}));const collapseElementIds=[...(0,_jquery.default)(SELECTORS_FORMHEADER)].map(((element,index)=>(element.id=element.id||"collapseElement-".concat(index),element.id)));collapsemenu.setAttribute("aria-controls",collapseElementIds.join(" ")),(0,_jquery.default)(SELECTORS_FORMCONTAINER).on("hidden.bs.collapse",(()=>{[...formContainers].every((container=>!container.classList.contains(CLASSES_SHOW)))&&(collapsemenu.classList.add(CLASSES_COLLAPSED),collapsemenu.setAttribute("aria-expanded",!1))})),(0,_jquery.default)(SELECTORS_FORMCONTAINER).on("shown.bs.collapse",(()=>{[...formContainers].every((container=>container.classList.contains(CLASSES_SHOW)))&&(collapsemenu.classList.remove(CLASSES_COLLAPSED),collapsemenu.setAttribute("aria-expanded",!0))})),pendingPromise.resolve()}}));
*/Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=void 0,_jquery=_interopRequireDefault(_jquery),_pending=_interopRequireDefault(_pending);const SELECTORS_FORM=".mform",SELECTORS_FORMHEADER=".fheader",SELECTORS_FORMCONTAINER="fieldset > .fcontainer",CLASSES_SHOW="show",CLASSES_COLLAPSED="collapsed";_exports.init=collapsesections=>{const pendingPromise=new _pending.default("core_form/collapsesections"),collapsemenu=document.querySelector(collapsesections),formParent=collapsemenu.closest(SELECTORS_FORM),formContainers=formParent.querySelectorAll(SELECTORS_FORMCONTAINER);collapsemenu.addEventListener("keydown",(e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),collapsemenu.click())}));let expandedcount=0;const formcontainercount=(0,_jquery.default)(SELECTORS_FORMCONTAINER).length;formContainers.forEach((container=>{container.classList.contains(CLASSES_SHOW)&&expandedcount++})),formcontainercount===expandedcount&&(collapsemenu.classList.remove(CLASSES_COLLAPSED),collapsemenu.setAttribute("aria-expanded",!0)),collapsemenu.addEventListener("click",(()=>{let action="hide";collapsemenu.classList.contains(CLASSES_COLLAPSED)&&(action="show"),formContainers.forEach((container=>(0,_jquery.default)(container).collapse(action)))}));const collapseElementIds=[...formParent.querySelectorAll(SELECTORS_FORMHEADER)].map(((element,index)=>(element.id=element.id||"collapseElement-".concat(index),element.id)));collapsemenu.setAttribute("aria-controls",collapseElementIds.join(" ")),(0,_jquery.default)(SELECTORS_FORMCONTAINER).on("hidden.bs.collapse",(()=>{[...formContainers].every((container=>!container.classList.contains(CLASSES_SHOW)))&&(collapsemenu.classList.add(CLASSES_COLLAPSED),collapsemenu.setAttribute("aria-expanded",!1))})),(0,_jquery.default)(SELECTORS_FORMCONTAINER).on("shown.bs.collapse",(()=>{[...formContainers].every((container=>container.classList.contains(CLASSES_SHOW)))&&(collapsemenu.classList.remove(CLASSES_COLLAPSED),collapsemenu.setAttribute("aria-expanded",!0))})),pendingPromise.resolve()}}));
//# sourceMappingURL=collapsesections.min.js.map

File diff suppressed because one or more lines are too long

View File

@ -26,6 +26,7 @@ import $ from 'jquery';
import Pending from 'core/pending';
const SELECTORS = {
FORM: '.mform',
FORMHEADER: '.fheader',
FORMCONTAINER: 'fieldset > .fcontainer',
};
@ -44,8 +45,9 @@ export const init = collapsesections => {
// All jQuery in this code can be replaced when MDL-71979 is integrated (move to Bootstrap 5).
const pendingPromise = new Pending('core_form/collapsesections');
const collapsemenu = document.querySelector(collapsesections);
const formParent = collapsemenu.closest('form');
const formContainers = formParent?.querySelectorAll(SELECTORS.FORMCONTAINER) || [];
const formParent = collapsemenu.closest(SELECTORS.FORM);
const formContainers = formParent.querySelectorAll(SELECTORS.FORMCONTAINER);
collapsemenu.addEventListener('keydown', e => {
if (e.key === 'Enter' || e.key === ' ') {
@ -79,7 +81,7 @@ export const init = collapsesections => {
});
// Ensure collapse menu button adds aria-controls attribute referring to each collapsible element.
const collapseElements = $(SELECTORS.FORMHEADER);
const collapseElements = formParent.querySelectorAll(SELECTORS.FORMHEADER);
const collapseElementIds = [...collapseElements].map((element, index) => {
element.id = element.id || `collapseElement-${index}`;
return element.id;

View File

@ -6,27 +6,23 @@ Feature: Read-only forms should work
@javascript
Scenario: Shortforms expand collapsing should work for read-only forms - one-section form
Given the following "courses" exist:
| fullname | shortname | format |
| Course 1 | C1 | topics |
And the following "activities" exist:
| activity | name | intro | course | idnumber |
| label | L1 | <a href="../lib/tests/fixtures/readonlyform.php?sections=1">Fixture link</a> | C1 | label1 |
Given I am on the "C1" "Course" page logged in as "admin"
And I follow "Fixture link"
When I expand all fieldsets
Then the field "Name" matches value "Important information"
Given I log in as "admin"
And I visit "/lib/tests/fixtures/readonlyform.php?sections=1"
When I press "First section"
Then "Name" "field" should be visible
And the field "Name" matches value "Important information"
And I press "First section"
And "Name" "field" should not be visible
@javascript
Scenario: Shortforms expand collapsing should work for read-only forms - two-section form
Given the following "courses" exist:
| fullname | shortname | format |
| Course 1 | C1 | topics |
And the following "activities" exist:
| activity | name | intro | course | idnumber |
| label | L1 | <a href="../lib/tests/fixtures/readonlyform.php?sections=2">Fixture link</a> | C1 | label1 |
Given I am on the "C1" "Course" page logged in as "admin"
And I follow "Fixture link"
When I expand all fieldsets
Then the field "Name" matches value "Important information"
Then the field "Other" matches value "Other information"
Given I log in as "admin"
And I visit "/lib/tests/fixtures/readonlyform.php?sections=2"
When I press "Expand all"
Then "Name" "field" should be visible
And the field "Name" matches value "Important information"
And "Other" "field" should be visible
And the field "Other" matches value "Other information"
And I press "Collapse all"
And "Name" "field" should not be visible
And "Other" "field" should not be visible