From e19dad0699e11204853893463a60a2f231881b5f Mon Sep 17 00:00:00 2001 From: Corey Peterson Date: Fri, 6 Dec 2024 12:54:54 -0500 Subject: [PATCH 1/2] Additional post-dark mode style fixes --- src/components/homepage.scss | 5 +++- src/components/my-widgets-export.jsx | 34 +++++++++++++++++---------- src/components/my-widgets-export.scss | 13 ++++++---- src/components/my-widgets-page.scss | 20 ++++++++-------- src/components/my-widgets-scores.scss | 20 +++++++++------- 5 files changed, 55 insertions(+), 37 deletions(-) diff --git a/src/components/homepage.scss b/src/components/homepage.scss index a485bfa16..c2044e45d 100644 --- 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 index de69bd6b7..74b7f36bf 100644 --- 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) => (
  • - {semesterCheck(index)}}> - + +
    • )) @@ -172,11 +176,15 @@ const MyWidgetsExport = ({onClose, inst, scores}) => {

    diff --git a/src/components/my-widgets-export.scss b/src/components/my-widgets-export.scss index 94720d5ed..28bb9595a 100644 --- 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 index faeb93063..484ccb6bf 100644 --- 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 index f901b539d..e8355a573 100644 --- 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 { From 8cc5f2fef11e20c4e5f91d9854e721ea8670db6d Mon Sep 17 00:00:00 2001 From: Corey Peterson Date: Fri, 6 Dec 2024 13:27:45 -0500 Subject: [PATCH 2/2] Adds baseline accessibility page --- src/components/help-accessibility.jsx | 79 +++++++++++++++++++++++++++ src/components/help-page.jsx | 10 +++- src/components/help-page.scss | 13 +++++ 3 files changed, 100 insertions(+), 2 deletions(-) create mode 100644 src/components/help-accessibility.jsx diff --git a/src/components/help-accessibility.jsx b/src/components/help-accessibility.jsx new file mode 100644 index 000000000..d96c5a782 --- /dev/null +++ b/src/components/help-accessibility.jsx @@ -0,0 +1,79 @@ +import React from 'react'; + +const HelpAccessibility = () => { + + return ( + <> +
    +

    Our Commitment to Accessibility

    +

    + 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 Digital Accessibility Policy. +

    + +

    Accessibility Standards and Compliance

    +

    + 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: +

    +
      +
    • Web Content Accessibility Guidelines (WCAG) 2.0 Level AA
      • +
    • Section 508 of the Rehabilitation Act
      • +
    • Americans with Disabilities Act (ADA) digital accessibility requirements
      • +
    +
    +
    +

    Web Application Accessibility Features

    +
      +
    • Keyboard navigation support
      • +
    • Screen reader compatibility
      • +
    • Alternative text for images and graphics
      • +
    • Consistent and predictable navigation
      • +
    • Form input error identification and correction guidance
      • +
    +

    Supported Assistive Technologies

    +
      +
    • Screen readers (NVDA, JAWS, VoiceOver)
      • +
    • Screen magnification tools
      • +
    • Alternative input devices
      • +
    • Speech-to-text and text-to-speech technologies
      • +
    +
    +
    +

    Widget Accessibility Specifications

    +
      +
    • Fully navigable using keyboard controls*
      • +
    • Compatible with major assistive technologies*
      • +
    • Clear and consistent interactive elements
      • +
    • Semantic HTML structure
      • +
    • Reasonable cognitive load for educational interactions
      • +
    + *Support may vary by widget. Refer to the accessibility description of each widget in the Widget Catalog. +

    Ongoing Accessibility Efforts

    +
      +
    • Regular accessibility testing
      • +
    • Accessible design validation of new widgets as they are developed
      • +
    • User feedback collection for continuous improvement
      • +
    • Commitment to rapid remediation of identified accessibility barriers
      • +
    +
    +
    +

    Reporting Accessibility Issues

    +

    If you encounter any accessibility barriers or have suggestions for improvement, please contact us:

    +
    +
    Email:
    +
    ACCESSIBILITY EMAIL HERE
    +
    Online:
    +
    ACCESSIBILITY BARRIER REPORTING LINK
    +
    +

    Legal Compliance and Disclaimer

    +

    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.

    +
    + + ) +} + +export default HelpAccessibility diff --git a/src/components/help-page.jsx b/src/components/help-page.jsx index 412325eb7..0fd7d29a4 100644 --- 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 = break + case 'accessibility': + console.log('accessibility yes') + helpContentRender = + break default: helpContentRender = } @@ -49,6 +54,7 @@ const HelpPage = () => {
  • Help Home
  • For Students
  • For Instructors
    • +
  • Accessibility
    • diff --git a/src/components/help-page.scss b/src/components/help-page.scss index 78e1aed5f..91ca72f90 100644 --- 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;