Advertisement:
Anonymous Login
07-24-2017 02:41 PM

View Issue Details Jump to Notes ]
IDProjectCategoryView StatusLast Update
0003567SMF 3.0 "Saguaro"Templatepublic2014-05-31 14:48
Reporterregularexpression 
PrioritynormalSeverityminorReproducibilityhave not tried
StatusclosedResolutionfixed 
Summary0003567: Toggle + / - buttons should have better alt/titles for accessibility users.
DescriptionSomeone mentioned this to me recently (or did i read it somewhere).

Anyways.

The current title like "Shrink/Expand the header" isn't useful because it doesn't explain the current state to accessibility users.

"Shrink the header", "Expand the header" but never both ;)

Also the "*" "-" and "+" ones could also do with a proper title too.
TagsRC2
Attached Files
  • diff file icon 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 '
    
    diff file icon bug_3567.diff (19,399 bytes) 2009-07-11 16:28 +
  • png file icon titles.png (41,764 bytes) 2009-07-11 16:28 -
    png file icon titles.png (41,764 bytes) 2009-07-11 16:28 +

-Relationships
+Relationships

-Notes

bugnote:0009096

regularexpression (Viewer)

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)

Well my patch has been killed with the new js functions.

bugnote:0009901

[SiNaN] (Viewer)

It looked great though, for accessibility. ;)

bugnote:0010637

groundup (SMF Friend)

Mark as resolved? Looks resolved by Compuart's JS changes.

bugnote:0011367

Arantor_old (Viewer)

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)

Indeed, a new patch would be needed :P

bugnote:0015024

Antes (Team Member)

Fixed with https://github.com/SimpleMachines/SMF2.1/pull/1731
+Notes
MantisBT (Modified for SMF Intergration)[^] Copyright © 2000 - 2010 Mantis Group