MDL-85990 mod_forum: Fix toggle accessibility in overview page

- Add aria-label to toggle buttons
- Add SRLogger to toggle button interactions
This commit is contained in:
Mikel Martín
2025-09-15 10:27:40 +02:00
parent e4c5c64087
commit 360645cabb
5 changed files with 47 additions and 9 deletions
+2 -2
View File
@@ -1,10 +1,10 @@
define("mod_forum/forum_overview_toggle",["exports","core/notification","core/str","mod_forum/repository"],(function(_exports,_notification,_str,_repository){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}
define("mod_forum/forum_overview_toggle",["exports","core/notification","core/str","core/local/reactive/srlogger","mod_forum/repository"],(function(_exports,_notification,_str,_srlogger,_repository){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}
/**
* Handle forum subscription/tracking toggling.
*
* @module mod_forum/forum_overview_toggle
* @copyright 2025 Sara Arjona <sara@moodle.com>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/function registerEventListeners(toggleElement){toggleElement.addEventListener("change",(()=>{"forum-subscription-toggle"===toggleElement.dataset.type&&async function(toggleElement){const forumId=toggleElement.dataset.forumid,newState=toggleElement.dataset.targetstate;if(!forumId||!newState)return;try{const newTargetState=!!(await _repository.default.setForumSubscriptionState(forumId,newState)).userstate.subscribed;updateSwitchState(toggleElement,newTargetState,newTargetState?"subscribe":"unsubscribe")}catch(error){_notification.default.exception(error)}}(toggleElement),"forum-track-toggle"===toggleElement.dataset.type&&async function(toggleElement){const forumId=toggleElement.dataset.forumid,newState=toggleElement.dataset.targetstate;if(!forumId||!newState)return;try{const newTargetState=!!(await _repository.default.setForumTrackingState(forumId,newState)).userstate.tracked;updateSwitchState(toggleElement,newTargetState,newTargetState?"trackingon":"trackingoff")}catch(error){_notification.default.exception(error)}}(toggleElement)}))}async function updateSwitchState(toggleElement,newTargetState,stringKey){toggleElement.dataset.targetstate=newTargetState?0:1;const string=await(0,_str.getString)(stringKey,"mod_forum");toggleElement.closest("td").querySelector('label[for="'.concat(toggleElement.id,'"] span')).textContent=string}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=void 0,_notification=_interopRequireDefault(_notification),_repository=_interopRequireDefault(_repository);_exports.init=toggleSelector=>{const toggleElement=document.querySelector(toggleSelector);toggleElement&&registerEventListeners(toggleElement)}}));
*/function registerEventListeners(toggleElement){toggleElement.addEventListener("change",(()=>{"forum-subscription-toggle"===toggleElement.dataset.type&&async function(toggleElement){const forumId=toggleElement.dataset.forumid,forumName=toggleElement.dataset.forumname,newState=toggleElement.dataset.targetstate;if(!forumId||!newState)return;try{const newTargetState=!!(await _repository.default.setForumSubscriptionState(forumId,newState)).userstate.subscribed;await updateSwitchState(toggleElement,newTargetState,newTargetState?"subscribe":"unsubscribe");const feedbackMessage=await(0,_str.getString)(newTargetState?"subscribedtoforum":"unsubscribedfromforum","mod_forum",forumName);(new _srlogger.default).add({feedbackMessage:feedbackMessage})}catch(error){_notification.default.exception(error)}}(toggleElement),"forum-track-toggle"===toggleElement.dataset.type&&async function(toggleElement){const forumId=toggleElement.dataset.forumid,forumName=toggleElement.dataset.forumname,newState=toggleElement.dataset.targetstate;if(!forumId||!newState)return;try{const newTargetState=!!(await _repository.default.setForumTrackingState(forumId,newState)).userstate.tracked;await updateSwitchState(toggleElement,newTargetState,newTargetState?"trackingon":"trackingoff");const feedbackMessage=await(0,_str.getString)(newTargetState?"trackedforforum":"untrackedforforum","mod_forum",forumName);(new _srlogger.default).add({feedbackMessage:feedbackMessage})}catch(error){_notification.default.exception(error)}}(toggleElement)}))}async function updateSwitchState(toggleElement,newTargetState,stringKey){toggleElement.dataset.targetstate=newTargetState?0:1;const string=await(0,_str.getString)(stringKey,"mod_forum");toggleElement.closest("td").querySelector('label[for="'.concat(toggleElement.id,'"] span')).textContent=string}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=void 0,_notification=_interopRequireDefault(_notification),_srlogger=_interopRequireDefault(_srlogger),_repository=_interopRequireDefault(_repository);_exports.init=toggleSelector=>{const toggleElement=document.querySelector(toggleSelector);toggleElement&&registerEventListeners(toggleElement)}}));
//# sourceMappingURL=forum_overview_toggle.min.js.map
File diff suppressed because one or more lines are too long
@@ -23,6 +23,7 @@
import Notification from 'core/notification';
import {getString} from 'core/str';
import SRLogger from 'core/local/reactive/srlogger';
import Repository from 'mod_forum/repository';
/**
@@ -48,6 +49,7 @@ function registerEventListeners(toggleElement) {
*/
async function subscriptionToggleClickHandler(toggleElement) {
const forumId = toggleElement.dataset.forumid;
const forumName = toggleElement.dataset.forumname;
const newState = toggleElement.dataset.targetstate;
if (!forumId || !newState) {
return;
@@ -56,11 +58,18 @@ async function subscriptionToggleClickHandler(toggleElement) {
const context = await Repository.setForumSubscriptionState(forumId, newState);
const newTargetState = !!context.userstate.subscribed;
updateSwitchState(
await updateSwitchState(
toggleElement,
newTargetState,
newTargetState ? 'subscribe' : 'unsubscribe',
);
const feedbackMessage = await getString(
newTargetState ? 'subscribedtoforum' : 'unsubscribedfromforum',
'mod_forum',
forumName,
);
new SRLogger().add({feedbackMessage});
} catch (error) {
Notification.exception(error);
}
@@ -74,6 +83,7 @@ async function subscriptionToggleClickHandler(toggleElement) {
*/
async function trackToggleClickHanldler(toggleElement) {
const forumId = toggleElement.dataset.forumid;
const forumName = toggleElement.dataset.forumname;
const newState = toggleElement.dataset.targetstate;
if (!forumId || !newState) {
return;
@@ -82,11 +92,18 @@ async function trackToggleClickHanldler(toggleElement) {
const context = await Repository.setForumTrackingState(forumId, newState);
const newTargetState = !!context.userstate.tracked;
updateSwitchState(
await updateSwitchState(
toggleElement,
newTargetState,
newTargetState ? 'trackingon' : 'trackingoff',
);
const feedbackMessage = await getString(
newTargetState ? 'trackedforforum' : 'untrackedforforum',
'mod_forum',
forumName,
);
new SRLogger().add({feedbackMessage});
} catch (error) {
Notification.exception(error);
}
@@ -201,12 +201,18 @@ class overview extends \core_courseformat\activityoverviewbase {
$label = get_string('trackforum', 'mod_forum');
}
$arialabel = $tracked
? get_string('untrackforforum', 'mod_forum', $this->forum->name)
: get_string('trackforforum', 'mod_forum', $this->forum->name);
$renderer = $this->rendererhelper->get_renderer('mod_forum');
$dataattributes = [
$extraattributes = [
['name' => 'data-type', 'value' => 'forum-track-toggle'],
['name' => 'data-action', 'value' => 'toggle'],
['name' => 'data-forumid', 'value' => $this->forum->id],
['name' => 'data-forumname', 'value' => $this->forum->name],
['name' => 'data-targetstate', 'value' => !$tracked],
['name' => 'aria-label', 'value' => $arialabel],
];
$content = $renderer->render_from_template(
'core/toggle',
@@ -214,7 +220,7 @@ class overview extends \core_courseformat\activityoverviewbase {
'id' => 'forum-track-toggle-' . $this->forum->id,
'checked' => $tracked,
'disabled' => $disabled,
'extraattributes' => $dataattributes,
'extraattributes' => $extraattributes,
'label' => $label,
'labelclasses' => 'visually-hidden',
],
@@ -265,20 +271,27 @@ class overview extends \core_courseformat\activityoverviewbase {
}
}
$arialabel = $subscribed
? get_string('unsubscribefromforum', 'mod_forum', $this->forum->name)
: get_string('subscribetoforum', 'mod_forum', $this->forum->name);
$renderer = $this->rendererhelper->get_renderer('mod_forum');
$dataattributes = [
$extraattributes = [
['name' => 'data-type', 'value' => 'forum-subscription-toggle'],
['name' => 'data-action', 'value' => 'toggle'],
['name' => 'data-forumid', 'value' => $this->forum->id],
['name' => 'data-forumname', 'value' => $this->forum->name],
['name' => 'data-targetstate', 'value' => !$subscribed],
['name' => 'aria-label', 'value' => $arialabel],
];
$content = $renderer->render_from_template(
'core/toggle',
[
'id' => 'forum-subscription-toggle-' . $this->forum->id,
'checked' => $subscribed,
'disabled' => $disabled,
'extraattributes' => $dataattributes,
'extraattributes' => $extraattributes,
'label' => $label,
'labelclasses' => 'visually-hidden',
],
+8
View File
@@ -677,6 +677,8 @@ $string['subject'] = 'Subject';
$string['subplugintype_forumreport'] = 'Forum report';
$string['subplugintype_forumreport_plural'] = 'Forum reports';
$string['subscribe'] = 'Subscribe to forum';
$string['subscribedtoforum'] = 'Subscribed to {$a}';
$string['subscribetoforum'] = 'Subscribe to forum {$a}';
$string['subscribediscussion'] = 'Subscribe to this discussion';
$string['subscribeall'] = 'Subscribe everyone to this forum';
$string['subscribeenrolledonly'] = 'Sorry, only enrolled users are allowed to subscribe to forum post notifications.';
@@ -715,6 +717,8 @@ $string['timestartenderror'] = 'Display end date cannot be earlier than the star
$string['togglediscussionmenu'] = 'Toggle the discussion menu';
$string['togglefullscreen'] = 'Toggle full screen';
$string['togglesettingsdrawer'] = 'Toggle settings drawer';
$string['trackedforforum'] = 'Tracking on for {$a}';
$string['trackforforum'] = 'Track new posts for forum {$a}';
$string['trackforum'] = 'Track unread posts';
$string['trackreadposts_header'] = 'Forum tracking';
$string['tracking'] = 'Track';
@@ -734,6 +738,7 @@ $string['unreadposts'] = 'Unread posts';
$string['unreadpostsnumber'] = '{$a} unread posts';
$string['unreadpostsone'] = '1 unread post';
$string['unsubscribe'] = 'Unsubscribe from forum';
$string['unsubscribefromforum'] = 'Unsubscribe from forum {$a}';
$string['unsubscribelink'] = 'Unsubscribe from this forum: {$a}';
$string['unsubscribediscussion'] = 'Unsubscribe from this discussion';
$string['unsubscribediscussionlink'] = 'Unsubscribe from this discussion: {$a}';
@@ -744,7 +749,10 @@ $string['unsubscribeallconfirmdiscussions'] = 'You are currently subscribed to {
$string['unsubscribealldone'] = 'All optional forum subscriptions were removed. You will still receive notifications from forums with forced subscription. To manage forum notifications go to Messaging in My Profile Settings.';
$string['unsubscribeallempty'] = 'You are not subscribed to any forums. To disable all notifications from this server go to Messaging in My Profile Settings.';
$string['unsubscribed'] = 'Unsubscribed';
$string['unsubscribedfromforum'] = 'Unsubscribed from {$a}';
$string['unsubscribeshort'] = 'Unsubscribe';
$string['untrackedforforum'] = 'Tracking off for {$a}';
$string['untrackforforum'] = 'Do not track new posts for forum {$a}';
$string['useexperimentalui'] = 'Use experimental nested discussion view';
$string['usermarksread'] = 'Manual message read marking';
$string['usernavigation'] = 'User navigation';