Merge pull request #222 from PublicisSapient/enable-redesign

WIP: Enable Resdesign changes
PublicisSapient · Oct 29, 2024 · fefcfe3 · fefcfe3
2 parents d170968 + 4c9baa5
commit fefcfe3
Show file tree

Hide file tree

Showing 262 changed files with 4,900 additions and 1,949 deletions.
diff --git a/.github/workflows/push-actions.yml b/.github/workflows/push-actions.yml
@@ -47,10 +47,12 @@ jobs:
               run: sudo apt install lynx
             - name: Install PHP8.1
               run: sudo apt install php8.1
-            - name: Install latest Chrome er.124 to match chromedriver package version
+            - name: Install latest Chrome to match chromedriver package version
+              # Note: you should see if the version of Chrome matches the latest listed on
+              # https://mirror.cs.uchicago.edu/google-chrome/pool/main/g/google-chrome-stable/
               run: |
                   apt search '^google-chrome.*' \
-                      && wget -q -O /tmp/chrome.deb http://dl.google.com/linux/chrome/deb/pool/main/g/google-chrome-stable/google-chrome-stable_128.0.6613.119-1_amd64.deb \
+                      && wget -q -O /tmp/chrome.deb http://dl.google.com/linux/chrome/deb/pool/main/g/google-chrome-stable/google-chrome-stable_130.0.6723.58-1_amd64.deb \
                   && sudo apt install -y /tmp/chrome.deb --allow-downgrades \
                   && rm /tmp/chrome.deb
             - name: Log system details

