MDL-75699 [docs] Document modal dialogue heading structure - #1678
Open
junpataleta wants to merge 1 commit into
Open
MDL-75699 [docs] Document modal dialogue heading structure#1678junpataleta wants to merge 1 commit into
junpataleta wants to merge 1 commit into
Conversation
Modal dialogue titles are now rendered as an h2 rather than an h5, so that opening a dialogue no longer breaks the page's heading hierarchy. Add a "Heading structure" section to the Modal Dialogues guide covering the title element and why it is fixed at level 2, nesting body headings from h3, sizing headings with utility classes rather than by element, overriding the header block, and guarding the structure with an accessibility Behat scenario. The change is backported, so the section is added to the 4.5, 5.1 and 5.2 versioned copies too. The 4.5 copy documents the Bootstrap 4 `h5` utility class instead of `fs-5`, and 4.5 and 5.1 omit the modulename_help example, which only applies from 5.2. Also add a Moodle 5.3 developer update entry. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
✅ Deploy Preview for moodledevdocs ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
junpataleta
added
the
blocked-by-tracker
Contributor
There was a problem hiding this comment.
Pull request overview
Adds documentation for the updated modal dialogue title heading semantics introduced by MDL-75699 (modal titles rendered as an h2), explaining how to maintain a valid heading hierarchy inside modal content and how to guard it with accessibility tests. The guidance is applied to the relevant versioned docs, and a Moodle 5.3 developer update entry is added to announce the change and backports.
Changes:
- Add a new “Heading structure” section to the Modal Dialogues guide describing
h2modal titles, nested headings starting ath3, and safe header overrides. - Include an accessibility-focused Behat scenario example for validating heading order in modals.
- Add a Moodle 5.3 devupdate entry describing the heading change and its backports.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| docs/guides/javascript/modal/index.md | Adds the new “Heading structure” documentation for modal titles/headings and testing guidance. |
| versioned_docs/version-5.2/guides/javascript/modal/index.md | Backports the same modal heading-structure documentation for 5.2. |
| versioned_docs/version-5.1/guides/javascript/modal/index.md | Backports the same modal heading-structure documentation for 5.1 (without the 5.2-specific example). |
| versioned_docs/version-4.5/guides/javascript/modal/index.md | Backports the guidance for 4.5, using Bootstrap 4 h5 utility-class wording. |
| docs/devupdate.md | Adds a Moodle 5.3 developer update entry announcing the change and backports. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| The `best-practice` axe ruleset checks heading order, so an `@accessibility` Behat scenario is the simplest way to guard the structure of a dialogue: | ||
|
|
||
| ```gherkin | ||
| @accessibility |
| The `best-practice` axe ruleset checks heading order, so an `@accessibility` Behat scenario is the simplest way to guard the structure of a dialogue: | ||
|
|
||
| ```gherkin | ||
| @accessibility |
| The `best-practice` axe ruleset checks heading order, so an `@accessibility` Behat scenario is the simplest way to guard the structure of a dialogue: | ||
|
|
||
| ```gherkin | ||
| @accessibility |
| The `best-practice` axe ruleset checks heading order, so an `@accessibility` Behat scenario is the simplest way to guard the structure of a dialogue: | ||
|
|
||
| ```gherkin | ||
| @accessibility |
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
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.
Note: Merge after MDL-75699 lands
Modal dialogue titles are now rendered as an h2 rather than an h5, so that opening a dialogue no longer breaks the page's heading hierarchy.
Add a "Heading structure" section to the Modal Dialogues guide covering the title element and why it is fixed at level 2, nesting body headings from h3, sizing headings with utility classes rather than by element, overriding the header block, and guarding the structure with an accessibility Behat scenario.
The change is backported, so the section is added to the 4.5, 5.1 and 5.2 versioned copies too. The 4.5 copy documents the Bootstrap 4
h5utility class instead offs-5, and 4.5 and 5.1 omit the modulename_help example, which only applies from 5.2.Also add a Moodle 5.3 developer update entry.