From 8144ad6cb87415890506f4cf684a03c07e9aa168 Mon Sep 17 00:00:00 2001
From: Sarah Wylie <sarahannemariawylie@gmail.com>
Date: Wed, 9 Jul 2025 08:32:56 -0500
Subject: [PATCH 1/3] landmarks complete, used VoiceOver since ChromeVox is
 deprecated

---
 join.lib.js    | 458 ++++++++++++++++++++++++-------------------------
 landmarks.html |  41 +++--
 2 files changed, 249 insertions(+), 250 deletions(-)

diff --git a/join.lib.js b/join.lib.js
index 66292bec3..8f0aaee4a 100644
--- a/join.lib.js
+++ b/join.lib.js
@@ -1,269 +1,269 @@
 var $s = function (id) { return document.getElementById(id); }
 
-var JoinForm = function () {
-    
-    this.fields = [];
-    this.fields["username"] = {}
-    this.fields["password"] = {};
-    this.fields["email"] = {};
-    this.fields["fname"] = {};
-    this.fields["lname"] = {};
-    this.fields["address"] = {};
-    this.fields["city"] = {};
-    this.fields["country"] = {};
-    this.fields["state"] = {};
-    this.fields["zip"] = {};
-    this.fields["province"] = {};
-    this.fields["postal"] = {};
-    this.fields["tele"] = {};
+class JoinForm {
+    constructor() {
 
-    // Default field messages
-    this.fields["username"].message = "Username must be at least 4 characters";
-    this.fields["email"].message = "Must be a valid email address.";
-    this.fields["password"].message = "Password  requires a combination of at least 6 numbers and letters";
-    this.fields["state"].message = "Use 2 letter abbreviation.";
-    this.fields["postal"].message = "6 numbers or letters";
-    this.fields["zip"].message = "Use 5 or 9 digit ZIP code.";
-    this.fields["tele"].message = "Use 999-999-9999 format.";
-    
+        this.fields = [];
+        this.fields["username"] = {};
+        this.fields["password"] = {};
+        this.fields["email"] = {};
+        this.fields["fname"] = {};
+        this.fields["lname"] = {};
+        this.fields["address"] = {};
+        this.fields["city"] = {};
+        this.fields["country"] = {};
+        this.fields["state"] = {};
+        this.fields["zip"] = {};
+        this.fields["province"] = {};
+        this.fields["postal"] = {};
+        this.fields["tele"] = {};
 
-    // Field error messages
-    this.fields["username"].required = "Username is required.";
-    this.fields["username"].tooShort = ["Username must be at least 4 numbers and/or letters.", 4];
-    this.fields["username"].isUsername = "Username must contain numbers and letters";
-    this.fields["fname"].isName = "First name can only contain letters"
-    this.fields["lname"].isName = "Last name can only contain letters"
-    this.fields["email"].required = "Email is required.";
-    this.fields["email"].isEmail = "Email is not valid.";
-    this.fields["password"].required = "Password must be 4 or more letters and 2 or more numbers.";
-    this.fields["password"].isPassword = ["Password must be 4 or more letters and 2 or more numbers"];
-    this.fields["state"].isState = "State is not valid.";
-    this.fields["zip"].isZip = "ZIP Code is not valid.";
-    this.fields["province"].isProvince = "Province/Territory is not valid.";
-    this.fields["postal"].isPostal = "Postal Code is not valid.";
-    this.fields["tele"].isPhone = "Phone number is not valid.";
-    this.success = "You have successfully joined. We're happy to have you as a member."
-}
-
-// Validation methods
-JoinForm.prototype.tooShort = function (text, length) {
-    return (text.length < length);
-}
+        // Default field messages
+        this.fields["username"].message = "Username must be at least 4 characters";
+        this.fields["email"].message = "Must be a valid email address.";
+        this.fields["password"].message = "Password  requires a combination of at least 6 numbers and letters";
+        this.fields["state"].message = "Use 2 letter abbreviation.";
+        this.fields["postal"].message = "6 numbers or letters";
+        this.fields["zip"].message = "Use 5 or 9 digit ZIP code.";
+        this.fields["tele"].message = "Use 999-999-9999 format.";
 
-JoinForm.prototype.matches = function (text1, text2) {
-    return (text1 == text2);
-}
 
-JoinForm.prototype.isUsername = function(text){
+        // Field error messages
+        this.fields["username"].required = "Username is required.";
+        this.fields["username"].tooShort = ["Username must be at least 4 numbers and/or letters.", 4];
+        this.fields["username"].isUsername = "Username must contain numbers and letters";
+        this.fields["fname"].isName = "First name can only contain letters";
+        this.fields["lname"].isName = "Last name can only contain letters";
+        this.fields["email"].required = "Email is required.";
+        this.fields["email"].isEmail = "Email is not valid.";
+        this.fields["password"].required = "Password must be 4 or more letters and 2 or more numbers.";
+        this.fields["password"].isPassword = ["Password must be 4 or more letters and 2 or more numbers"];
+        this.fields["state"].isState = "State is not valid.";
+        this.fields["zip"].isZip = "ZIP Code is not valid.";
+        this.fields["province"].isProvince = "Province/Territory is not valid.";
+        this.fields["postal"].isPostal = "Postal Code is not valid.";
+        this.fields["tele"].isPhone = "Phone number is not valid.";
+        this.success = "You have successfully joined. We're happy to have you as a member.";
+    }
+    // Validation methods
+    tooShort(text, length) {
+        return (text.length < length);
+    }
+    matches(text1, text2) {
+        return (text1 == text2);
+    }
+    isUsername(text) {
         return /^[a-zA-Z0-9]{4}[a-zA-Z]*?$/.test(text);
-}
-JoinForm.prototype.isPassword = function (text) {
-    return /^(?=.*[a-zA-Z])(?=.*[0-9])/.test(text);
-}
-JoinForm.prototype.isName = function(text){
+    }
+    isPassword(text) {
+        return /^(?=.*[a-zA-Z])(?=.*[0-9])/.test(text);
+    }
+    isName(text) {
         return /^[a-zA-Z]*$/.test(text);
-}
-JoinForm.prototype.isEmail = function (text) {
-    if (text.length == 0) return false;
-    var parts = text.split("@");
-    if (parts.length != 2 ) return false;
-    if (parts[0].length > 64) return false;
-    if (parts[1].length > 255) return false;
-    var address =
-        "(^[\\w!#$%&'*+/=?^`{|}~-]+(\\.[\\w!#$%&'*+/=?^`{|}~-]+)*$)";
-    var quotedText = "(^\"(([^\\\\\"])|(\\\\[\\\\\"]))+\"$)";
-    var localPart = new RegExp( address + "|" + quotedText );
-    if ( !parts[0].match(localPart) ) return false;
-    var hostnames =
-        "(([a-zA-Z0-9]\\.)|([a-zA-Z0-9][-a-zA-Z0-9]{0,62}[a-zA-Z0-9]\\.))+";
-    var tld = "[a-zA-Z0-9]{2,6}";
-    var domainPart = new RegExp("^" + hostnames + tld + "$");
-    if ( !parts[1].match(domainPart) ) return false;
-    return true;
-}
-
-JoinForm.prototype.isCountry = function(country){
-	    return true;
-}
-
-JoinForm.prototype.isState = function (text) {
-    var states = ["AL", "AK", "AZ", "AR", "CA", "CO", "CT", "DE", "DC", "FL",
-        "GA", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME",
-        "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH",
-        "NJ", "NM", "NY", "NC", "ND", "OH", "OK", "OR", "PA", "RI",
-        "SC", "SD", "TN", "TX", "UT", "VT", "VA", "WA", "WV", "WI", "WY"];
-    for( var i in states ) {
-        if ( text == states[i] ) {
-            return true;
-        }
     }
-    return false;
-}
-
-JoinForm.prototype.isProvince = function (text) {
-    var provinces = ["AB", "BC", "MB", "NB", "NL", "NS", "NU", "NT", "ON", "PE", "QC", "SK", "YT"];
-    for( var i in provinces ) {
-        if ( text == provinces[i] ) {
-            return true;
-        }
+    isEmail(text) {
+        if (text.length == 0) return false;
+        var parts = text.split("@");
+        if (parts.length != 2) return false;
+        if (parts[0].length > 64) return false;
+        if (parts[1].length > 255) return false;
+        var address = "(^[\\w!#$%&'*+/=?^`{|}~-]+(\\.[\\w!#$%&'*+/=?^`{|}~-]+)*$)";
+        var quotedText = "(^\"(([^\\\\\"])|(\\\\[\\\\\"]))+\"$)";
+        var localPart = new RegExp(address + "|" + quotedText);
+        if (!parts[0].match(localPart)) return false;
+        var hostnames = "(([a-zA-Z0-9]\\.)|([a-zA-Z0-9][-a-zA-Z0-9]{0,62}[a-zA-Z0-9]\\.))+";
+        var tld = "[a-zA-Z0-9]{2,6}";
+        var domainPart = new RegExp("^" + hostnames + tld + "$");
+        if (!parts[1].match(domainPart)) return false;
+        return true;
     }
-    return false;
-}
-
-JoinForm.prototype.isPostal = function (text) {
-    return /^[a-zA-Z]\d[a-zA-Z] ?\d[a-zA-Z]\d$/.test(text);
-}
-
-JoinForm.prototype.isZip = function (text) {
-    return /^\d{5}(-\d{4})?$/.test(text);
-}
-
-JoinForm.prototype.isPhone = function (text) {
-    if(text !=''){
-        return(/^\d{3}-\d{3}-\d{4}$/.test(text));
-    } else{
+    isCountry(country) {
         return true;
     }
-}
-
-JoinForm.prototype.validateField = function (fieldName, text) {
-    var field = this.fields[fieldName];
-    if (field.required) {
-        if ( this.tooShort(text,1) ) {
-            throw new Error(field.required);
+    isState(text) {
+        var states = ["AL", "AK", "AZ", "AR", "CA", "CO", "CT", "DE", "DC", "FL",
+            "GA", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME",
+            "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH",
+            "NJ", "NM", "NY", "NC", "ND", "OH", "OK", "OR", "PA", "RI",
+            "SC", "SD", "TN", "TX", "UT", "VT", "VA", "WA", "WV", "WI", "WY"];
+        for (var i in states) {
+            if (text == states[i]) {
+                return true;
+            }
+        }
+        return false;
+    }
+    isProvince(text) {
+        var provinces = ["AB", "BC", "MB", "NB", "NL", "NS", "NU", "NT", "ON", "PE", "QC", "SK", "YT"];
+        for (var i in provinces) {
+            if (text == provinces[i]) {
+                return true;
+            }
         }
+        return false;
+    }
+    isPostal(text) {
+        return /^[a-zA-Z]\d[a-zA-Z] ?\d[a-zA-Z]\d$/.test(text);
     }
-    if (field.tooShort) {
-        if ( this.tooShort(text, field.tooShort[1]) ) {
-            throw new Error(field.tooShort[0]);
+    isZip(text) {
+        return /^\d{5}(-\d{4})?$/.test(text);
+    }
+    isPhone(text) {
+        if (text != '') {
+            return (/^\d{3}-\d{3}-\d{4}$/.test(text));
+        } else {
+            return true;
         }
     }
-    // Check if password is valid
-    if(field.isPassword){
-		 if (! this.isPassword(text, field.isPassword[0].value) ) {
-		            throw new Error(field.isPassword[0]);
+    validateField(fieldName, text) {
+        var field = this.fields[fieldName];
+        if (field.required) {
+            if (this.tooShort(text, 1)) {
+                throw new Error(field.required);
+            }
         }
-	}
-    if (field.noMatch) {
-        if ( ! this.matches(text, $s(field.noMatch[1]).value ) ) {
-            throw new Error(field.noMatch[0]);
+        if (field.tooShort) {
+            if (this.tooShort(text, field.tooShort[1])) {
+                throw new Error(field.tooShort[0]);
+            }
         }
-    }
-    if(field.isUsername){
+        // Check if password is valid
+        if (field.isPassword) {
+            if (!this.isPassword(text, field.isPassword[0].value)) {
+                throw new Error(field.isPassword[0]);
+            }
+        }
+        if (field.noMatch) {
+            if (!this.matches(text, $s(field.noMatch[1]).value)) {
+                throw new Error(field.noMatch[0]);
+            }
+        }
+        if (field.isUsername) {
 
-        if ( ! this.isUsername(text) ) {
-            throw new Error(field.isUsername);
+            if (!this.isUsername(text)) {
+                throw new Error(field.isUsername);
+            }
         }
-    }
-    if (field.isEmail) {
-        if ( ! this.isEmail(text) ) {
-            throw new Error(field.isEmail);
+        if (field.isEmail) {
+            if (!this.isEmail(text)) {
+                throw new Error(field.isEmail);
+            }
         }
-    }
-    if (field.isFname) {
-        if ( ! this.isFname(text) ) {
-            throw new Error(field.isFname);
+        if (field.isFname) {
+            if (!this.isFname(text)) {
+                throw new Error(field.isFname);
+            }
         }
-    }
-    if (field.isLname) {
-        if ( ! this.isLname(text) ) {
-            throw new Error(field.isLname);
+        if (field.isLname) {
+            if (!this.isLname(text)) {
+                throw new Error(field.isLname);
+            }
         }
-    }
-    if(field.isCountry){
-             if ( ! this.isCountry(text) ) {
+        if (field.isCountry) {
+            if (!this.isCountry(text)) {
                 throw new Error(field.isCountry);
             }
-    }
-    if(fieldName == "state" && text != ''){
-        if ( ! this.isState(text) ) {
-            throw new Error(field.isState);
         }
-    }
-    if(fieldName == "zip" && text != ''){
-        if ( ! this.isZip(text) ) {
-            throw new Error(field.isZip);
+        if (fieldName == "state" && text != '') {
+            if (!this.isState(text)) {
+                throw new Error(field.isState);
+            }
         }
-    }
-    if(fieldName == "province" && text != ''){
-        if ( ! this.isProvince(text) ) {
-            throw new Error(field.isProvince);
+        if (fieldName == "zip" && text != '') {
+            if (!this.isZip(text)) {
+                throw new Error(field.isZip);
+            }
         }
-    }
-    if(fieldName == "postal" && text != ''){
-        if ( ! this.isPostal(text) ) {
-            throw new Error(field.isPostal);
+        if (fieldName == "province" && text != '') {
+            if (!this.isProvince(text)) {
+                throw new Error(field.isProvince);
+            }
         }
-    }
-    if (field.isPhone) {
-        if ( ! this.isPhone(text) ) {
-            throw new Error(field.isPhone);
+        if (fieldName == "postal" && text != '') {
+            if (!this.isPostal(text)) {
+                throw new Error(field.isPostal);
+            }
+        }
+        if (field.isPhone) {
+            if (!this.isPhone(text)) {
+                throw new Error(field.isPhone);
+            }
         }
     }
-}
-
-// Error message methods
-JoinForm.prototype.resetErrors = function () {
-    var message;
-    for ( var fieldName in this.fields ) {
-        $s(fieldName + "_error").className = "";
-        message = this.fields[fieldName].message;
-        $s(fieldName + "_error").firstChild.nodeValue =
-            ( message ) ? message : "";
+    // Error message methods
+    resetErrors() {
+        var message;
+        for (var fieldName in this.fields) {
+            $s(fieldName + "_error").className = "";
+            message = this.fields[fieldName].message;
+            $s(fieldName + "_error").firstChild.nodeValue =
+                (message) ? message : "";
+        }
     }
-}
-// Set default messages
-JoinForm.prototype.setMessages = function () {
-    var message;
-    for ( var fieldName in this.fields ) {
-        $s(fieldName + "_error").className = "";
-        message = this.fields[fieldName].message;
-        if(message == undefined){
-        	message = "";
+    // Set default messages
+    setMessages() {
+        var message;
+        for (var fieldName in this.fields) {
+            $s(fieldName + "_error").className = "";
+            message = this.fields[fieldName].message;
+            if (message == undefined) {
+                message = "";
+            }
+            $s(fieldName + "_error").firstChild.nodeValue = message;
         }
-        $s(fieldName + "_error").firstChild.nodeValue = message;
     }
-}
-JoinForm.prototype.clearError = function ( fieldName ) {
-    if(fieldName){
-    $s(fieldName + "_error").className = "";
-    $s(fieldName + "_error").firstChild.nodeValue = "";
+    clearError(fieldName) {
+        if (fieldName) {
+            $s(fieldName + "_error").className = "";
+            $s(fieldName + "_error").firstChild.nodeValue = "";
+        }
     }
-}
-
-// Method to validate form
-JoinForm.prototype.validateForm = function () {
-    var hasErrors = false;
-    var error_count = 0;
-    for ( var fieldName in this.fields ) {
-        this.clearError(fieldName);
-        try {
-            this.validateField(fieldName, $s(fieldName).value );
-        } catch (error) {
-            error_count++;
-            hasErrors = true;
-            $s(fieldName + "_error").className = "error";
-            // Uncomment the following if statement to add an ARIA alert to the error message
-            // Only the last alert is read, so limit alerts to the first error
-            // so it matches with focus sent to the first message
-            //if(error_count == 1){
-            //	$s(fieldName + "_error").setAttribute("role", "alert");
-            //}
-            $s(fieldName + "_error").firstChild.nodeValue = error.message;
-            if(error_count == 1){
-            	$s(fieldName).focus();
+    // Method to validate form
+    validateForm() {
+        var hasErrors = false;
+        var error_count = 0;
+        for (var fieldName in this.fields) {
+            this.clearError(fieldName);
+            try {
+                this.validateField(fieldName, $s(fieldName).value);
+            } catch (error) {
+                error_count++;
+                hasErrors = true;
+                $s(fieldName + "_error").className = "error";
+                // Uncomment the following if statement to add an ARIA alert to the error message
+                // Only the last alert is read, so limit alerts to the first error
+                // so it matches with focus sent to the first message
+                if(error_count == 1){
+                	$s(fieldName + "_error").setAttribute("role", "alert");
+                }
+                $s(fieldName + "_error").firstChild.nodeValue = error.message;
+                if (error_count == 1) {
+                    $s(fieldName).focus();
+                }
             }
+
         }
-    	
-    }
-    error_count = 0;
-    if(hasErrors === false){
-    	$s("feedback").style.display = "inline-block";
-        $s("feedback").firstChild.nodeValue = this.success;
-        $s("feedback").className = "feedback";
-       // Uncomment the next line to add an ARIA alert to the feedback message
-       // $s("feedback").setAttribute("role", "alert");
+        error_count = 0;
+        if (hasErrors === false) {
+            $s("feedback").style.display = "inline-block";
+            $s("feedback").firstChild.nodeValue = this.success;
+            $s("feedback").className = "feedback";
+            // Uncomment the next line to add an ARIA alert to the feedback message
+            $s("feedback").setAttribute("role", "alert");
+        }
+        return hasErrors;
     }
-    return hasErrors;
 }
 
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/landmarks.html b/landmarks.html
index e6c380bc6..bcf539e02 100644
--- a/landmarks.html
+++ b/landmarks.html
@@ -7,18 +7,18 @@
         <link rel="stylesheet" href="styles.css" type="text/css">
 
         <script src="join.lib.js"></script>
-	    <script src="join.js"></script>
+		<script src="join.js"></script>
     </head>
 <body> 
 <div id="top-bar">&nbsp; </div>
 <div class="page_wrapper">
-	<div id="header">
+	<div role="banner" id="header">
 		<div id="course_title_container" style="left:1em;">		
 			<h1 id="section-title">Our Community Website</h1>
 		</div>
 	</div>
 
-	<div class="" style="z-index: auto; position: static; top: auto;" id="lrg_topnav">
+	<div role="navigation" class="" style="z-index: auto; position: static; top: auto;" id="lrg_topnav">
 		<div style="width: 100%;" id="topnavlistcontainer" aria-label="main navigation tabs">
 			<a id="main-nav"></a>
 			<ul style="" id="topnavlist">
@@ -32,15 +32,15 @@ <h1 id="section-title">Our Community Website</h1>
 		</div> 
 	</div>
 
-	<div class="logoutbar">&nbsp; <input type="text" class="input"><input type="submit" value="search"></div>
+	<div role="search" class="logoutbar">&nbsp; <input type="text" class="input"><input type="submit" value="search"></div>
 	<div class="crumbcontainer">
-			<div id="breadcrumbs" tabindex="0" aria-label="breadcrumb links">&nbsp;</div>
+		<div id="breadcrumbs" tabindex="0" aria-label="breadcrumb links">&nbsp;</div>
 	</div>
 	<div id="contentwrapper">
 		<div id="lrg_content">
-			<div id="leftcolumn">
-			  <a id="menu"></a>
-				 <div id="side-menu" aria-label="left side, secondary menu" accesskey="0">
+			<div role="navigation" id="leftcolumn">
+				<a id="menu"></a>
+				<div id="side-menu" aria-label="left side, secondary menu" accesskey="0">
 					<br/>
 					<h2 class="box"><span>Networking</span></h2>
 					<div class="box" id="menu_Networking">
@@ -71,10 +71,10 @@ <h2 class="box"><span>People Online</span></h2>
 		<br style="clear:both;">
 		<a id="top"></a>
 
-	<div class="profile">
+	<div role="main" class="profile">
 		<h2>Join our community</h2>
 		<div id="feedback">&nbsp;</div>
-		<form id="join_form">
+		<form role="form" id="join_form">
 		<dl>
 			<dt>
 			<img src="images/required.gif" height="14" width="14" alt="Required Field" /> denotes required fields.<br />
@@ -84,7 +84,7 @@ <h2>Join our community</h2>
 			<dt>
 				<label for="username">Username:</label><img src="images/required.gif"  alt="Required Field" class="img" />
 			</dt>
-			<dd><input id="username" class="input" type="text" value="" maxlength="30" size="20" name="username"  aria-required="true" aria-describedby="username_error"><br />
+			<dd><input role="alert" id="username" class="input" type="text" value="" maxlength="30" size="20" name="username"  aria-required="true" aria-describedby="username_error"><br />
 				<span id="username_error">&nbsp;</span><br />
 			</dd>
 			<dt>
@@ -157,10 +157,10 @@ <h2>Join our community</h2>
 				<input type="text" name="state" id="state" maxlength="2" class="input"/>
 				<span id="state_error">&nbsp;</span>
 			</dd>
-			 <dt class="state_block">   
+			<dt class="state_block">   
 				<label for="zip">ZIP Code:</label>
-			 </dt>
-			 <dd class="state_block">
+			</dt>
+			<dd class="state_block">
 				<input type="text" name="zip" id="zip"  class="input"/>
 				<span id="zip_error">&nbsp;</span><br />
 			</dd>
@@ -202,18 +202,18 @@ <h2>Join our community</h2>
 		</dl>
 		<br  style="clear:both;"/>
 		<div>
-			<input type="button" id="join" value="Join" /> &nbsp;
+			<input type="button" role="alert" id="join" value="Join" /> &nbsp;
 			<input type="button" id="reset_form" value="Reset" /><br />
 		</div>
 		</form>
 		<br  style="clear:both;"/>
 
-			<br style="width:100%;clear:both;" />
+		<br style="width:100%;clear:both;" />
 
-		</div>
-		<div id="advertising">
+	</div>
+	<div role="complementary" id="advertising">
 		<h2>Advertising</h2>
-			<div>
+		<div>
 				<img src="images/rum_cover.jpg" alt="" />
 				<br style="clear:both;"/>
 			</div>
@@ -224,8 +224,7 @@ <h2>Advertising</h2>
 <p><br><br>&nbsp;</p>
 </div>
 
-<div id="footer"> Copyright &copy; <a href="" class="fake">Chang School.</a>
-</div>
+<div role="contentinfo" id="footer"> Copyright &copy; <a href="" class="fake">Chang School.</a></div>
 
 </body>
 </html>

From c0b2b0407d27c6835ee7b1ad47eb28a2a9a576a5 Mon Sep 17 00:00:00 2001
From: Sarah Wylie <sarahannemariawylie@gmail.com>
Date: Thu, 10 Jul 2025 08:39:06 -0500
Subject: [PATCH 2/3] toggle does not follow best practices, but updated per
 assignment, also updated non-accessible color contrast

---
 assets/ik_lib.css         |  8 ++++----
 assets/ik_togglebutton.js | 43 +++++++++++++++++----------------------
 styles.css                | 21 +++++++++----------
 toggle.html               |  2 +-
 4 files changed, 34 insertions(+), 40 deletions(-)

diff --git a/assets/ik_lib.css b/assets/ik_lib.css
index 66a83e54e..01000ddd1 100644
--- a/assets/ik_lib.css
+++ b/assets/ik_lib.css
@@ -26,7 +26,7 @@ p {
   margin: 10px 0;
 }
 a {
-  color: #f76;
+  color: #AD1400;
   text-decoration: none;
 }
 input[type=text] {
@@ -66,7 +66,7 @@ button {
   -webkit-box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.25), inset 1px 1px 0 rgba(255, 255, 255, 0.25);
   -moz-box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.25), inset 1px 1px 0 rgba(255, 255, 255, 0.25);
   box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.25), inset 1px 1px 0 rgba(255, 255, 255, 0.25);
-  background-color: #f76;
+  background-color: #AD1400;
   color: #fff;
   font: inherit;
   cursor: pointer;
@@ -910,13 +910,13 @@ button[disabled]:focus {
   border-bottom-right-radius: 6px;
 }
 .buttongroup .toggle:hover {
-  color: #f76;
+  color: #AD1400;
 }
 .buttongroup .toggle:focus {
   z-index: 1;
 }
 .buttongroup .toggle.pressed {
-  background-color: #f76;
+  background-color: #AD1400;
   color: #fff;
   border-color: #cc5f52;
   box-shadow: inset 0 5px 3px -3px rgba(0, 0, 0, 0.25);
diff --git a/assets/ik_togglebutton.js b/assets/ik_togglebutton.js
index 5a84e60d3..4a2bdca19 100644
--- a/assets/ik_togglebutton.js
+++ b/assets/ik_togglebutton.js
@@ -1,12 +1,12 @@
 ;(function ( $, window, document, undefined ) {
- 
+
 	var pluginName = 'ik_togglebutton',
-		defaults = {
-			"label": "toggle button",
-			"isPressed": false,
-			"onToggle": function() { console.log('toggle action is undefined'); }
-		};
-	 
+	defaults = {
+		"label": "toggle button",
+		"isPressed": false,
+		"onToggle": function() { console.log('toggle action is undefined'); }
+	};
+	
 	/**
 	 * @constructs Plugin
 	 * @param {Object} element - Current DOM element from selected collection.
@@ -31,19 +31,18 @@
 		id = 'toggle' + $('.ik_togglebutton').length; // generate unique id
 		$elem = this.element
 			.attr({
-				"id": id //,
-//			"tabindex": 0,
-//			"role": "button",
-//			"aria-label": plugin.options.label,
-//			"aria-pressed": false
+				"id": id,
+				"tabindex": 0,
+				"role": "button",
+				"aria-label": plugin.options.label,
+				"aria-pressed": false
 			});
 		
 		plugin.options.onToggle = plugin.options.onToggle.bind(plugin);
 		
 		$elem
 			.on('click', {plugin: plugin}, plugin.onActivate)
-//		.on('keydown', {plugin: plugin}, plugin.onActivate)
-		;
+			.on('keydown', {plugin: plugin}, plugin.onActivate);
 		
 	};
 	
@@ -68,21 +67,18 @@
 			if (plugin.options.isPressed) {
 				$me
 					.removeClass('pressed')
-//				.attr({
-//					"aria-pressed": false
-//				})
-					;
+					.attr({
+						"aria-pressed": false
+					});
 				plugin.options.isPressed = false;
 			} else {
 				$me
 					.addClass('pressed')
-//				.attr({
-//				  "aria-pressed": true
-//					})
-          ;
+					.attr({
+						"aria-pressed": true
+					});
 				plugin.options.isPressed = true;
 			}
-			
 			plugin.options.onToggle();
 		}
 		
@@ -100,5 +96,4 @@
 		});
 		
 	}
- 
 })( jQuery, window, document );
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 0dc5448f8..a1bc21368 100644
--- a/styles.css
+++ b/styles.css
@@ -40,7 +40,7 @@ body {
     float:left;
 }
 .profile h3{
-    float:left:
+    float:left;
     clear:both;
     width:100%;
 }
@@ -82,9 +82,9 @@ body {
     background-color:green;
     font-weight:700;
     color:#ffffff;
-    width:60%
+    width:60%;
     margin-left:auto;
-    margin:right:auto;
+    margin-right:auto;
     padding: 1em;
 }
 fieldset.group_form{
@@ -124,7 +124,6 @@ div.input-form {
 
 }
 
-
 .page_wrapper{
 	width:95%;
 	margin-left:auto;
@@ -381,7 +380,7 @@ ul#topnavlist {
 	height:1.8em;
 	white-space:nowrap;
 
- }
+}
 
 ul#topnavlist li {
 
@@ -422,7 +421,7 @@ ul#topnavlist li a {
     /* The normal, unselected tabs. They are all links */
 	color: #555;
 	font-weight:bold;
-   	text-decoration:none;
+	text-decoration:none;
 	background-color:white;
 	border-radius: .5em .5em 0em 0em;
 	-moz-border-radius: .5em .5em 0em 0em;
@@ -532,7 +531,7 @@ div .divider {
 @media screen and (max-width: 1220px) {
 
     body{
-     	font-size:.8em;
+		font-size:.8em;
     }
 	#advertising{
 		margin-top:1em;
@@ -553,17 +552,17 @@ div .divider {
     }
     .profile > dl > dd> img{
         height:70px;
-     }
+    }
     .profile > dl > dt> img{
         height:20px;
-     }
+    }
     .profile h3{
-        float:none:
+        float:none;
         clear:both;
         width:90%;
     }
     .profile dl {
-    	float:left;
+		float:left;
         width: 100%;
     }
     .profile dt{
diff --git a/toggle.html b/toggle.html
index f03e25929..ae19cd727 100644
--- a/toggle.html
+++ b/toggle.html
@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, user-scalable=yes">
 		<title>IK Library: Toggle Button</title>
 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 		<link href="assets/ik_lib.css" rel="stylesheet" type="text/css">

From 936856573feee0ad7a9f8db391089a2349b4b406 Mon Sep 17 00:00:00 2001
From: Sarah Wylie <sarahannemariawylie@gmail.com>
Date: Fri, 11 Jul 2025 11:54:50 -0500
Subject: [PATCH 3/3] added autocomplete and cleaned up contrasts in suggest,
 fixed issues in index

---
 assets/ik_lib.css    |  16 +--
 assets/ik_suggest.js |  69 ++++++++----
 assets/ik_utils.js   | 242 +++++++++++++++++++++++++++++++++++++++++++
 index.html           |   2 +-
 styles.css           |  21 ++--
 suggest.html         |   2 +-
 6 files changed, 314 insertions(+), 38 deletions(-)

diff --git a/assets/ik_lib.css b/assets/ik_lib.css
index 66a83e54e..720ad371a 100644
--- a/assets/ik_lib.css
+++ b/assets/ik_lib.css
@@ -26,8 +26,9 @@ p {
   margin: 10px 0;
 }
 a {
-  color: #f76;
+  color: #8A1000;
   text-decoration: none;
+  font-size: large;
 }
 input[type=text] {
   padding: 8px 12px;
@@ -66,7 +67,7 @@ button {
   -webkit-box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.25), inset 1px 1px 0 rgba(255, 255, 255, 0.25);
   -moz-box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.25), inset 1px 1px 0 rgba(255, 255, 255, 0.25);
   box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.25), inset 1px 1px 0 rgba(255, 255, 255, 0.25);
-  background-color: #f76;
+  background-color: #8A1000;
   color: #fff;
   font: inherit;
   cursor: pointer;
@@ -525,11 +526,11 @@ button[disabled]:focus {
   font-weight: bold;
 }
 .ik_suggest .suggestions li:hover {
-  background-color: #f76;
+  background-color: #8A1000;
   color: #fff;
 }
 .ik_suggest .suggestions li.selected {
-  background-color: #f76;
+  background-color: #8A1000;
   color: #fff;
 }
 .ik_sortable {
@@ -910,13 +911,13 @@ button[disabled]:focus {
   border-bottom-right-radius: 6px;
 }
 .buttongroup .toggle:hover {
-  color: #f76;
+  color: #8A1000;
 }
 .buttongroup .toggle:focus {
   z-index: 1;
 }
 .buttongroup .toggle.pressed {
-  background-color: #f76;
+  background-color: #8A1000;
   color: #fff;
   border-color: #cc5f52;
   box-shadow: inset 0 5px 3px -3px rgba(0, 0, 0, 0.25);
@@ -930,3 +931,6 @@ button[disabled]:focus {
 .buttongroup .underline {
   text-decoration: underline;
 }
+ul li {
+  padding: 5px 0;
+}
\ No newline at end of file
diff --git a/assets/ik_suggest.js b/assets/ik_suggest.js
index 90d068e62..0058ce54b 100644
--- a/assets/ik_suggest.js
+++ b/assets/ik_suggest.js
@@ -2,6 +2,7 @@
  
 var pluginName = "ik_suggest",
 	defaults = {
+		'instructions': "As you start typing the application might suggest similar search terms. Use up and down arrow keys to select a suggested search string.",
 		'minLength': 2,
 		'maxResults': 10,
 		'source': []
@@ -34,7 +35,11 @@ var pluginName = "ik_suggest",
 		plugin = this;
 		
 		plugin.notify = $('<div/>') // add hidden live region to be used by screen readers
-			.addClass('ik_readersonly');
+			.addClass('ik_readersonly')
+			.attr({
+				'role': 'region',
+				'aria-live': 'polite'
+			});
 		
 		$elem = plugin.element
 			.attr({
@@ -65,6 +70,8 @@ var pluginName = "ik_suggest",
 		
 		plugin = event.data.plugin;
 
+		plugin.notify.text(plugin.options.instructions);
+
 	};
 	
 	/** 
@@ -114,26 +121,45 @@ var pluginName = "ik_suggest",
 		
 		plugin = event.data.plugin;
 		$me = $(event.currentTarget);
-			
-				plugin.list.empty();
-				
-				suggestions = plugin.getSuggestions(plugin.options.source, $me.val());
-				
-				if (suggestions.length >= 1) {
-					for(var i = 0, l = suggestions.length; i < l; i++) {
-						$('<li/>').html(suggestions[i])
-						.on('click', {'plugin': plugin}, plugin.onOptionClick) // add click event handler
-						.appendTo(plugin.list);
-					}
-					plugin.list.show();
-				} else {
-					plugin.list.hide();
-				}
+		
+		switch (event.keyCode) {
+			case ik_utils.keys.down: // select next suggestion from list
+			selected = plugin.list.find('.selected');
+			if(selected.length) {
+			msg = selected.removeClass('selected').next().addClass('selected').text();
+			} else {
+			msg = plugin.list.find('li:first').addClass('selected').text();
+			}
+			plugin.notify.text(msg); // add suggestion text to live region to be read by screen reader
+			break;
+			case ik_utils.keys.up: // select previous suggestion from list
+			selected = plugin.list.find('.selected');
+			if(selected.length) {
+			msg = selected.removeClass('selected').prev().addClass('selected').text();
+			}
+			plugin.notify.text(msg); // add suggestion text to live region to be read by screen reader
+			break;
 
+			default: // get suggestions based on user input
+			plugin.list.empty();
+			suggestions = plugin.getSuggestions(plugin.options.source, $me.val());
+					
+			if (suggestions.length >= 1) {
+				for(var i = 0, l = suggestions.length; i < l; i++) {
+					$('<li/>').html(suggestions[i])
+					.on('click', {'plugin': plugin}, plugin.onOptionClick) // add click event handler
+					.appendTo(plugin.list);
+				}
+				plugin.list.show();
+			} else {
+				plugin.list.hide();
+			}
+			break;
+		}
 	};
 	
 	/** 
-	 * Handles fosucout event on text field.
+	 * Handles focusout event on text field.
 	 * 
 	 * @param {object} event - Focus event.
 	 * @param {object} event.data - Event data.
@@ -143,6 +169,8 @@ var pluginName = "ik_suggest",
 		
 		var plugin = event.data.plugin;
 		
+		plugin.notify.text(plugin.options.instructions);
+
 		setTimeout(function() { plugin.list.empty().hide(); }, 200);
 		
 	};
@@ -194,7 +222,9 @@ var pluginName = "ik_suggest",
 				}
 			}
 		}
-
+		if (r.length > 1) { // add instructions to hidden live area
+			this.notify.text('Suggestions are available for this field. Use up and down arrows to select a suggestion and enter key to use it.');
+		}
 		return r;
 		
 	};
@@ -212,4 +242,5 @@ var pluginName = "ik_suggest",
 		
 	}
  
-})( jQuery, window, document );
\ No newline at end of file
+})( jQuery, window, document );
+var ik_utils = ik_utils || {};
\ No newline at end of file
diff --git a/assets/ik_utils.js b/assets/ik_utils.js
index d244aadb7..7d6ec2e3a 100644
--- a/assets/ik_utils.js
+++ b/assets/ik_utils.js
@@ -31,3 +31,245 @@ ik_utils.getTransitionEventName = function(){
 
 	return name;
 }
+
+var countries = [
+	'Afganistan', 
+	'Albania', 
+	'Algeria', 
+	'American Samoa', 
+	'Andorra', 
+	'Angola', 
+	'Anguilla', 
+	'Antarctica', 
+	'Antigua and Barbuda', 
+	'Argentina', 
+	'Armenia', 
+	'Aruba', 
+	'Australia', 
+	'Austria', 
+	'Azerbaijan', 
+	'Bahamas', 
+	'Bahrain', 
+	'Bangladesh', 
+	'Barbados', 
+	'Belarus', 
+	'Belgium', 
+	'Belize', 
+	'Benin', 
+	'Bermuda', 
+	'Bhutan', 
+	'Bolivia', 
+	'Bosnia and Herzegowina', 
+	'Botswana', 
+	'Bouvet Island', 
+	'Brazil', 
+	'British Indian Ocean Territory', 
+	'Brunei Darussalam', 
+	'Bulgaria', 
+	'Burkina Faso', 
+	'Burundi', 
+	'Cambodia', 
+	'Cameroon', 
+	'Canada', 
+	'Cape Verde', 
+	'Cayman Islands', 
+	'Central African Republic', 
+	'Chad', 
+	'Chile', 
+	'China', 
+	'Christmas Island', 
+	'Cocos Keeling Islands', 
+	'Colombia', 
+	'Comoros', 
+	'Congo', 
+	'Congo, Democratic Republic of the', 
+	'Cook Islands', 
+	'Costa Rica', 
+	'Cote d\'Ivoire', 
+	'Croatia Hrvatska', 
+	'Cuba', 
+	'Cyprus', 
+	'Czech Republic', 
+	'Denmark', 
+	'Djibouti', 
+	'Dominica', 
+	'Dominican Republic', 
+	'East Timor', 
+	'Ecuador', 
+	'Egypt', 
+	'El Salvador', 
+	'Equatorial Guinea', 
+	'Eritrea', 
+	'Estonia', 
+	'Ethiopia', 
+	'Falkland Islands Malvinas', 
+	'Faroe Islands', 
+	'Fiji', 
+	'Finland', 
+	'France', 
+	'France, Metropolitan', 
+	'French Guiana', 
+	'French Polynesia', 
+	'French Southern Territories', 
+	'Gabon', 
+	'Gambia', 
+	'Georgia', 
+	'Germany', 
+	'Ghana', 
+	'Gibraltar', 
+	'Greece', 
+	'Greenland', 
+	'Grenada', 
+	'Guadeloupe', 
+	'Guam', 
+	'Guatemala', 
+	'Guinea', 
+	'Guinea-Bissau', 
+	'Guyana', 
+	'Haiti', 
+	'Heard and Mc Donald Islands', 
+	'Holy See (Vatican City State)', 
+	'Honduras', 
+	'Hong Kong', 
+	'Hungary', 
+	'Iceland', 
+	'India', 
+	'Indonesia', 
+	'Iran, Islamic Republic of', 
+	'Iraq', 
+	'Ireland', 
+	'Israel', 
+	'Italy', 
+	'Jamaica', 
+	'Japan', 
+	'Jordan', 
+	'Kazakhstan', 
+	'Kenya', 
+	'Kiribati', 
+	'Korea, Democratic People\'s Republic of', 
+	'Korea, Republic of', 
+	'Kuwait', 
+	'Kyrgyzstan', 
+	'Lao People\'s Democratic Republic', 
+	'Latvia', 
+	'Lebanon', 
+	'Lesotho', 
+	'Liberia', 
+	'Libyan Arab Jamahiriya', 
+	'Liechtenstein', 
+	'Lithuania', 
+	'Luxembourg', 
+	'Macau', 
+	'Macedonia, The Former Yugoslav Republic of', 
+	'Madagascar', 
+	'Malawi', 
+	'Malaysia', 
+	'Maldives', 
+	'Mali', 
+	'Malta', 
+	'Marshall Islands', 
+	'Martinique', 
+	'Mauritania', 
+	'Mauritius', 
+	'Mayotte', 
+	'Mexico', 
+	'Micronesia, Federated States of', 
+	'Moldova, Republic of', 
+	'Monaco', 
+	'Mongolia', 
+	'Montserrat', 
+	'Morocco', 
+	'Mozambique', 
+	'Myanmar', 
+	'Namibia', 
+	'Nauru', 
+	'Nepal', 
+	'Netherlands', 
+	'Netherlands Antilles', 
+	'New Caledonia', 
+	'New Zealand', 
+	'Nicaragua', 
+	'Niger', 
+	'Nigeria', 
+	'Niue', 
+	'Norfolk Island', 
+	'Northern Mariana Islands', 
+	'Norway', 
+	'Oman', 
+	'Pakistan', 
+	'Palau', 
+	'Panama', 
+	'Papua New Guinea', 
+	'Paraguay', 
+	'Peru', 
+	'Philippines', 
+	'Pitcairn', 
+	'Poland', 
+	'Portugal', 
+	'Puerto Rico', 
+	'Qatar', 
+	'Reunion', 
+	'Romania', 
+	'Russian Federation', 
+	'Rwanda', 
+	'Saint Kitts and Nevis', 
+	'Saint Lucia', 
+	'Saint Vincent and the Grenadines', 
+	'Samoa', 
+	'San Marino', 
+	'Sao Tome and Principe', 
+	'Saudi Arabia', 
+	'Senegal', 
+	'Seychelles', 
+	'Sierra Leone', 
+	'Singapore', 
+	'Slovakia (Slovak Republic)', 
+	'Slovenia', 
+	'Solomon Islands', 
+	'Somalia', 
+	'South Africa', 
+	'South Georgia and the South Sandwich Islands', 
+	'Spain', 
+	'Sri Lanka', 
+	'St. Helena', 
+	'St. Pierre and Miquelon', 
+	'Sudan', 
+	'Suriname', 
+	'Svalbard and Jan Mayen Islands', 
+	'Swaziland', 
+	'Sweden', 
+	'Switzerland', 
+	'Syrian Arab Republic', 
+	'Taiwan, Province of China', 
+	'Tajikistan', 
+	'Tanzania, United Republic of', 
+	'Thailand', 
+	'Togo', 
+	'Tokelau', 
+	'Tonga', 
+	'Trinidad and Tobago', 
+	'Tunisia', 
+	'Turkey', 
+	'Turkmenistan', 
+	'Turks and Caicos Islands', 
+	'Tuvalu', 
+	'Uganda', 
+	'Ukraine', 
+	'United Arab Emirates', 
+	'United Kingdom', 
+	'United States', 
+	'United States Minor Outlying Islands', 
+	'Uruguay', 
+	'Uzbekistan', 
+	'Vanuatu', 
+	'Venezuela', 
+	'Viet Nam', 
+	'Virgin Islands (British)', 
+	'Virgin Islands (U.S.)', 
+	'Wallis and Futuna Islands', 
+	'Western Sahara', 
+	'Yemen', 
+	'Yugoslavia', 
+	'Zambia', 
+	'Zimbabwe'
+];
\ No newline at end of file
diff --git a/index.html b/index.html
index 6ec46b06a..fbbe93c6d 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, user-scalable=yes">
 		<title>Learn Aria Course Files</title>
 		<link href="assets/ik_lib.css" rel="stylesheet" type="text/css">
 
diff --git a/styles.css b/styles.css
index 0dc5448f8..a1bc21368 100644
--- a/styles.css
+++ b/styles.css
@@ -40,7 +40,7 @@ body {
     float:left;
 }
 .profile h3{
-    float:left:
+    float:left;
     clear:both;
     width:100%;
 }
@@ -82,9 +82,9 @@ body {
     background-color:green;
     font-weight:700;
     color:#ffffff;
-    width:60%
+    width:60%;
     margin-left:auto;
-    margin:right:auto;
+    margin-right:auto;
     padding: 1em;
 }
 fieldset.group_form{
@@ -124,7 +124,6 @@ div.input-form {
 
 }
 
-
 .page_wrapper{
 	width:95%;
 	margin-left:auto;
@@ -381,7 +380,7 @@ ul#topnavlist {
 	height:1.8em;
 	white-space:nowrap;
 
- }
+}
 
 ul#topnavlist li {
 
@@ -422,7 +421,7 @@ ul#topnavlist li a {
     /* The normal, unselected tabs. They are all links */
 	color: #555;
 	font-weight:bold;
-   	text-decoration:none;
+	text-decoration:none;
 	background-color:white;
 	border-radius: .5em .5em 0em 0em;
 	-moz-border-radius: .5em .5em 0em 0em;
@@ -532,7 +531,7 @@ div .divider {
 @media screen and (max-width: 1220px) {
 
     body{
-     	font-size:.8em;
+		font-size:.8em;
     }
 	#advertising{
 		margin-top:1em;
@@ -553,17 +552,17 @@ div .divider {
     }
     .profile > dl > dd> img{
         height:70px;
-     }
+    }
     .profile > dl > dt> img{
         height:20px;
-     }
+    }
     .profile h3{
-        float:none:
+        float:none;
         clear:both;
         width:90%;
     }
     .profile dl {
-    	float:left;
+		float:left;
         width: 100%;
     }
     .profile dt{
diff --git a/suggest.html b/suggest.html
index 06d075cd7..44636869e 100644
--- a/suggest.html
+++ b/suggest.html
@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, user-scalable=yes">
 		<title>IK Library: Suggestions</title>
 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 		<link href="assets/ik_lib.css" rel="stylesheet" type="text/css">