0003567: Toggle + / - buttons should have better alt/titles for accessibility users.

View Issue Details [ Jump to Notes ]
[ Print ]
Project
Tags
RC2
Attached Files
bug_3567.diff (19,399 bytes) 2009-07-11 16:28
Index: Themes/default/BoardIndex.template.php
===================================================================
--- Themes/default/BoardIndex.template.php	(revision 8790)
+++ Themes/default/BoardIndex.template.php	(working copy)
@@ -22,13 +22,13 @@
 		var smfNewsFadeToggle = new smfToggle("smfNewsFadeScroller", ', empty($options['collapse_news_fader']) ? 'false' : 'true', ');
 		smfNewsFadeToggle.useCookie(', $context['user']['is_guest'] ? 1 : 0, ');
 		smfNewsFadeToggle.setOptions("collapse_news_fader", "', $context['session_id'], '", "', $context['session_var'], '");
-		smfNewsFadeToggle.addToggleImage("newsupshrink", "/collapse.gif", "/expand.gif");
+		smfNewsFadeToggle.addToggleImage("newsupshrink", "/collapse.gif", "/expand.gif", null, "', $txt['expand_news'], '", "', $txt['shrink_news'], '", "', $txt['expand_alt'], '", "', $txt['shrink_alt'], '");
 		smfNewsFadeToggle.addTogglePanel("smfNewsFader");
 	// ]]></script>
 	<div class="tborder marginbottom">
 		<h3 id="newsfader" class="catbg headerpadding">
 			<a href="#" onclick="smfNewsFadeToggle.toggle(); return false;">
-				<img id="newsupshrink" src="', $settings['images_url'], '/', empty($options['collapse_news_fader']) ? 'collapse.gif' : 'expand.gif', '" alt="*" title="', $txt['upshrink_description'], '" align="bottom" />
+				<img id="newsupshrink" src="', $settings['images_url'], '/', empty($options['collapse_news_fader']) ? 'collapse.gif' : 'expand.gif', '" alt="', empty($options['collapse_news_fader']) ? $txt['shrink_alt'] : $txt['expand_alt'], '" title="', empty($options['collapse_news_fader']) ? $txt['shrink_news'] : $txt['expand_news'], '"" align="bottom" />
 			</a>&nbsp;', $txt['news'], '
 		</h3>
 		<div class="windowbg2" id="smfNewsFader"', empty($options['collapse_news_fader']) ? '' : ' style="display: none;"', '>
@@ -72,7 +72,7 @@
 		// If this category even can collapse, show a link to collapse it.
 		if ($category['can_collapse'])
 			echo '
-			<a href="', $category['collapse_href'], '">', $category['collapse_image'], '</a>&nbsp;';
+			<a href="', $category['collapse_href'], '" title="', !$category['is_collapsed'] ? $txt['shrink_category'] : $txt['expand_category'], '">', $category['collapse_image'], '</a>&nbsp;';
 
 		echo $category['link'];
 
@@ -223,7 +223,7 @@
 		var infoHeader = new smfToggle("upshrinkIC", ', empty($options['collapse_header_ic']) ? 'false' : 'true', ');
 		infoHeader.useCookie(', $context['user']['is_guest'] ? 1 : 0, ');
 		infoHeader.setOptions("collapse_header_ic", "', $context['session_id'], '", "', $context['session_var'], '");
-		infoHeader.addToggleImage("upshrink_ic", "/collapse.gif", "/expand.gif");
+		infoHeader.addToggleImage("upshrink_ic", "/collapse.gif", "/expand.gif", null, "', $txt['expand_ic'], '", "', $txt['shrink_ic'], '", "', $txt['expand_alt'], '", "', $txt['shrink_alt'], '");
 		infoHeader.addTogglePanel("upshrinkHeaderIC");
 	// ]]></script>';
 
@@ -231,7 +231,7 @@
 	echo '
 	<div class="tborder clearfix" id="infocenterframe">
 		<h3 class="catbg headerpadding">
