Fix: improve accessibility of animation add-on (#26)

* fix: add button to confirm starting and allow stopping animation

fix: unremove license

* fix: add media queries for certain OS settings

* fix: button starts/stops instead of hide/show, aria labels

addons-web-sdk/samples/animation-next-js/README.md

@@ -2,4 +2,4 @@
 
 This is a [Meet Add-on](https://developers.google.com/meet/add-ons/guides/overview) built in [Next.js](https://nextjs.org/). This add-on displays an animation that is intended to create a simple "shimmer" effect based on the color that each call participant selects. This add-on only exists to show more features of Google Meet Add-ons than can be found at [googleworkspace/meet/addons-web-sdk/samples/hello-world-next-js](https://github.com/googleworkspace/meet/tree/main/addons-web-sdk/samples/hello-world-next-js). If you find anything about the configuration confusing, please see that more basic example.
 
-This add-on is deployed with GitHub pages, so that you can view the live versions of its [Side Panel](https://googleworkspace.github.io/meet/animation-next-js/sidepanel), [Main Stage](https://googleworkspace.github.io/meet/animation-next-js/mainstage), and all other routes. The screensharing promotion at the [index.html](https://googleworkspace.github.io/meet/animation-next-js/) will not fully work
+This add-on is deployed with GitHub pages, so that you can view the live versions of its [Side Panel](https://googleworkspace.github.io/meet/animation-next-js/sidepanel), [Main Stage](https://googleworkspace.github.io/meet/animation-next-js/mainstage), and all other routes. The screensharing promotion at the [index.html](https://googleworkspace.github.io/meet/animation-next-js/) will not fully work until this add-on is published.

addons-web-sdk/samples/animation-next-js/src/app/activitysidepanel/page.tsx

@@ -48,6 +48,7 @@ export default function Page() {
         Change the color. Only you will see this:
       </label>
       <input
+        aria-label="Color picker for animation in main stage"
         type="color"
         id="pretty-color"
         name="pretty-color"

addons-web-sdk/samples/animation-next-js/src/app/sidepanel/page.tsx

@@ -63,13 +63,19 @@ export default function Page() {
         Pick a color you like. Everyone will see this:
       </label>
       <input
+        aria-label="Color picker for animation in main stage"
         type="color"
         id="starting-color"
         name="starting-color"
         defaultValue="#00ff00"
       />
       <br />
-      <button onClick={startCollaboration}>Start the animation!</button>
+      <button
+        aria-label="Launch activity for all participants"
+        onClick={startCollaboration}
+      >
+        Start activity
+      </button>
     </>
   );
 }

addons-web-sdk/samples/animation-next-js/src/components/prettyColors.css

@@ -12,15 +12,30 @@ body {
   width: 100%;
 }
 
-.prettyLine {
+.animatedLine {
   animation-name: spin;
   animation-direction: normal;
   animation-duration: 10000ms;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
+}
+
+.prettyLine {
   height: 10px;
   position: absolute;
-  width: 40%;
+  width: 5%;
+}
+
+@media (prefers-reduced-motion) {
+  .prettyLine {
+    animation-iteration-count: 0 !important;
+  }
+}
+
+@media (prefers-contrast) {
+  .prettyLine {
+    border: 2px solid black;
+  }
 }
 
 .prettyLine:hover {

addons-web-sdk/samples/animation-next-js/src/components/prettyColors.tsx

@@ -3,7 +3,7 @@
  * It just gives us something fun to look at while testing the add-on code :)
  */
 
-import { ReactElement } from 'react';
+import { ReactElement, useState } from 'react';
 import './prettyColors.css';
 
 type Props = {
@@ -69,7 +69,7 @@ function reverseAnimation(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
  * Draw steps^3 divs that all are shades of the given hslColor and
  * all will spin.
  */
-function createLines(hslColor: number[], steps: number) {
+function createLines(hslColor: number[], steps: number, isAnimated) {
   const coloredLines = [];
   const minSaturation = hslColor[1] / 2;
   const maxSaturation = Math.max(1, hslColor[1] * 1.5);
@@ -89,7 +89,7 @@ function createLines(hslColor: number[], steps: number) {
         luminosity += (maxLuminosity - minLuminosity) / steps
       ) {
         coloredLines.push(
-          createLine(hslColor[0], saturation, luminosity, key++)
+          createLine(hslColor[0], saturation, luminosity, isAnimated, key++)
         );
       }
     }
@@ -105,21 +105,23 @@ function createLine(
   hue: number,
   saturation: number,
   luminosity: number,
+  isAnimated: boolean,
   lineNumber: number
 ): ReactElement {
   const randomColor = `hsl(${hue}, ${saturation * 100}%, ${luminosity * 100}%)`;
   const top = lineNumber % 100;
-  const left = (lineNumber % 110) - 20;
+  const left = (lineNumber % 110) - 2;
   const randomStyle = {
     backgroundColor: randomColor,
     color: randomColor,
     top: `${top}%`,
     left: `${left}%`,
   };
+  const animatedClass = isAnimated ? ' animatedLine' : '';
   return (
     <div
       key={lineNumber}
-      className="prettyLine"
+      className={`prettyLine${animatedClass}`}
       style={randomStyle}
       onMouseOver={(e) => reverseAnimation(e)}
     ></div>
@@ -131,12 +133,20 @@ function createLine(
  * effect.
  */
 export default function PrettyColors({ baseColor }: Props) {
+  const [isAnimated, setIsAnimated] = useState(false);
+
   const hslColor = hexToHsl(baseColor);
   // Draw 1000 lines (10^3).
-  const coloredLines = createLines(hslColor, 10);
+  const coloredLines = createLines(hslColor, 10, isAnimated);
 
   return (
     <>
+      <button
+        aria-label="Toggle animation"
+        onClick={(e) => setIsAnimated(!isAnimated)}
+      >
+        {isAnimated ? 'Stop' : 'Start'} animation
+      </button>
       <div className="prettyColorsContainer">{coloredLines}</div>
     </>
   );