Merge pull request #1624 from clpetersonucf/issue/1587-accessibility-…

…statement Accessibility statement (and a few post-Dark Mode style fixes too)
ucfopen · Dec 6, 2024 · 4bbaa4b · 4bbaa4b
2 parents 22bb7bb + 8cc5f2f
commit 4bbaa4b
Show file tree

Hide file tree

Showing 8 changed files with 155 additions and 39 deletions.
diff --git a/src/components/help-accessibility.jsx b/src/components/help-accessibility.jsx
@@ -0,0 +1,79 @@
+import React from 'react';
+
+const HelpAccessibility = () => {
+
+	return (
+		<>
+			<section className='full-width'>
+				<h2>Our Commitment to Accessibility</h2>
+				<p>
+					The UCF Center for Distributed Learning is committed to ensuring federal and institutional accessibility standards are met or exceeded with Materia 
+					and its ecosystem of widgets. As a product of UCF, Materia is obligated to adhere to UCF's <a href="https://policies.ucf.edu/documents/2-006.pdf" target="_blank">Digital Accessibility Policy.</a>
+				</p>
+
+				<h3>Accessibility Standards and Compliance</h3>
+				<p>
+					Materia widgets are often highly interactive, gamified experiences that exceed the characteristics of traditional web documents.
+					While we strive to ensure adherence to WCAG 2.0 AA standards wherever possible, certain widgets may not be fully capable of supporting those standards.  
+					Widgets are proactively labeled based on their level of support for two major elements of WCAG 2.0 AA standards compliance: keyboard navigation and screen reader support.
+
+					Materia and its widgets strive to adhere to the following accessibility guidelines:
+				</p>
+				<ul>
+					<li>Web Content Accessibility Guidelines (WCAG) 2.0 Level AA</li>
+					<li>Section 508 of the Rehabilitation Act</li>
+					<li>Americans with Disabilities Act (ADA) digital accessibility requirements</li>
+				</ul>
+			</section>
+			<section className='half-width'>
+				<h3>Web Application Accessibility Features</h3>
+				<ul>
+					<li>Keyboard navigation support</li>
+					<li>Screen reader compatibility</li>
+					<li>Alternative text for images and graphics</li>
+					<li>Consistent and predictable navigation</li>
+					<li>Form input error identification and correction guidance</li>
+				</ul>
+				<h3>Supported Assistive Technologies</h3>
+				<ul>
+					<li>Screen readers (NVDA, JAWS, VoiceOver)</li>
+					<li>Screen magnification tools</li>
+					<li>Alternative input devices</li>
+					<li>Speech-to-text and text-to-speech technologies</li>
+				</ul>
+			</section>
+			<section className='half-width'>
+				<h3>Widget Accessibility Specifications</h3>
+				<ul>
+					<li>Fully navigable using keyboard controls*</li>
+					<li>Compatible with major assistive technologies*</li>
+					<li>Clear and consistent interactive elements</li>
+					<li>Semantic HTML structure</li>
+					<li>Reasonable cognitive load for educational interactions</li>
+				</ul>
+				<span className='italic'>*Support may vary by widget. Refer to the accessibility description of each widget in the Widget Catalog.</span>
+				<h3>Ongoing Accessibility Efforts</h3>
+				<ul>
+					<li>Regular accessibility testing</li>
+					<li>Accessible design validation of new widgets as they are developed</li>
+					<li>User feedback collection for continuous improvement</li>
+					<li>Commitment to rapid remediation of identified accessibility barriers</li>
+				</ul>
+			</section>
+			<section className='full-width'>
+				<h3>Reporting Accessibility Issues</h3>
+				<p>If you encounter any accessibility barriers or have suggestions for improvement, please contact us:</p>
+				<dl>
+					<dt>Email:</dt>
+					<dd>ACCESSIBILITY EMAIL HERE</dd>
+					<dt>Online:</dt>
+					<dd>ACCESSIBILITY BARRIER REPORTING LINK</dd>
+				</dl>
+				<h3>Legal Compliance and Disclaimer</h3>
+				<p>The UCF Center for Distributed Learning is dedicated to meeting or exceeding applicable accessibility standards. While we continuously work to improve our digital tools and services, we acknowledge that perfect accessibility is an ongoing journey.</p>
+			</section>
+		</>
+	)
+}
+
+export default HelpAccessibility
diff --git a/src/components/help-page.jsx b/src/components/help-page.jsx
@@ -4,15 +4,16 @@ import Header from './header'
 import HelpHome from './help-home'
 import HelpForStudents from './help-for-students'
 import HelpForInstructors from './help-for-instructors'