-			<a href="#" onclick="infoHeader.toggle(); return false;"><img id="upshrink_ic" src="', $settings['images_url'], '/', empty($options['collapse_header_ic']) ? 'collapse.gif' : 'expand.gif', '" alt="*" title="', $txt['upshrink_description'], '" /></a>
+			<a href="#" onclick="infoHeader.toggle(); return false;"><img id="upshrink_ic" src="', $settings['images_url'], '/', empty($options['collapse_header_ic']) ? 'collapse.gif' : 'expand.gif', '" alt="', empty($options['collapse_header_ic']) ? $txt['shrink_alt'] : $txt['expand_alt'], '" title="', empty($options['collapse_header_ic']) ? $txt['shrink_ic'] : $txt['expand_ic'], '" /></a>
 			', sprintf($txt['info_center_title'], $context['forum_name_html_safe']), '
 		</h3>
 		<div id="upshrinkHeaderIC"', empty($options['collapse_header_ic']) ? '' : ' style="display: none;"', '>';
Index: Themes/default/Display.template.php
===================================================================
--- Themes/default/Display.template.php	(revision 8790)
+++ Themes/default/Display.template.php	(working copy)
@@ -343,7 +343,7 @@
 			// Are we showing the warning status?
 			if (!isset($context['disabled_fields']['warning_status']) && $message['member']['warning_status'] && ($context['user']['can_mod'] || (!empty($modSettings['warning_show']) && ($modSettings['warning_show'] > 1 || $message['member']['id'] == $context['user']))))
 				echo '
-						<li>', $context['can_issue_warning'] ? '<a href="' . $scripturl . '?action=profile;area=issuewarning;u=' . $message['member']['id'] . '">' : '', '<img src="', $settings['images_url'], '/warning_', $message['member']['warning_status'], '.gif" alt="', $txt['user_warn_' . $message['member']['warning_status']], '" />', $context['can_issue_warning'] ? '</a>' : '', '<span class="warn_', $message['member']['warning_status'], '">', $txt['warn_' . $message['member']['warning_status']], '</span></li>';
+						<li><br />', $context['can_issue_warning'] ? '<a href="' . $scripturl . '?action=profile;area=issuewarning;u=' . $message['member']['id'] . '">' : '', '<img src="', $settings['images_url'], '/warning_', $message['member']['warning_status'], '.gif" alt="', $txt['user_warn_' . $message['member']['warning_status']], '"  align="middle" />', $context['can_issue_warning'] ? '</a>' : '', ' <span class="warn_', $message['member']['warning_status'], '">', $txt['warn_' . $message['member']['warning_status']], '</span></li>';
 		}
 		// Otherwise, show the guest's email.
 		elseif (in_array($message['member']['show_email'], array('yes', 'yes_permission_override', 'no_through_forum')))
@@ -609,7 +609,7 @@
 		echo '
 	<h3 class="catbg headerpadding">
 		<a href="javascript:oQuickReply.swap();">
-			<img src="', $settings['images_url'], '/', $options['display_quick_reply'] == 2 ? 'collapse' : 'expand', '.gif" alt="+" id="quickReplyExpand" />
+			<img src="', $settings['images_url'], '/', $options['display_quick_reply'] == 2 ? 'collapse' : 'expand', '.gif" alt="', $options['display_quick_reply'] == 2 ? $txt['shrink_alt'] : $txt['expand_alt'], '" title="', $options['display_quick_reply'] == 2 ? $txt['shrink_quickreply'] : $txt['expand_quickreply'], '" id="quickReplyExpand" />
 		</a>
 		<a href="javascript:oQuickReply.swap();">', $txt['quick_reply'], '</a>
 	</h3>
@@ -678,7 +678,11 @@
 		sImageId: "quickReplyExpand",
 		sImageCollapsed: "collapse.gif",
 		sImageExpanded: "expand.gif",