diff --git a/.gitignore b/.gitignore
@@ -6,5 +6,9 @@ tmp
 report/*
 .idea
 
+# generated css map files
+*.css.map
+
 # auto-gen PHP files/logs
 php_errors.log
+
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -22,9 +22,6 @@
         "declaration-block-no-redundant-longhand-properties": null,
         "declaration-block-no-shorthand-property-overrides": null,
         "declaration-block-single-line-max-declarations": null,
-        "declaration-property-unit-allowed-list": {
-            "font-size": ["em", "rem", "vmin", "vmax", "vw", "vh"]
-        },
         "font-family-name-quotes": null,
         "font-family-no-missing-generic-family-keyword": null,
         "function-calc-no-unspaced-operator": null,

diff --git a/bin/enforceRemFontSize.sh b/bin/enforceRemFontSize.sh
@@ -1,9 +1,10 @@
 #!/bin/bash
 
-i=`find css -name '*.css' -print`
+i=`find less -name '*.less' -print`
 
 # echo $i
-OUTPUT=`grep -n 'font-size:[^\s\S]*[^@]px;' $i`
+OUTPUT=`grep -v "PX OK"  $i | grep -n 'font-size:[^\s\S]*[^@]px;'`
+# OUTPUT=`grep -n 'font-size:[^\s\S]*[^@]px;' $i`
 # grep -b 'line-height:[^\s\S]*[^0-9];' $i
 RET="$?"
 

diff --git a/content/body/acknowledgements.php b/content/body/acknowledgements.php
@@ -19,6 +19,7 @@
 <ul>
   <li><a href="https://github.com/saumyajitc">Saumyajit Chowdhury</a> for implementing husky pre-commit hooks to run lint-staged before pushing code to the repository</li>
   <li><a href="https://github.com/majid-paktinat">Majid Paktinat</a> and <a href="https://github.com/akshaypanchal">Akshaykumar Panchal</a> for implementing dynamic Structured Data Markup for improving the SEO of the Enable Project.</li>
+  <li><a href="https://github.com/basiabaldwin">Basia Baldwin</a> for working on redesigning the Enable project and developing the site in dark mode.</li>
   <li><a href="https://github.com/alisonhall">Alison Hall</a> for cleaning up and streamlining the unit testing and automated testing NPM tasks (and also doing the difficult task of updating the NPM packages within the project in 2024).
   </li>
   <li>Sahil Singh for unit tests for the <a href="input-mask.php">input mask component</a>.</li>

diff --git a/content/body/button.php b/content/body/button.php
@@ -1,5 +1,5 @@
 
-    <!-- <aside class="notes">
+    <aside class="notes">
             <h2>Notes:</h2>
 
             <ul>
@@ -22,7 +22,7 @@
 
             </ul>
 
-        </aside> -->
+        </aside> 
 
         <p>
             <strong>A button is an interactive element that triggers an action on a webpage or submits a form.</strong>

diff --git a/content/body/code-patterns-section.php b/content/body/code-patterns-section.php
@@ -0,0 +1,4 @@
+<?php include "includes/section-page-templates.php"; ?>
+
+<div id="section-content"></div>
+
diff --git a/content/body/content-section.php b/content/body/content-section.php
@@ -0,0 +1,3 @@
+<?php include "includes/section-page-templates.php"; ?>
+
+<div id="section-content"></div>
diff --git a/content/body/controls-section.php b/content/body/controls-section.php
@@ -0,0 +1,4 @@
+<?php include "includes/section-page-templates.php"; ?>
+
+<div id="section-content"></div>
+
diff --git a/content/body/dark-mode.php b/content/body/dark-mode.php
@@ -0,0 +1,137 @@
+
+<p>
+    Many mobile and desktop users experience eye strain when using interfaces that may have very bright, white screens.  
+    An accessibility feature like dark mode helps to solve this problem for many and has now become a preference for millions of people who use computers and mobile devices every day.
+</p>
+
+<p>
+  This page will discuss how to access either light or dark mode on different operating systems and devices.
+  It will also serve as a tool for the proper development of dark mode on new and existing websites and platforms. 
+</p>
+
+<h2>The "Rules" for Developing</h2>
+
+<p>
+  While there may not be any explicitly set rules for what is considered dark mode, when developing not just a visually pleasing but also accessible dark mode display, 
+  it is important to ensure that what is being displayed is accessible to all.
+</p>
+
+<p>
+    Make sure to remember:
+</p>
+
+<ol>
+  <li>Contrast is key!! Pay attention to the ratio (see below).</li>
+  <li>Don't forget the little details — take the time to <em>make sure</em> each component of the page (even ones not visible) is dark mode accessible. 
+  </li>
+  <li>Many users with photosensitivity use dark mode, so try to avoid using very bright colors, even if the contrast ratio appears correct.</li>
+  <li>Make sure assistive technologies (such as screen readers) still work with dark mode.</li> 
+</ol>
+
+<p>
+    One, if not the most important, thing to consider and be aware of when developing any user interface, light or dark, is the contrast ratio of items on the webpage.  
+    According to the <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">WCAG guidelines for contrast accessibility</a>, the “visual presentation of text” must have a contrast ratio of at least 4.5:1 (with exceptions).  
+    In short, this means that the contrast between background color and text color needs to be above this ratio.
+</p>
+
+<p>
+    To see an example of a proper vs. improper contrast ratio, please refer below:
+</p>
+
+<div class="enable-example">
+    <img src="images/dark-mode-example/goodContrast_credits.png" width=800 height=155
+    alt="Good Contrast Example">
+    <img src="images/dark-mode-example/badContrast_credits.png" width=800 height=155
+    alt="Bad Contrast Example">
+</div>
+
+<p>
+    As seen above, the contrast between the first image is much better than the second.  The first images text has a contrast ratio of 
+    <strong>9.9</strong>, much better than the contrast ratio of <strong>1.25</strong> 
+    for the second images text.
+
+</p>
+
+<p>
+    However, sometimes an inaccessible contrast ratio is not so obvious.  This is why it is important to use tools that check the ratio, as there are things that might be overseen.  
+    Tools like <a href="https://wave.webaim.org/">WAVE</a> web accessibility evaluation tools, 
+    <a href="https://webaim.org/resources/contrastchecker/">WebAIM Contrast Checker</a>,
+    and <a href="https://accessible-colors.com/">accessible-colors</a>
+    allow for developers to test their page contrasts to ensure that they are creating the most accessible user interface possible.
+</p>
+
+
+<h2>Using Dark Mode in Different Operating Systems</h2>
+
+<?php includeStats([
+    "isStyle" => true,
+    "comment" =>
+        "These changes can also be done at the browser level rather than the whole system if that is your preference.",
+]); ?>
+
+<p>
+    Every OS, whether mobile or desktop, accesses dark mode uniquely.  Use this as a reference to figure out how to enable dark mode 
+    on your device!
+</p>
+
+<h3>Apple:</h3>
+<ul>
+  <li><strong>Mac (OSX):</strong>
+    <ol>
+        <li>Open <strong>System Settings</strong>.</li>
+        <li>Select <strong>Appearance</strong>.</li>
+        <li>In <strong><em>Appearance</em></strong>, you will have the option to choose Light, Dark, or Auto.</li>
+    </ol>
+    <img src="images/dark-mode-example/DarkMode_MacOS.png" width=400 height=349
+    alt="MacOS System Settings Dark Mode">
+  </li>
+
+  <li><strong>Mobile (iOS):</strong>
+    <ol>
+        <li>Open <strong>Settings</strong>.</li>
+        <li>Select <strong>Display & Brightness</strong>.</li>
+        <li>Under <strong><em>Appearance</em></strong>, you will again see the option for Light, Dark, or Automatic.</li>
+    </ol>
+    <img src="images/dark-mode-example/DarkMode_iOS.png" width=192 height=400
+    alt="iPhone/iPad Settings Dark Mode">
+  </li>
+</ul>
+
+<h3>Windows:</h3>
+<ul>
+  <li><strong>Desktop:</strong>
+    <ol>
+        <li>Select <strong>Start</strong> and open <strong>Settings</strong>.</li>
+        <li>Select <strong>Personalization</strong> and navigate to <strong>Colors</strong>.</li>
+        <li>In <strong><em>Colors</em></strong> under <strong><em>Choose your mode</em></strong>, you will have the option to choose Light, Dark, or Custom, as well as change your accent color to your preference.</li>
+    </ol>
+    <img src="images/dark-mode-example/DarkMode_Windows.png" width=400 height=315
+    alt="Windows Color Settings Dark Mode">
+  </li>
+</ul>
+
+<h3>Android:</h3>
+<ul>
+  <li><strong>Mobile:</strong>
+    <ol>
+        <li>Open <strong>Settings</strong>.</li>
+        <li>Select <strong>Display & brightness</strong>.</li>
+        <li>In <strong><em>Display</em></strong>, toggle Dark mode based on your preference.</li>
+    </ol>
+    <img src="images/dark-mode-example/DarkMode_Android.png" width=193 height=400
+    alt="Android Dark Theme Settings">
+  </li>
+</ul>
+
+<h3>Ubuntu:</h3>
+<ul>
+  <li><strong>Desktop:</strong>
+    <ol>
+        <li>Open <strong>Settings</strong>.</li>
+        <li>Select <strong>Appearance</strong>.</li>
+        <li>In <strong><em>Appearance</em></strong>, under <strong><em>Style</em></strong>, you will see the option to choose Light or Dark mode.</li>
+    </ol>
+    <img src="images/dark-mode-example/DarkMode_Ubuntu.png" width=400 height=333
+    alt="Ubuntu Dark Mode Settings">
+  </li>
+</ul>
diff --git a/content/body/focus-styling.php b/content/body/focus-styling.php
@@ -136,6 +136,7 @@
   and compensating visually with an equivalent negative margin, so why just conform to 
   <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html">WCAG 2.5.8: Target Size (Minimum).</a> (which only asks 24 pixels x 24 pixels)?</p>
 
+  <figure class="wide centered-image">
 <?php includeShowcode("css-focus-hitarea", "", "", "", false); ?>
 <script type="application/json" id="css-focus-hitarea-props">
 {
@@ -147,12 +148,16 @@
   }]
 }
 </script>
+<figcaption>Figure 3a. Code pattern that increases the hit area around navigation buttons.</figcaption>
+
+</figure>
 
 <template id="css-focus-hitarea" data-type="css">
   .enable-flyout__open-level-button { padding: 27px 0; margin: -27px 0; }
 
 </template>
 
+
 <p>I encourage everyone reading this to implement this on all the websites they code. From a UX perspective, it just
   makes it easier for everyone to use the websites you code.</p>
 

diff --git a/content/body/forms-section.php b/content/body/forms-section.php
@@ -0,0 +1,3 @@
+<?php include "includes/section-page-templates.php"; ?>
+
+<div id="section-content"></div>
diff --git a/content/body/img.php b/content/body/img.php
@@ -149,7 +149,7 @@
   <svg width="200" height="163" role="img" aria-labelledby="circle-alt svg-text" focusable="false">
     <title id="circle-alt">A dark blue circle with text inside</title>
 
-    <rect x="0" y="0" width="200" height="163" fill="#ffffff" fill-opacity="1"></rect>
+    <rect x="0" y="0" width="200" height="163" fill="none" fill-opacity="1"></rect>
     <circle cx="81" cy="85" r="75" fill="#00a" stroke="#000" stroke-width="1"></circle>
     <text id="svg-text" x="81" y="85" font-size="14px" text-anchor="middle" fill="#fff">
       I am text in a circle

diff --git a/content/body/index.php b/content/body/index.php
@@ -1,21 +1,9 @@
 <div class="homepage__hero">
   <div class="homepage__hero--text">
     <div class="homepage__hero--copy">
-      <h1 class="homepage__hero--heading"><?= $title ?></h1>
-
-      <p>A place to learn and share with developers what makes web work accessible.</p>
-    </div>
-
-    <!--
-    <div class="homepage__hero--ctas">
-      <a href="#getting-started.php" class="homepage__hero-link homepage__hero-link--main">
-        Getting Started
-      </a>
-      <a href="#how-to-contribute.php" class="homepage__hero-link homepage__hero-link--secondary">
-        How to Contribute
-      </a>
+       <h1 class="homepage__hero--heading">Enable </h1>
+      <p>A space for developers to learn and collaborate on making the web accessible.</p>
     </div>
--->
   </div>
 </div>
 
@@ -26,26 +14,17 @@
 
       <h2 class="homepage__intro--header homepage__intro--header--code">Learn How To Create Accessible Code</h2>
       <p>
-        Whether you are new to accessibility or are a seasoned veteran, Enable's aim is to <strong>teach developers how to
-          make
-          something accessible</strong> and to <strong>show why it is.</strong> Developers can walk through the code
-        step
-        by step to understand what HTML, CSS, and JavaScript are needed to ensure their work "just works" for all users,
-        no
-        matter how they navigate the web.
+        Whether you are new to accessibility or are a seasoned veteran, Enable's aim is to <strong>teach developers how to make something accessible</strong> and to <strong>show why it is.</strong> Developers can walk through the code step by step to understand what HTML, CSS, and JavaScript are needed to ensure their work "just works" for all users, no matter how they navigate the web.
       </p>
     </div>
     <div class="homepage__intro--section">
       <h2 class="homepage__intro--header homepage__intro--header--existing">Add Accessible Code Quickly To Existing
         Projects</h2>
-
       <p>
-        The Enable Accessibility Project follows the <a href="https://www.w3.org/TR/using-aria/#rule1">First Rule of
-          ARIA</a> when recommending code and encourages the use of native HTML5 functionality whenever possible (as
-        long
-        as browser accessibility support is there). However, since we know there are a lot of developers looking to make
+        The Enable Accessibility Project follows the <a href="https://www.w3.org/TR/using-aria/#rule1">First Rule of ARIA</a> when recommending code and encourages the use of native HTML5 functionality whenever possible (as
+        long as browser accessibility support is there). <!-- However, since we know there are a lot of developers looking to make
         their existing custom widgets accessible quickly due to time constraints, we also show custom code examples and
-        what code features make them work with assistive technology.
+        what code features make them work with assistive technology. -->
       </p>
 
 
@@ -54,20 +33,14 @@
       <h2 class="homepage__intro--header homepage__intro--header--npm">Use Pre-built Accessible Components</h2>
 
       <p>
-        Enable also includes components that can be included in your own projects via NPM, with instructions on how to
-        integrate them as Webpack modules, native ES6 Modules, or as old school ES4 JavaScript libraries. Accessible
-        hamburger menus, carousels, and mobile-friendly skip links, are only a few examples of prebuilt code you can use
-        in
-        your projects today. We also encourage developers to consider contributing their own code for the benefit
-        of
-        the developer community at large.
+        Enable also includes components that can be included into your own projects via NPM, with instructions on how to
+        integrate them as Webpack modules, native ES6 Modules or as old school ES4 JavaScript libraries.
     </div>
   </div>
 </div>
 
 <div class="homepage__bottom-copy">
   <h2 class="homepage__bottom-copy--heading homepage__intro--header homepage__intro--header--question">What Makes Enable Different?</h2>
-
   <ul>
     <li>
       We strive to keep our <strong>codebase up-to-date</strong>, with a <strong>focus on innovation</strong> (some of
@@ -86,35 +59,26 @@
       usable by everyone.
     </li>
     <li>
-      Not only do we want to help developers, but <strong>we want the help from
-        developers to contribute their
-        accessible code.</strong>
-      If you have an accessible component that you don't see here, please consider
-      donating by raising a pull
-      request.
+      Not only do we want to help developers, but <strong>we want the help from developers to contribute their accessible code.</strong>
+      If you have a component that you'd like to submit - please put in a <!-- #TODO --> <a href="#">PR</a>.
     </li>
   </ul>
 </div>
-<div class="homepage__bottom-copy">
-
+<div class="homepage__bottom-copy background-secondary">
   <h2 class="homepage__bottom-copy--heading homepage__intro--header homepage__intro--header--donate">Want to donate code to Enable?</h2>
-
-  <p>We would love to know about any code you would like to donate to enable!</p>
-
+  <p>We would love to know about any code you would like to donate to Enable!</p>
   <ul>
     <li> If you would like to discuss this with us first,
       please go to the <a href="https://github.com/PublicisSapient/enable-a11y/issues">Enable Github issue page</a> and
-      opening up a new issue describing the code you would like to donate and a sample page on how it works.</li>
+      open up a new issue describing the code you would like to donate and a sample page on how it works.</li>
     <li>
       If you would like to submit a PR, feel free to do so! Please read <a
         href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request-from-a-fork">the
         Github article about creating a pull request from a fork</a> for more information on how to do this.</li>
   </ul>
 </div>
-<div class="homepage__bottom-copy">
-
+<div class="homepage__bottom-copy background-tertiary">
   <h2 class="homepage__bottom-copy--heading homepage__intro--header homepage__intro--header--bug">Found a bug?</h2>
-
   <p>
     Feel free to log a bug on our Github project page! If are a developer and know how to fix it, please create a PR (if
     you have never done this before, read the <a
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,4 @@
		<?php include "includes/section-page-templates.php"; ?>

		<div id="section-content"></div>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		<?php include "includes/section-page-templates.php"; ?>

		<div id="section-content"></div>