+import HelpAccessibility from './help-accessibility'
 
 import './help-page.scss';
 
 const HelpPage = () => {
 
-	const [page, setPage] = useState(window.location.hash.match(/#(home|students|instructors){1}$/)?.[1])
+	const [page, setPage] = useState(window.location.hash.match(/#(home|students|instructors|accessibility){1}$/)?.[1])
 
 	const listenToHashChange = () => {
-		const match = window.location.hash.match(/#(home|students|instructors){1}$/)
+		const match = window.location.hash.match(/#(home|students|instructors|accessibility){1}$/)
 		if (match != null && match[1] != null) setPage(match[1])
 		else setPage('home')
 	}
@@ -33,6 +34,10 @@ const HelpPage = () => {
 		case 'instructors':
 			helpContentRender = <HelpForInstructors />
 			break
+		case 'accessibility':
+			console.log('accessibility yes')
+			helpContentRender = <HelpAccessibility />
+			break
 		default:
 			helpContentRender = <HelpHome />
 	}
@@ -49,6 +54,7 @@ const HelpPage = () => {
 								<li><a href='#home'>Help Home</a></li>
 								<li><a href='#students'>For Students</a></li>
 								<li><a href='#instructors'>For Instructors</a></li>
+								<li><a href='#accessibility'>Accessibility</a></li>
 							</ul>
 						</nav>
 						<main>

diff --git a/src/components/help-page.scss b/src/components/help-page.scss
@@ -100,6 +100,19 @@
 			font-size: 20px;
 		}
 
+		ul {
+			margin: 0.5em 0;
+			padding-left: 1em;
+
+			li {
+				line-height: 1.4em;
+			}
+		}
+
+		p {
+			line-height: 1.4em;
+		}
+
 		h3 {
 			margin: 30px 0 0 0;
 

diff --git a/src/components/homepage.scss b/src/components/homepage.scss
@@ -2,6 +2,8 @@
 
 .spotlight {
 
+	font-weight: 400;
+
 	.main_container {
 		position: relative;
 		// width: 100vw;
@@ -145,7 +147,7 @@
 		margin: 0 auto;
 	}
 	div {
-		font-weight: 300;
+		font-weight: 400;
 		font-size: 14px;
 		color: #000;
 
@@ -264,6 +266,7 @@
 		line-height: 150%;
 		font-weight: 300;
 		font-size: 16px;
+		font-weight: 400;
 		text-align: center;
 
 		&.copyright {

diff --git a/src/components/my-widgets-export.jsx b/src/components/my-widgets-export.jsx
@@ -107,14 +107,18 @@ const MyWidgetsExport = ({onClose, inst, scores}) => {
 
 	const semesterOptionElements = scores.map((val, index) => (
 		<li key={index}>
-			<input type='checkbox'
-				id={val.id}
-				className='semester'
-				name={val.id}
-				disabled={scores.length === 1}
-				checked={state.semesterOptions[index] || false} // makes sure it will never be null
-				onChange={() => {semesterCheck(index)}}></input>
-				<label htmlFor={val.id}>{val.year + ' ' + val.term}</label>
+			<label className='checkbox-wrapper' htmlFor={val.id}>
+				<input type='checkbox'
+					id={val.id}
+					className='semester'
+					name={val.id}
+					disabled={scores.length === 1}
+					checked={state.semesterOptions[index] || false} // makes sure it will never be null
+					onChange={() => {semesterCheck(index)}}></input>
+				<span className='custom-checkbox'></span>
+				{val.year + ' ' + val.term}
+			</label>
+
 		</li>
 	))
 
@@ -172,11 +176,15 @@ const MyWidgetsExport = ({onClose, inst, scores}) => {
 				</p>
 				<ul>
 					<li className={`${scores.length > 1 ? 'active' : ''}`}>
-						<input type='checkbox'
-							id='checkall'
-							checked={state.checkAll}
-							onChange={checkAllVals}/>
-						<label htmlFor='checkall'> - Check all</label>
+						<label className='checkbox-wrapper' htmlFor='checkall'>
+							<input type='checkbox'
+								id='checkall'
+								checked={state.checkAll}
+								onChange={checkAllVals}/>
+							<span className='custom-checkbox'></span>
+							- Check all
+						</label>
+
 					</li>
 					{ semesterOptionElements }
 				</ul>

diff --git a/src/components/my-widgets-export.scss b/src/components/my-widgets-export.scss
@@ -22,15 +22,18 @@
 			}
 
 			.semester-btn {
-				color: white;
-				font-size: 0.9em;
 				min-width: 75px;
-				text-align: center;
-				background-color: #f1824c;
 				padding: 10px;
 				margin-left: auto;
 				cursor: pointer;
 
+				text-align: center;
+				color: #fff;
+				font-size: 0.9em;
+				font-weight: 400;
+
+				background-color: #f1824c;
+
 				&:hover {
 					text-decoration: underline;
 				}
@@ -48,6 +51,7 @@
 		display: flex;
 		flex-direction: column;
 		padding: 0 10px;
+		font-weight: 400;
 
 		h3 {
 			margin: 0 0 15px 0;
@@ -206,6 +210,7 @@
 
 		label {
 			cursor: pointer;
+			font-weight: 400;
 		}
 	}
 

diff --git a/src/components/my-widgets-page.scss b/src/components/my-widgets-page.scss
@@ -776,7 +776,7 @@
 			.link {
 				cursor: pointer;
 				// color: #1778af;
-				color: #91c8fc;
+				color: #0093e7;
 				// text-decoration: underline;
 				font-weight: 400;
 
@@ -786,11 +786,11 @@
 			}
 
 			.play_link {
-				width: 100%;
+				width: calc(100% - 1em);
 				margin: 0;
 				height: 1.5em;
 				font-size: 1.1em;
-				padding-left: 3px;
+				padding: 0.25em;
 				cursor: text;
 
 				&::-ms-clear {
@@ -858,8 +858,8 @@
 		margin: 0 10px;
 		padding: 0 0 2px 0;
 
-		border-bottom: 1px #61a4e2 solid;
-		color: #61a4e2;
+		border-bottom: 1px #0093e7 solid;
+		color: #0093e7;
 
 		font-size: 14px;
 		font-weight: 700;
@@ -1175,16 +1175,16 @@
 			}
 
 			.link {
-				color: #61a4e2;
+				color: $color-link-dark;
 			}
 
 			.play_link {
 				background-color: $color-input-box-bg-dark;
 				border: solid 1px $color-input-box-border-dark;
-				color: #d8d8d8;
+				color: #fff;
 
 				&:disabled {
-					color: #ababab;
+					color: $gray;
 				}
 			}
 
@@ -1205,8 +1205,8 @@
 	}
 
 	div.link {
-		border-bottom: 1px #61a4e2 solid;
-		color: #61a4e2;
+		border-bottom: 1px $color-link-dark solid;
+		color: $color-link-dark;
 	}
 
 	// Shown when there are no widgets

diff --git a/src/components/my-widgets-scores.scss b/src/components/my-widgets-scores.scss
@@ -499,17 +499,20 @@
 	}
 
 	.show-older-scores-button {
-		border-radius: 2px;
-		background: #f3f3f3;
-		border: 1px solid #dbdbdb;
 		display: inline-block;
-		padding: 4px 10px 4px 10px;
-		font-size: 10pt;
-		text-decoration: underline;
 		width: 654px;
-		text-align: center;
 		margin-top: 1em;
+		padding: 4px 10px 4px 10px;
+
+		border-bottom: 1px solid #dbdbdb;
+
+		background: none;
+
+		font-size: 10pt;
 		font-weight: bold;
+		text-decoration: underline;	
+		text-align: center;
+
 		cursor: pointer;
 
 		&.hide {
@@ -873,8 +876,7 @@
 	}
 
 	.show-older-scores-button {
-		background: #4c4e58;
-		border: 1px solid #181920;
+		border-bottom: 1px solid $extremely-dark-gray;
 	}
 
 	table.storage_table {