-		sJumpAnchor: "quickreply"
+		sJumpAnchor: "quickreply",
+		sExpandLabel: \'', $txt['expand_quickreply'], '\',
+		sShrinkLabel: \'', $txt['shrink_quickreply'], '\',
+		sExpandAlt: \'', $txt['expand_alt'], '\',
+		sShrinkAlt: \'', $txt['shrink_alt'], '\'
 	});';
 
 	if (!empty($options['display_quick_mod']) && $options['display_quick_mod'] == 1 && $context['can_remove_post'])
Index: Themes/default/Help.template.php
===================================================================
--- Themes/default/Help.template.php	(revision 8790)
+++ Themes/default/Help.template.php	(working copy)
@@ -237,7 +237,8 @@
 			function collapseExpandCategory()
 			{
 					document.getElementById("collapseArrow").src = smf_images_url + "/" + (collapseExpand ? "collapse.gif" : "expand.gif");
-					document.getElementById("collapseArrow").alt = collapseExpand ? "-" : "+";
+					document.getElementById("collapseArrow").alt = collapseExpand ? "', $txt['shrink_alt'], '" : "', $txt['expand_alt'], '";
+					document.getElementById("collapseArrow").title = collapseExpand ? "', $txt['shrink_category'], '" : "', $txt['expand_category'], '";
 					document.getElementById("collapseCategory").style.display = collapseExpand ? "" : "none";
 					collapseExpand = !collapseExpand;
 			}
@@ -251,7 +252,7 @@
 			<div class="tborder">
 				<table border="0" width="100%" cellspacing="1" cellpadding="5">
 					<tr>
-						<td colspan="4" class="catbg" height="18"><a href="javascript:collapseExpandCategory();"><img src="', $settings['images_url'], '/collapse.gif" alt="-" border="0" id="collapseArrow" name="collapseArrow" /></a>&nbsp; <a href="javascript:collapseExpandCategory();" class="board">', $txt['manual_index_cat_name'], '</a></td>
+						<td colspan="4" class="catbg" height="18"><a href="javascript:collapseExpandCategory();"><img src="', $settings['images_url'], '/collapse.gif" alt="', $txt['shrink_alt'], '" title="', $txt['shrink_category'], '" border="0" id="collapseArrow" name="collapseArrow" /></a>&nbsp; <a href="javascript:collapseExpandCategory();" class="board">', $txt['manual_index_cat_name'], '</a></td>
 					</tr>
 					<tr id="collapseCategory" class="windowbg2">
 						<td class="windowbg" width="6%" align="center" valign="top"><img src="', $settings['images_url'], '/on.gif" id="board-new-or-not" alt="', $txt['manual_index_new_posts'], '" name="board-new-or-not" /></td>
