Merge pull request Aspen-Discovery#1768 from catsoup11789/24.05.00

accessibility updates

Author: K-Alette

code/web/interface/themes/responsive/MyAccount/myPreferences.tpl

@@ -35,9 +35,9 @@
 						<div class="form-group propertyRow">
 							<label for="username">{translate text="Username" isPublicFacing=true}</label>
 							<input type="text" name="username" id="username" value="{$editableUsername|escape}" size="25" minlength="6" maxlength="25" class="form-control">
-							<a href="#" onclick="$('#usernameHelp').toggle()">{translate text="What is this?" isPublicFacing=true}</a>
+							<a id="usernameHelpButton" href="#" role="button" aria-controls="usernameHelp" aria-expanded="false"><i class="fa fa-question-circle" role="presentation"></i> {translate text="What is this?" isPublicFacing=true}</a>
 							<div id="usernameHelp" style="display:none">
-								{translate text="A username is an optional feature. If you set one, your username will be your alias on hold slips and can also be used to log into your account in place of your card number.  A username can be set, reset or removed from the “My Preferences” section of your online account. Usernames must be between 6 and 25 characters (letters and number only, no special characters)." isPublicFacing=true}
+								<p>{translate text="A username is an optional feature. If you set one, your username will be your alias on hold slips and can also be used to log into your account in place of your card number.  A username can be set, reset or removed from the “My Preferences” section of your online account. Usernames must be between 6 and 25 characters (letters and number only, no special characters)." isPublicFacing=true}</p>
 							</div>
 						</div>
 					{/if}
@@ -232,6 +232,18 @@
 					{* Initiate any checkbox with a data attribute set to data-switch=""  as a bootstrap switch *}
 					{literal}
 					$(function(){ $('input[type="checkbox"][data-switch]').bootstrapSwitch()});
+					$("#usernameHelpButton").click(function() {
+						var helpButton = $(this);
+						if (helpButton.attr("aria-expanded") === "true") {
+							$("#usernameHelp").css('display', 'none');
+							$("#usernameHelpButton").attr("aria-expanded","false");
+						}
+						else if (helpButton.attr("aria-expanded") === "false") {
+							$("#usernameHelp").css('display', 'block');
+							$("#usernameHelpButton").attr("aria-expanded","true");
+						}
+						return false;
+					})
 					{/literal}
 				</script>
 			{/if}
@@ -241,4 +253,4 @@
 			</div>
 		{/if}
 	</div>
-{/strip}
+{/strip}

code/web/interface/themes/responsive/Search/Recommend/SideFacets.tpl

@@ -21,7 +21,7 @@
 				{foreach from=$sideFacetSet item=cluster key=title name=facetSet}
 					{if count($cluster.list) > 0}
 						<div class="facetList">
-							<div class="facetTitle panel-title {if !empty($cluster.collapseByDefault) && empty($cluster.hasApplied)}collapsed{else}expanded{/if}" onclick="$(this).toggleClass('expanded');$(this).toggleClass('collapsed');$('#facetDetails_{$title}').toggle()" onkeypress="$(this).toggleClass('expanded');$(this).toggleClass('collapsed');$('#facetDetails_{$title}').toggle()" tabindex="0" role="group">
+							<div id="facetToggle_{$title}" aria-controls="facetDetails_{$title}" class="facetTitle panel-title {if !empty($cluster.collapseByDefault) && empty($cluster.hasApplied)}collapsed{else}expanded{/if}" tabindex="0" role="button" aria-expanded="{if !empty($cluster.collapseByDefault) && empty($cluster.hasApplied)}false{else}true{/if}">
 								{translate text=$cluster.label isPublicFacing=true}
 
 								{if !empty($cluster.canLock)}
@@ -32,7 +32,7 @@
 								{/if}
 
 							</div>
