moodle/moodle
3
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-07-23 21:40:46 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

MDL-85040 forms: Make required form icons decorative

Browse source 
The required icon in mforms is not necessary. The div containing it
already has a title attribute that enables mouse users to hover on the
icon and see its meaning.

Screen reader users will know whether a field is required or not via
the `aria-required` attribute.

Labelling the required icon via `aria-label` does not pass the
a11y audit.

Given these, it only makes sense to make the required icon decorative
for mforms.

Co-authored-by: Jun Pataleta <jun@moodle.com>
This commit is contained in:
meirzamoodle 2025-07-09 15:11:31 +07:00
parent ce34e8ff08
commit d78eccdb13
6 changed files with 24 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

4
lib/form/templates/element-advcheckbox.mustache
View file

@ -50,8 +50,8 @@
{{/text}}
<div class="ms-2 d-flex align-items-center align-self-start">
{{#required}}
<div class="text-danger" title="{{#str}}required{{/str}}">
{{#pix}}req, core, {{#str}}required{{/str}}{{/pix}}
<div class="text-danger" title="{{#str}}required{{/str}}" aria-hidden="true">
{{#pix}}req, core{{/pix}}
</div>
{{/required}}
{{{helpbutton}}}

4
lib/form/templates/element-checkbox.mustache
View file

@ -50,8 +50,8 @@
{{/text}}
<div class="ms-2 d-flex align-items-center align-self-start">
{{#required}}
<div class="text-danger" title="{{#str}}required{{/str}}">
{{#pix}}req, core, {{#str}}required{{/str}}{{/pix}}
<div class="text-danger" title="{{#str}}required{{/str}}" aria-hidden="true">
{{#pix}}req, core{{/pix}}
</div>
{{/required}}
{{{helpbutton}}}

4
lib/form/templates/element-radio.mustache
View file

@ -41,8 +41,8 @@
</label>
<div class="ms-2 d-flex align-items-center align-self-start">
{{#required}}
<div class="text-danger" title="{{#str}}required{{/str}}">
{{#pix}}req, core, {{#str}}required{{/str}}{{/pix}}
<div class="text-danger" title="{{#str}}required{{/str}}" aria-hidden="true">
{{#pix}}req, core{{/pix}}
</div>
{{/required}}
{{{helpbutton}}}

4
lib/form/templates/element-template.mustache
View file

@ -58,8 +58,8 @@
{{/ label }}{{/ label}}
<div class="form-label-addon d-flex align-items-center align-self-start">
{{#required}}
<div class="text-danger" title="{{#str}}required{{/str}}">
{{#pix}}req, core, {{#str}}required{{/str}}{{/pix}}
<div class="text-danger" title="{{#str}}required{{/str}}" aria-hidden="true">
{{#pix}}req, core{{/pix}}
</div>
{{/required}}
{{{helpbutton}}}

14
lib/formslib.php
View file

@ -1776,7 +1776,17 @@ class MoodleQuickForm extends HTML_QuickForm_DHTMLRulesTableless {
}
$this->_reqHTML = '<span class="req">' . $OUTPUT->pix_icon('req', get_string('requiredelement', 'form')) . '</span>';
$this->_advancedHTML = '<span class="adv">' . $OUTPUT->pix_icon('adv', get_string('advancedelement', 'form')) . '</span>';
$this->setRequiredNote(get_string('somefieldsrequired', 'form', $OUTPUT->pix_icon('req', get_string('requiredelement', 'form'))));
$this->setRequiredNote(
get_string(
identifier: 'somefieldsrequired',
component: 'form',
a: $OUTPUT->pix_icon(
pix: 'req',
alt: get_string('requiredelement', 'form'),
attributes: ['aria-hidden' => 'true'],
),
),
);
}
/**
@ -3194,7 +3204,7 @@ class MoodleQuickForm_Renderer extends HTML_QuickForm_Renderer_Tableless{
/** @var string Required Note template string */
var $_requiredNoteTemplate =
"\n\t\t<div class=\"fdescription required\">{requiredNote}</div>";
"\n\t\t<div class=\"fdescription required\" aria-hidden=\"true\">{requiredNote}</div>";
/**
* Collapsible buttons string template.

6
lib/templates/pix_icon_fontawesome.mustache
View file

@ -31,6 +31,7 @@
* pix
* title
* extraclasses
* aria-hidden - whether the icon is hidden from assistive technologies
Example context (json):
{
@ -38,12 +39,13 @@
"title": "Meh",
"alt": "Meh Meh",
"extraclasses": "fa-spin",
"unmappedIcon": false
"unmappedIcon": false,
"aria-hidden": false
}
}}
{{^unmappedIcon}}
<i class="icon {{key}} fa-fw {{extraclasses}}" {{#aria-hidden}}aria-hidden="true"{{/aria-hidden}} {{#title}}title="{{title}}"{{/title}} {{#alt}}role="img" aria-label="{{alt}}"{{/alt}}></i>
<i class="icon {{key}} fa-fw {{extraclasses}}"{{#aria-hidden}} aria-hidden="true"{{/aria-hidden}} {{#title}} title="{{title}}"{{/title}}{{^aria-hidden}}{{#alt}} role="img" aria-label="{{alt}}"{{/alt}}{{/aria-hidden}}></i>
{{/unmappedIcon}}
{{#unmappedIcon}}
{{! We cannot include the pix_icon template directly here because we don't have all the mustache helpers loaded. }}