@@ -1651,7 +1652,8 @@
 			function swapOptions()
 			{
 						document.getElementById("postMoreExpand").src = smf_images_url + "/" + (currentSwap ? "collapse.gif" : "expand.gif");
-						document.getElementById("postMoreExpand").alt = currentSwap ? "-" : "+";
+						document.getElementById("postMoreExpand").alt = currentSwap ? "', $txt['shrink_alt'], '" : "', $txt['expand_alt'], '";
+						document.getElementById("postMoreExpand").title = currentSwap ? "', $txt['shrink_addopts'], '" : "', $txt['expand_addopts'], '";
 						document.getElementById("postMoreOptions").style.display = currentSwap ? "" : "none";
 						if (document.getElementById("postAttachment"))
 								document.getElementById("postAttachment").style.display = currentSwap ? "" : "none";
@@ -1667,7 +1669,7 @@
 						<td class="windowbg">
 							<table border="0" cellpadding="3" width="100%">
 								<tr>
-									<td colspan="2" style="padding-left: 5ex;"><a href="javascript:swapOptions();"><img src="', $settings['images_url'], '/expand.gif" alt="+" border="0" id="postMoreExpand" name="postMoreExpand" /></a> <a href="javascript:swapOptions();" class="board"><strong>', $txt['manual_posting_sec_additional_options'], '...</strong></a></td>
+									<td colspan="2" style="padding-left: 5ex;"><a href="javascript:swapOptions();"><img src="', $settings['images_url'], '/expand.gif" alt="', $txt['expand_alt'], '" title="', $txt['expand_quickreply'], '" border="0" id="postMoreExpand" name="postMoreExpand" /></a> <a href="javascript:swapOptions();" class="board"><strong>', $txt['manual_posting_sec_additional_options'], '...</strong></a></td>
 								</tr>
 								<tr>
 									<td></td>
Index: Themes/default/index.template.php
===================================================================
--- Themes/default/index.template.php	(revision 8790)
+++ Themes/default/index.template.php	(working copy)
@@ -173,7 +173,7 @@
 		var mainHeader = new smfToggle("upshrink", ', empty($options['collapse_header']) ? 'false' : 'true', ');
 		mainHeader.useCookie(', $context['user']['is_guest'] ? 1 : 0, ');
 		mainHeader.setOptions("collapse_header", "', $context['session_id'], '", "', $context['session_var'], '");
-		mainHeader.addToggleImage("upshrink", "/upshrink.gif", "/upshrink2.gif");
+		mainHeader.addToggleImage("upshrink", "/upshrink.gif", "/upshrink2.gif", null, "', $txt['expand_header'], '", "', $txt['shrink_header'], '", "', $txt['expand_alt'], '", "', $txt['shrink_alt'], '");
 		mainHeader.addTogglePanel("user_section");
 		mainHeader.addTogglePanel("news_section");
 	// ]]></script>';
@@ -209,7 +209,7 @@
 		<ul id="greeting_section" class="reset titlebg2">
 			<li id="time" class="smalltext floatright">
 				' , $context['current_time'], '
-				<a href="#" onclick="mainHeader.toggle(); return false;"><img id="upshrink" src="', $settings['images_url'], '/', empty($options['collapse_header']) ? 'upshrink.gif' : 'upshrink2.gif', '" alt="*" title="', $txt['upshrink_description'], '" align="bottom" /></a>
+				<a href="#" onclick="mainHeader.toggle(); return false;"><img id="upshrink" src="', $settings['images_url'], '/', empty($options['collapse_header']) ? 'upshrink.gif' : 'upshrink2.gif', '" alt="',  empty($options['collapse_header']) ? $txt['shrink_alt'] : $txt['expand_alt'], '" title="',  empty($options['collapse_header']) ? $txt['shrink_header'] : $txt['expand_header'], '" align="bottom" /></a>
 			</li>';
 
 	if ($context['user']['is_logged'])
Index: Themes/default/languages/index.english.php
===================================================================
--- Themes/default/languages/index.english.php	(revision 8790)
+++ Themes/default/languages/index.english.php	(working copy)
@@ -651,7 +651,23 @@
 $txt['movetopic_auto_topic'] = '[TOPIC LINK]';
 $txt['movetopic_default'] = 'This topic has been moved to ' . $txt['movetopic_auto_board'] . ".\n\n" . $txt['movetopic_auto_topic'];
 
+$txt['expand_alt'] = '+';
+$txt['shrink_alt'] = '-';
 $txt['upshrink_description'] = 'Shrink or expand the header.';
+$txt['expand_header'] = 'Expand the header';
+$txt['shrink_header'] = 'Shrink the header';
+$txt['expand_news'] = 'Expand the News';
+$txt['shrink_news'] = 'Shrink the News';
+$txt['expand_ic'] = 'Expand the Info Center';
+$txt['shrink_ic'] = 'Shrink the Info Center';
+$txt['expand_category'] = 'Expand this category';
+$txt['shrink_category'] = 'Shrink this category';
+$txt['expand_quickreply'] = 'Expand quick reply';
+$txt['shrink_quickreply'] = 'Shrink quick reply';
+$txt['expand_addopts'] = 'Expand additional options';
+$txt['shrink_addopts'] = 'Shrink additional options';
+$txt['expand_search'] = 'Expand list of boards to search';
+$txt['shrink_search'] = 'Shrink list of boards to search';
 
 $txt['mark_unread'] = 'Mark unread';
 
Index: Themes/default/Post.template.php
===================================================================
--- Themes/default/Post.template.php	(revision 8790)
+++ Themes/default/Post.template.php	(working copy)
@@ -53,7 +53,8 @@
 			function swapOptions()
 			{
 				document.getElementById("postMoreExpand").src = smf_images_url + "/" + (currentSwap ? "collapse.gif" : "expand.gif");
-				document.getElementById("postMoreExpand").alt = currentSwap ? "-" : "+";
+				document.getElementById("postMoreExpand").alt = currentSwap ? "', $txt['shrink_alt'],'" : "', $txt['expand_alt'],'";
+				document.getElementById("postMoreExpand").title = currentSwap ? "', $txt['shrink_addopts'],'" : "', $txt['expand_addopts'],'";
 
 				document.getElementById("postMoreOptions").style.display = currentSwap ? "" : "none";
 
@@ -463,7 +464,7 @@
 		echo '
 									<tr>
 										<td colspan="2" style="padding-left: 5ex;">
-											<a href="javascript:swapOptions();"><img src="', $settings['images_url'], '/expand.gif" alt="+" id="postMoreExpand" /></a> <a href="javascript:swapOptions();"><strong>', $txt['post_additionalopt'], '</strong></a>
+											<a href="javascript:swapOptions();"><img src="', $settings['images_url'], '/expand.gif" alt="', $txt['expand_alt'], '" title="', $txt['expand_addopts'], '" id="postMoreExpand" /></a> <a href="javascript:swapOptions();"><strong>', $txt['post_additionalopt'], '</strong></a>
 										</td>
 									</tr>';
 
Index: Themes/default/scripts/script.js
===================================================================
--- Themes/default/scripts/script.js	(revision 8790)
+++ Themes/default/scripts/script.js	(working copy)
@@ -774,7 +774,12 @@
 		{
 			var curImage = document.getElementById(this.imageToggles[x][0]);
 			if (curImage)
+			{
 				curImage.src = mode ? this.imageToggles[x][2] : this.imageToggles[x][1];
+				// Toggle the title attribute if one was set.
+				if (this.imageToggles[x][4] !== null)
+					curImage.title = mode ? this.imageToggles[x][4] : this.imageToggles[x][5];
+			}
 		}
 
 		// Now toggle the panels.
@@ -801,14 +806,18 @@
 		themeOptions[5] = preferenceKey == null ? '' : ';admin_key=' + preferenceKey;
 	}
 
-	// Add an image to toggle (id, mode = 0 image, mode = 1 image)
-	function addToggleImage(imageID, mode0Image, mode1Image, useImagePath)
+	// Add an image to toggle (id, mode = 0 image, mode = 1 image, path, title text, title text, alt text, alt text)
+	function addToggleImage(imageID, mode0Image, mode1Image, useImagePath, mode0Title, mode1Title, mode0Alt, mode1Alt)
 	{
 		var curIndex = this.imageToggles.length;
 		this.imageToggles[curIndex] = Array(3);
 		this.imageToggles[curIndex][0] = imageID;
 		this.imageToggles[curIndex][1] = (useImagePath == null ? smf_images_url : '') + mode0Image;
 		this.imageToggles[curIndex][2] = (useImagePath == null ? smf_images_url : '') + mode1Image;
+		this.imageToggles[curIndex][4] = mode0Title === null ? null : mode0Title;
+		this.imageToggles[curIndex][5] = mode1Title === null ? null : mode1Title;
+		this.imageToggles[curIndex][6] = mode0Alt === null ? null : mode0Alt;
+		this.imageToggles[curIndex][7] = mode1Alt === null ? null : mode1Alt;
 	}
 
 	// Add a panel which should toggle with the header.
Index: Themes/default/scripts/xml_topic.js
===================================================================
--- Themes/default/scripts/xml_topic.js	(revision 8790)
+++ Themes/default/scripts/xml_topic.js	(working copy)
@@ -66,6 +66,8 @@
 QuickReply.prototype.swap = function ()
 {
 	document.getElementById(this.opt.sImageId).src = this.opt.sImagesUrl + "/" + (this.bCollapsed ? this.opt.sImageCollapsed : this.opt.sImageExpanded);
+	document.getElementById(this.opt.sImageId).alt = !this.bCollapsed ? this.opt.sExpandAlt : this.opt.sShrinkAlt;
+	document.getElementById(this.opt.sImageId).title = !this.bCollapsed ? this.opt.sExpandLabel : this.opt.sShrinkLabel;
 	document.getElementById(this.opt.sContainerId).style.display = this.bCollapsed ? '' : 'none';
 
 	this.bCollapsed = !this.bCollapsed;
Index: Themes/default/Search.template.php
===================================================================
--- Themes/default/Search.template.php	(revision 8790)
+++ Themes/default/Search.template.php	(working copy)
@@ -153,7 +153,7 @@
 		{
 			echo '
 					<fieldset class="windowbg2" style="padding: 10px;">
-						<a href="javascript:void(0);" onclick="expandCollapseBoards(); return false;"><img src="', $settings['images_url'], '/expand.gif" id="expandBoardsIcon" alt="" /></a> <a href="javascript:void(0);" onclick="expandCollapseBoards(); return false;"><strong>', $txt['choose_board'], '</strong></a><br />
+						<a href="javascript:void(0);" onclick="expandCollapseBoards(); return false;"><img src="', $settings['images_url'], '/expand.gif" id="expandBoardsIcon" alt="', $txt['expand_alt'], '" title="', $txt['expand_search'], '" /></a> <a href="javascript:void(0);" onclick="expandCollapseBoards(); return false;"><strong>', $txt['choose_board'], '</strong></a><br />
 
 						<table id="searchBoardsExpand" width="100%" border="0" cellpadding="1" cellspacing="0" align="center" style="margin-top: 1ex;', $context['boards_check_all'] ? ' display: none;' : '', '">';
 
@@ -229,6 +229,8 @@
 
 			document.getElementById("searchBoardsExpand").style.display = current ? "none" : "";
 			document.getElementById("expandBoardsIcon").src = smf_images_url + (current ? "/expand.gif" : "/collapse.gif");
+			document.getElementById("expandBoardsIcon").alt = !current ? "', $txt['shrink_alt'],'" : "', $txt['expand_alt'],'";
+			document.getElementById("expandBoardsIcon").title = !current ? "', $txt['shrink_search'],'" : "', $txt['expand_search'],'";
 		}';
 
 	echo '
bug_3567.diff (19,399 bytes) 2009-07-11 16:28
titles.png (41,764 bytes) 2009-07-11 16:28

titles.png (41,764 bytes) 2009-07-11 16:28
Relationships
Relationships
Notes
bugnote:0009096 regularexpression (Viewer) 2009-07-11 16:31	Attached a patch of what I've done so far (core only) I haven't committed so far because of the bugs that Aaron is fixing. And I need to do it for curve also. Adds + / - are used as alt text (shown when images are disabled) [where not done so already] Makes the + / - a language string Makes the + / - change on shrink/expand Adds different Expand vs Shrink language strings Adds per area language string instead of same one P.S I must not forget it includes a little fix for warning info on display. Thoughts anyone?

bugnote:0009885 karlbenson (SMF Friend) 2009-09-18 16:56	Well my patch has been killed with the new js functions.

bugnote:0009901 [SiNaN] (Viewer) 2009-09-19 03:50	It looked great though, for accessibility. ;)

bugnote:0010637 groundup (SMF Friend) 2009-10-29 23:10	Mark as resolved? Looks resolved by Compuart's JS changes.

bugnote:0011367 Arantor_old (Viewer) 2009-12-31 05:53	No, this isn't resolved in Curve. Also going to remove With Fix because the fix isn't a current one as acknowledged above.

bugnote:0011379 karlbenson (SMF Friend) 2009-12-31 19:15	Indeed, a new patch would be needed :P

bugnote:0015024 Antes (Team Member) 2014-05-31 14:48	Fixed with https://github.com/SimpleMachines/SMF2.1/pull/1731
Notes
News:

Simple Machines Bug and Feature Tracker