-							<div id="facetDetails_{$title}" class="facetDetails" {if !empty($cluster.collapseByDefault) && empty($cluster.hasApplied)}style="display:none"{/if}>
+							<div id="facetDetails_{$title}" class="facetDetails" {if !empty($cluster.collapseByDefault) && empty($cluster.hasApplied)}style="display:none"{/if} role="region" aria-labelledby="facetToggle_{$title}">
 
 								{if $title == 'publishDate' || $title == 'birthYear' || $title == 'deathYear' || $title == 'publishDateSort'}
 									{include file="Search/Recommend/yearFacetFilter.tpl" cluster=$cluster title=$title}
@@ -51,6 +51,24 @@
 								{/if}
 							</div>
 						</div>
+						<script type="text/javascript">
+                            {* Initiate any checkbox with a data attribute set to data-switch=""  as a bootstrap switch *}
+                            {literal}
+							$("#facetToggle_{/literal}{$title}{literal}").click(function() {
+								var toggleButton = $(this);
+								$(this).toggleClass('expanded');
+								$(this).toggleClass('collapsed');
+								$('#facetDetails_{/literal}{$title}{literal}').toggle()
+								if (toggleButton.attr("aria-expanded") === "true") {
+									$(this).attr("aria-expanded","false");
+								}
+								else if (toggleButton.attr("aria-expanded") === "false") {
+									$(this).attr("aria-expanded","true");
+								}
+								return false;
+							})
+                            {/literal}
+						</script>
 					{/if}
 				{/foreach}
 			</div>

code/web/interface/themes/responsive/js/aspen.js

@@ -723,7 +723,7 @@ var AspenDiscovery = (function(){
 
 			// If the scroll value is greater than the window height, let's add a class to the scroll-to-top button to show it!
 			if (y > 0) {
-				scrollToTopButton.className = "top-link show";
+				scrollToTopButton.className = "top-link show hidden-xs hidden-sm";
 			} else {
 				scrollToTopButton.className = "top-link hide";
 			}

code/web/interface/themes/responsive/js/aspen/base.js

@@ -1,5 +1,6 @@
 ## Aspen LiDA Updates
-- 
+- If a format is not found in ILS Indexing Format Mapping table, Aspen LiDA will now assume the hold type is bib, instead of item, matching functionality to Aspen Discovery. (Ticket 125902) (*KK*)
+- Fixed a bug where tapping on some browse category headings would cause the app to crash when loading results. (Ticket 130596) (*KK*)
 
 ## Aspen Discovery Updates
 //mark
@@ -33,8 +34,18 @@
 - Remove unused/unmaintained Horizon Export. (*MDN*)
 
 //kirstien
-### Other
+### API Updates
+- In the Item API, getRecords will now return the hold type for the format and variation IDs. (*KK*)
+- In the Item API, the default hold type is now 'bib' for getRecords and getVariations to match functionality of Aspen Discovery when formats are not found in the ILS Indexing Format Mapping table. (*KK*) 
+
+### Accessibility Updates
 - In the search sidebar the Applied Filters and Narrow Your Results headings have been updated to H3 elements for better structure and accessibility. (*KK*)
+- Added aria-expanded attributes to filter headings in the search sidebar for better accessibility. (*KK*)
+- The "Go to Top" button will no longer display on tablets and phone devices due to the size causing issues for using Aspen Discovery. (*KK*)
+- Added the aria-expanded attribute to the "What's this?" link on My Preferences page for better accessibility. (*KK*)
+
+### Other Updates
+- Web Builder page cells will now again save the custom color scheme. (Tickets 129813, 130819) (*KK*)
 
 //kodi
 ### Events

code/web/release_notes/24.05.00.MD

@@ -34,6 +34,8 @@ class PortalCell extends DataObject {
 	public $pdfView;
 	public $imgAction;
 	public $imgAlt;
+	public $colorScheme;
+	public $invertColor;
 
 	public function getUniquenessFields(): array {
 		return [
@@ -43,7 +45,7 @@ public function getUniquenessFields(): array {
 	}
 
 	public function getNumericColumnNames(): array {
-		return ['frameHeight'];
+		return ['frameHeight', 'invertColor'];
 	}
 
 	static function getObjectStructure($context = ''): array {