Accessibility adjustments (#1610)

- Move accessibility toggle button and associated components out of footer into single contained file that can be added to footer, header, or other location via an include function - Move accessibility files into accessibility directory - Migrate accessibility.footer.css js into accessibilityUtil.js file - Move accessibility language terms into their own lang files
BioKIC · Aug 12, 2024 · 6aa3e55 · 6aa3e55
1 parent 5c3e9f8
commit 6aa3e55
Show file tree

Hide file tree

Showing 16 changed files with 147 additions and 120 deletions.
diff --git a/accessibility/module.php b/accessibility/module.php
@@ -0,0 +1,43 @@
+<?php
+if($LANG_TAG == 'en' || !file_exists($SERVER_ROOT.'/content/lang/templates/accessibility.' . $LANG_TAG . '.php'))
+	include_once($SERVER_ROOT . '/content/lang/templates/accessibility.en.php');
+else include_once($SERVER_ROOT . '/content/lang/templates/accessibility.' . $LANG_TAG . '.php');
+?>
+<dialog id="accessibility-modal" class="accessibility-dialog" aria-label="<?= $LANG['A_ACCESSIBILITY_OPTIONS']; ?>">
+	<h1><?= $LANG['A_ACCESSIBILITY_OPTIONS']; ?></h1>
+	<p class="bottom-breathing-room-rel"><?= $LANG['A_ACCESSIBILITY_OPTIONS_DESCRIPTION']; ?></p>
+	<button type="button" class="btn btn-primary bottom-breathing-room-rel" onclick="toggleAccessibilityStyles()" id="accessibility-button" data-accessibility="accessibility-button">
+		<?= $LANG['A_TOGGLE_508_ON'] ?>
+	</button>
+	<form method="dialog">
+		<button type="submit" class="btn btn-primary"><?= $LANG['A_CLOSE']; ?></button>
+	</form>
+</dialog>
+<button id="accessibility-options-button" type="button" class="btn btn-primary  accessibility-option-button">
+	<span class="button__item-container">
+		<?= $LANG['A_ACCESSIBILITY_OPTIONS']; ?>
+		<span>
+			<img alt="<?= $LANG['A_ACCESSIBILITY_ICON'] ?>" src="<?= $CLIENT_ROOT ?>/images/accessibility_FILL0_wght400_GRAD0_opsz24.svg" />
+		</span>
+	</span>
+</button>
+<script type="text/javascript">
+	const toggleOff508Text = "<?= $LANG['A_TOGGLE_508_OFF'] ?>";
+	const toggleOn508Text = "<?= $LANG['A_TOGGLE_508_ON'] ?>";
+	const clientRootPath = "<?= $CLIENT_ROOT ?>";
+</script>
+<link href="<?= $CSS_BASE_PATH ?>/symbiota/accessibility-controls.css?ver=<?= $CSS_VERSION ?>" type="text/css" rel="stylesheet">
+<?php
+if($ACCESSIBILITY_ACTIVE){
+	?>
+	<link href="<?= $CSS_BASE_PATH ?>/symbiota/accessibility-compliant.css?ver=<?= $CSS_VERSION ?>" type="text/css" rel="stylesheet" data-accessibility-link="accessibility-css-link" >
+	<link href="<?= $CSS_BASE_PATH ?>/symbiota/condensed.css?ver=<?= $CSS_VERSION ?>" type="text/css" rel="stylesheet" data-accessibility-link="accessibility-css-link" disabled >
+	<?php
+} else{
+	?>
+	<link href="<?= $CSS_BASE_PATH ?>/symbiota/accessibility-compliant.css?ver=<?= $CSS_VERSION ?>" type="text/css" rel="stylesheet" data-accessibility-link="accessibility-css-link" disabled >
+	<link href="<?= $CSS_BASE_PATH ?>/symbiota/condensed.css?ver=<?= $CSS_VERSION ?>" type="text/css" rel="stylesheet" data-accessibility-link="accessibility-css-link" >
+	<?php
+}
+?>
+<script src="<?= $CLIENT_ROOT ?>/js/symb/accessibilityUtils.js?ver=1b" type="text/javascript"></script>
diff --git a/accessibility/rpc/toggle-styles.php b/accessibility/rpc/toggle-styles.php
@@ -0,0 +1,13 @@
+<?php
+include_once('../../config/symbini.php');
+$currentlyEnabledStylesheet = $_REQUEST['currentEnabledStylesheet'];
+//session_start();
+$accessiblePath = $CSS_BASE_PATH . '/symbiota/condensed.css?ver=14';
+$condensedPath = $CSS_BASE_PATH . '/symbiota/accessibility-compliant.css?ver=14';
+if($currentlyEnabledStylesheet === $condensedPath){
+    $_SESSION['active_stylesheet'] = $accessiblePath;
+} else{
+    $_SESSION['active_stylesheet'] = $condensedPath;
+}
+echo $_SESSION['active_stylesheet'];
+?>
diff --git a/content/lang/templates/accessibility.en.php b/content/lang/templates/accessibility.en.php
@@ -0,0 +1,15 @@
+<?php
+/*
+------------------
+Language: English
+------------------
+*/
+
+
+$LANG['A_TOGGLE_508_OFF'] = 'Toggle Condensed Form Layout';
+$LANG['A_TOGGLE_508_ON'] = 'Toggle Vertical Form Layout';
+$LANG['A_ACCESSIBILITY_OPTIONS'] = 'Accessibility Options';
+$LANG['A_ACCESSIBILITY_OPTIONS_DESCRIPTION'] = 'More accessibility features will be added over time. Toggle those that suit your needs.';
+$LANG['A_CLOSE'] = 'Close';
+$LANG['A_ACCESSIBILITY_ICON'] = 'accessibility icon of a person';
+?>
diff --git a/content/lang/templates/accessibility.es.php b/content/lang/templates/accessibility.es.php
@@ -0,0 +1,15 @@
+<?php
+/*
+------------------
+Language: Español (Spanish)
+------------------
+*/
+
+
+$LANG['A_TOGGLE_508_OFF'] = 'Alternar el Diseño de Formulario Condensado';
+$LANG['A_TOGGLE_508_ON'] = 'Alternar Diseño de Formulario Vertical';
+$LANG['A_ACCESSIBILITY_OPTIONS'] = 'Opciones de accesibilidad';
+$LANG['A_ACCESSIBILITY_OPTIONS_DESCRIPTION'] = 'Con el tiempo se agregarán más funciones de accesibilidad. Alterna aquellos que se adapten a tus necesidades.';
+$LANG['A_CLOSE'] = 'Cerrar';
+$LANG['A_ACCESSIBILITY_ICON'] = 'icono de accesibilidad de una persona';
+?>
diff --git a/content/lang/templates/accessibility.fr.php b/content/lang/templates/accessibility.fr.php
@@ -0,0 +1,15 @@
+<?php
+/*
+------------------
+Language: Français (French)
+------------------
+*/
+
+
+$LANG['A_TOGGLE_508_OFF'] = 'Utiliser la Mise en Page de Formulaire Condensé';
+$LANG['A_TOGGLE_508_ON'] = 'Basculer la Disposition Verticale du Formulaire';
+$LANG['A_ACCESSIBILITY_OPTIONS'] = 'Options d\'accessibilité';
+$LANG['A_ACCESSIBILITY_OPTIONS_DESCRIPTION'] = 'D\'autres fonctionnalités d\'accessibilité seront ajoutées au fil du temps. Basculez ceux qui correspondent à vos besoins.';
+$LANG['A_CLOSE'] = 'Fermer';
+$LANG['A_ACCESSIBILITY_ICON'] = "icône d'accessibilité d'une personne";
+?>
diff --git a/content/lang/templates/accessibility.pt.php b/content/lang/templates/accessibility.pt.php
@@ -0,0 +1,15 @@
+<?php
+/*
+------------------
+Language: Português (Portuguese)
+Translated by: Google Translate (2024-02-16)
+------------------
+*/
+
+$LANG['A_TOGGLE_508_OFF'] = 'Modo Condensado';
+$LANG['A_TOGGLE_508_ON'] = 'Modo de Acessibilidade';
+$LANG['A_ACCESSIBILITY_OPTIONS'] = 'Opções de acessibilidade';
+$LANG['A_ACCESSIBILITY_OPTIONS_DESCRIPTION'] = 'Mais recursos de acessibilidade serão adicionados ao longo do tempo. Alterne aqueles que atendem às suas necessidades.';
+$LANG['A_CLOSE'] = 'Fechar';
+$LANG['A_ACCESSIBILITY_ICON'] = 'ícone de acessibilidade de uma pessoa';
+?>
diff --git a/content/lang/templates/header.en.php b/content/lang/templates/header.en.php
@@ -51,12 +51,6 @@
 $LANG['H_SKIP_NAV'] = 'Skip Navigation';
 
 //Footer variables
-$LANG['F_TOGGLE_508_OFF'] = 'Toggle Condensed Form Layout';
-$LANG['F_TOGGLE_508_ON'] = 'Toggle Vertical Form Layout';
-$LANG['F_ACCESSIBILITY_OPTIONS'] = 'Accessibility Options';
-$LANG['F_ACCESSIBILITY_OPTIONS_DESCRIPTION'] = 'More accessibility features will be added over time. Toggle those that suit your needs.';
-$LANG['F_CLOSE'] = 'Close';
-$LANG['F_ACCESSIBILITY_ICON'] = 'accessibility icon of a person';
 $LANG['F_VISIT_NSF'] = 'Visit National Science Foundation website';
 $LANG['F_NSF_LOGO'] = 'Logo for the National Science Foundation';
 $LANG['F_VISIT_IDIGBIO'] = 'Visit iDigBio website';

diff --git a/content/lang/templates/header.es.php b/content/lang/templates/header.es.php
@@ -51,12 +51,6 @@
 $LANG['H_SKIP_NAV'] = 'Saltar Navegación';
 
 //Footer variables
-$LANG['F_TOGGLE_508_OFF'] = 'Alternar el Diseño de Formulario Condensado';
-$LANG['F_TOGGLE_508_ON'] = 'Alternar Diseño de Formulario Vertical';
-$LANG['F_ACCESSIBILITY_OPTIONS'] = 'Opciones de accesibilidad';
-$LANG['F_ACCESSIBILITY_OPTIONS_DESCRIPTION'] = 'Con el tiempo se agregarán más funciones de accesibilidad. Alterna aquellos que se adapten a tus necesidades.';
-$LANG['F_CLOSE'] = 'Cerrar';
-$LANG['F_ACCESSIBILITY_ICON'] = 'icono de accesibilidad de una persona';
 $LANG['F_VISIT_NSF'] = 'Visita el sitio web de la National Science Foundation';
 $LANG['F_NSF_LOGO'] = 'Logo de la National Science Foundation';
 $LANG['F_VISIT_IDIGBIO'] = 'Visita el sitio web de iDigBio';

diff --git a/content/lang/templates/header.fr.php b/content/lang/templates/header.fr.php
@@ -51,12 +51,6 @@
 $LANG['H_SKIP_NAV'] = 'Sauter la Navigation';
 
 //Footer variables
-$LANG['F_TOGGLE_508_OFF'] = 'Utiliser la Mise en Page de Formulaire Condensé';
-$LANG['F_TOGGLE_508_ON'] = 'Basculer la Disposition Verticale du Formulaire';
-$LANG['F_ACCESSIBILITY_OPTIONS'] = 'Options d\'accessibilité';
-$LANG['F_ACCESSIBILITY_OPTIONS_DESCRIPTION'] = 'D\'autres fonctionnalités d\'accessibilité seront ajoutées au fil du temps. Basculez ceux qui correspondent à vos besoins.';
-$LANG['F_CLOSE'] = 'Fermer';
-$LANG['F_ACCESSIBILITY_ICON'] = "icône d'accessibilité d'une personne";
 $LANG['F_VISIT_NSF'] = 'Visitez le site Web de la National Science Foundation';
 $LANG['F_NSF_LOGO'] = 'Logo de la National Science Foundation';
 $LANG['F_VISIT_IDIGBIO'] = 'Visitez le site iDigBio';

diff --git a/content/lang/templates/header.pt.php b/content/lang/templates/header.pt.php
@@ -51,12 +51,6 @@
 $LANG['H_SKIP_NAV'] = 'Pular Navegação';
 
 //Footer variables
-$LANG['F_TOGGLE_508_OFF'] = 'Modo Condensado';
-$LANG['F_TOGGLE_508_ON'] = 'Modo de Acessibilidade';
-$LANG['F_ACCESSIBILITY_OPTIONS'] = 'Opções de acessibilidade';
-$LANG['F_ACCESSIBILITY_OPTIONS_DESCRIPTION'] = 'Mais recursos de acessibilidade serão adicionados ao longo do tempo. Alterne aqueles que atendem às suas necessidades.';
-$LANG['F_CLOSE'] = 'Fechar';
-$LANG['F_ACCESSIBILITY_ICON'] = 'ícone de acessibilidade de uma pessoa';
 $LANG['F_VISIT_NSF'] = 'Visite o site da National Science Foundation';
 $LANG['F_NSF_LOGO'] = 'Logo da National Science Foundation';
 $LANG['F_VISIT_IDIGBIO'] = 'Visite o site do iDigBio';

diff --git a/docs/styleguide.php b/docs/styleguide.php
@@ -1,6 +1,8 @@
 <?php
 include_once('../config/symbini.php');
-include_once('../content/lang/templates/index.' . $LANG_TAG . '.php');
+if($LANG_TAG == 'en' || !file_exists($SERVER_ROOT.'/content/lang/templates/accessibility.' . $LANG_TAG . '.php'))
+	include_once($SERVER_ROOT . '/content/lang/templates/accessibility.en.php');
+else include_once($SERVER_ROOT . '/content/lang/templates/accessibility.' . $LANG_TAG . '.php');
 header("Content-Type: text/html; charset=" . $CHARSET);
 ?>
 <!DOCTYPE html>
@@ -31,7 +33,7 @@
 		<p class="grid-3"><span class="button button-primary"><a href="#">Primary Button (Link)</a></span><span class="button button-secondary"><a href="#">Secondary Button (Link)</a></span><span class="button button-tertiary"><a href="#">Tertiary Button (Link)</a></span></p>
 		<h1>Forms in accessibility mode vs condensed mode</h1>
 		<section style="margin-bottom: 10;">
-			<button style="font-size:14" onclick="toggleAccessibilityStyles('<?php echo $CLIENT_ROOT . '/includes' . '/' ?>', '<?php echo $CSS_BASE_PATH ?>', '<?php echo $LANG['TOGGLE_508_OFF'] ?>', '<?php echo $LANG['TOGGLE_508_ON'] ?>')" id="accessibility-button-2" name="accessibility-button-2" data-accessibility="accessibility-button" ?><?php echo (isset($LANG['TOGGLE_508_ON'])?$LANG['TOGGLE_508_ON']:'Accessibility Mode'); ?></button>
+			<button style="font-size:14" onclick="toggleAccessibilityStyles()" id="accessibility-button-2" name="accessibility-button-2" data-accessibility="accessibility-button" ?><?= $LANG['TOGGLE_508_ON'] ?></button>
 		</section>
 		<section class="flex-form">
 			<section>
@@ -50,7 +52,7 @@
 	<script type="text/javascript">
 		document.addEventListener('DOMContentLoaded', ()=>{
 			document.getElementById('accessibility-button-2').disabled=false;
-			updateButtonTextBasedOnEnabledStylesheet('<?php echo $LANG['TOGGLE_508_OFF'] ?>', '<?php echo $LANG['TOGGLE_508_ON'] ?>', 'accessibility-button-2');
+			updateButtonTextBasedOnEnabledStylesheet();
 		});
 	</script>
 </body>

diff --git a/includes/footer_template.php b/includes/footer_template.php
@@ -1,23 +1,8 @@
 <footer>
-	<dialog id="accessibility-modal" class="accessibility-dialog" aria-label="<?= $LANG['F_ACCESSIBILITY_OPTIONS']; ?>">
-		<h1><?= $LANG['F_ACCESSIBILITY_OPTIONS']; ?></h1>
-		<p class="bottom-breathing-room-rel"><?= $LANG['F_ACCESSIBILITY_OPTIONS_DESCRIPTION']; ?></p>
-		<button type="button" class="btn btn-primary bottom-breathing-room-rel" onclick="toggleAccessibilityStyles('<?php echo $CLIENT_ROOT . '/includes' . '/' ?>', '<?php echo $CSS_BASE_PATH ?>', '<?php echo $LANG['F_TOGGLE_508_OFF'] ?>', '<?php echo $LANG['F_TOGGLE_508_ON'] ?>')" id="accessibility-button" data-accessibility="accessibility-button">
-			<?= $LANG['F_TOGGLE_508_ON'] ?>
-		</button>
-		<form method="dialog">
-			<button type="submit" class="btn btn-primary"><?= $LANG['F_CLOSE']; ?></button>
-		</form>
-	</dialog>
 	<div class="logo-gallery">
-		<button id="accessibility-options-button" type="button" class="btn btn-primary  accessibility-option-button">
-			<span class="button__item-container">
-				<?= $LANG['F_ACCESSIBILITY_OPTIONS']; ?>
-				<span>
-					<img alt="<?= $LANG['F_ACCESSIBILITY_ICON'] ?>" src="<?= $CLIENT_ROOT ?>/images/accessibility_FILL0_wght400_GRAD0_opsz24.svg" />
-				</span>
-	        </span>
-		</button>
+		<?php
+		//include($SERVER_ROOT . '/accessibility/module.php');
+		?>
 		<a href="https://www.nsf.gov" target="_blank" aria-label="<?= $LANG['F_VISIT_NSF'] ?>">
 			<img src="<?= $CLIENT_ROOT; ?>/images/layout/logo_nsf.gif" alt="<?= $LANG['F_NSF_LOGO'] ?>" />
 		</a>
@@ -38,9 +23,4 @@
 	<p>
 		<?= $LANG['F_POWERED_BY'] ?> <a href="https://symbiota.org/" target="_blank">Symbiota</a>.
 	</p>
-	<script>
-		let toggleOff508 = "<?= $LANG['F_TOGGLE_508_OFF'] ?>";
-		let toggleOn508 = "<?= $LANG['F_TOGGLE_508_ON'] ?>";
-	</script>
-	<script src="<?= $CLIENT_ROOT; ?>/js/symb/accessibility.footer.js?ver=1" type="text/javascript"></script>
 </footer>
diff --git a/includes/head_template.php b/includes/head_template.php
@@ -11,22 +11,6 @@
 <link href="<?= $CSS_BASE_PATH ?>/symbiota/header.css?ver=<?= $CSS_VERSION ?>" type="text/css" rel="stylesheet">
 <link href="<?= $CSS_BASE_PATH ?>/symbiota/footer.css?ver=<?= $CSS_VERSION ?>" type="text/css" rel="stylesheet">
 <link href="<?= $CSS_BASE_PATH ?>/symbiota/main.css?ver=<?= $CSS_VERSION ?>" type="text/css" rel="stylesheet">
-<link href="<?= $CSS_BASE_PATH ?>/symbiota/accessibility-controls.css?ver=<?= $CSS_VERSION ?>" type="text/css" rel="stylesheet">
-
-<?php
-if($ACCESSIBILITY_ACTIVE){
-	?>
-	<link href="<?= $CSS_BASE_PATH ?>/symbiota/accessibility-compliant.css?ver=<?= $CSS_VERSION ?>" type="text/css" rel="stylesheet" data-accessibility-link="accessibility-css-link" >
-	<link href="<?= $CSS_BASE_PATH ?>/symbiota/condensed.css?ver=<?= $CSS_VERSION ?>" type="text/css" rel="stylesheet" data-accessibility-link="accessibility-css-link" disabled >
-	<?php
-} else{
-	?>
-	<link href="<?= $CSS_BASE_PATH ?>/symbiota/accessibility-compliant.css?ver=<?= $CSS_VERSION ?>" type="text/css" rel="stylesheet" data-accessibility-link="accessibility-css-link" disabled >
-	<link href="<?= $CSS_BASE_PATH ?>/symbiota/condensed.css?ver=<?= $CSS_VERSION ?>" type="text/css" rel="stylesheet" data-accessibility-link="accessibility-css-link" >
-	<?php
-}
-?>
-
 <link href="<?= $CSS_BASE_PATH ?>/symbiota/customizations.css?ver=<?= $CSS_VERSION ?>" type="text/css" rel="stylesheet">
+
 <script src="<?= $CLIENT_ROOT ?>/js/symb/lang.js" type="text/javascript"></script>
-<script src="<?= $CLIENT_ROOT ?>/js/symb/accessibilityUtils.js" type="text/javascript"></script>
diff --git a/includes/toggle-styles.php b/includes/toggle-styles.php
diff --git a/js/symb/accessibility.footer.js b/js/symb/accessibility.footer.js
diff --git a/js/symb/accessibilityUtils.js b/js/symb/accessibilityUtils.js
@@ -1,8 +1,20 @@
-function sendRequest(url, method, path, currentEnabledStylesheet) {
+const openDialogButton = document.getElementById('accessibility-options-button');
+const accessibilityDialog = document.getElementById('accessibility-modal');
+
+document.addEventListener('DOMContentLoaded', ()=>{
+	document.getElementById('accessibility-button').disabled=false;
+	updateButtonTextBasedOnEnabledStylesheet();
+});
+
+openDialogButton.addEventListener('click', function() {
+	accessibilityDialog.showModal();
+});
+
+function sendRequest(url, method, currentEnabledStylesheet) {
   return new Promise((resolve, reject) => {
     const xmlRequest = new XMLHttpRequest();
     xmlRequest.open(method, url);
-    xmlRequest.setRequestHeader("Content-Type", "application/json");
+	xmlRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
     xmlRequest.onreadystatechange = () => {
       if (xmlRequest.readyState === 4) {
         if (xmlRequest.status === 200) {
@@ -12,40 +24,25 @@ function sendRequest(url, method, path, currentEnabledStylesheet) {
         }
       }
     };
-    xmlRequest.send(
-      JSON.stringify({
-        path: path,
-        currentEnabledStylesheet: currentEnabledStylesheet,
-      })
-    );
+    xmlRequest.send("currentEnabledStylesheet=" + currentEnabledStylesheet);
   });
 }
 
-async function toggleAccessibilityStyles(
-  pathToToggleStyles,
-  cssPath,
-  viewCondensed,
-  viewAccessible
-) {
+async function toggleAccessibilityStyles() {
   try {
     const currentEnabledStylesheet = getEnabledLink().getAttribute("href");
     const response = await sendRequest(
-      pathToToggleStyles + "/toggle-styles.php",
+      clientRootPath + "/accessibility/rpc/toggle-styles.php",
       "POST",
-      cssPath,
       currentEnabledStylesheet
     );
-    await handleResponse(response, viewCondensed, viewAccessible);
+    await handleResponse(response);
   } catch (error) {
     console.log(error);
   }
 }
 
-async function handleResponse(
-  stylesheetReferencedInSession,
-  viewCondensed,
-  viewAccessible
-) {
+async function handleResponse(stylesheetReferencedInSession) {
   let links = document.querySelectorAll("[data-accessibility-link]");
 
   for (let i = 0; i < links.length; i++) {
@@ -55,20 +52,17 @@ async function handleResponse(
       links[i].disabled = true;
     }
   }
-  updateButtonTextBasedOnEnabledStylesheet(viewCondensed, viewAccessible);
+  updateButtonTextBasedOnEnabledStylesheet();
 }
 
-function updateButtonTextBasedOnEnabledStylesheet(
-  viewCondensed,
-  viewAccessible
-) {
+function updateButtonTextBasedOnEnabledStylesheet() {
   let enabledLink = getEnabledLink();
   const isAccessibleLinkEnabled =
     enabledLink
       ?.getAttribute("href")
       ?.indexOf("/symbiota/accessibility-compliant.css") > 0;
   let buttons = document.querySelectorAll("[data-accessibility]");
-  const newText = isAccessibleLinkEnabled ? viewCondensed : viewAccessible;
+  const newText = isAccessibleLinkEnabled ? toggleOff508Text : toggleOn508Text;
   for (let j = 0; j < buttons.length; j++) {
     buttons[j].textContent = newText;
   }