@lrnwebcomponents/a11y-gif-player - npm Package Compare versions

Comparing version 2.6.17 to 2.6.21

a11y-gif-player.js

@@ -7,2 +7,4 @@ /**
 import { SchemaBehaviors } from "@lrnwebcomponents/schema-behaviors/schema-behaviors.js";
+import { A11yDetails } from "@lrnwebcomponents/a11y-details/a11y-details.js";
+
 /**
@@ -46,3 +48,2 @@ * `a11y-gif-player`
     this.__playing = false;
-    this.noImage = true;
     import("@lrnwebcomponents/simple-tooltip/simple-tooltip.js");
@@ -60,14 +61,30 @@ import("@polymer/iron-image/iron-image.js");
         }
-        *[hidden] {
+        :host([hidden]) {
           display: none;
         }
-        button {
+        .sr-only {
+          position: absolute;
+          left: -9999999px;
+          top: 0;
+          width: 0;
+          overflow: hidden;
+        }
+        #container {
           padding: 0;
-          display: flex;
-          align-items: stretch;
+          margin: 0;
           position: relative;
-          width: auto;
+          width: min-content;
           border: var(--a11y-gif-player-border, none);
           border-radius: var(--a11y-gif-player-border-radius, 0);
         }
+        button {
+          position: absolute;
+          width: 100%;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          right: 0;
+          background-size: contain;
+          background-color: var(--a11y-gif-player-button-bg, #cccccc);
+        }
         button:active,
@@ -77,3 +94,2 @@ button:focus,
           border: var(--a11y-gif-player-focus-border, none);
-          cursor: var(--a11y-gif-player-cursor, pointer);
           outline: var(--a11y-gif-player-outline, 3px solid);
@@ -84,16 +100,9 @@ }
         }
-        button > * {
-          width: 100%;
-          min-width: 100%;
-          min-height: 100%;
-          flex: 1 1 100%;
+        button[aria-pressed="true"] {
+          opacity: 0;
         }
-        div {
-          display: flex;
-          align-items: center;
-          flex-direction: column;
+        svg {
           position: absolute;
-        }
-        svg {
-          flex: 1 1 100%;
+          top: 35%;
+          left: 35%;
           width: var(--a11y-gif-player-arrow-size, 30%);
@@ -118,15 +127,9 @@ height: var(--a11y-gif-player-arrow-size, 30%);
         }
-        img {
+        #longdesc {
           position: absolute;
+          left: 2px;
+          bottom: 2px;
+          width: calc(100% - 2px);
+          font-size: 80%;
         }
-        button[aria-pressed="true"] svg,
-        button[aria-pressed="true"] img {
-          opacity: 0;
-        }
-        button[data-no-image] .button-bg {
-          background-color: var(--a11y-gif-player-button-bg, #cccccc);
-        }
-        button[aria-pressed="true"][data-no-image] .button-bg {
-          background-color: transparent;
-        }
         simple-tooltip {
@@ -143,25 +146,25 @@ --simple-tooltip-background: #000000;
     return html`
-      <button
-        id="button"
-        aria-controls="gif"
-        aria-pressed="${this.__playing ? "true" : "false"}"
-        @click="${this.toggle}"
-        ?data-no-image="${this.noImage}"
-        ?disabled="${this.disabled || !this.src}"
-      >
-        <iron-image id="gif" src="${this.src}" ?hidden="${!this.src}">
+      <div id="container">
+        <iron-image
+          id="gif"
+          src="${this.src}"
+          alt="${this.alt}"
+          aria-describedby="${this.longdesc ? "longdesc" : ""} ${(
+            this.describedBy || ""
+          ).trim()}"
+          ?hidden="${!this.src}"
+          slot="summary"
+        >
         </iron-image>
-        ${!this.noImage
-          ? html`
-              <img
-                id="static"
-                loading="lazy"
-                alt="${this.alt}"
-                src="${this.srcWithoutAnimation}"
-              />
-            `
-          : html``}
-        <div class="button-bg">
+        <button
+          id="button"
+          aria-controls="gif"
+          aria-pressed="${this.__playing ? "true" : "false"}"
+          @click="${this.toggle}"
+          ?disabled="${this.disabled || !this.src}"
+          style="background-image: url('${this.srcWithoutAnimation}')"
+        >
           <svg
             id="svg"
+            aria-hidden="true"
             xmlns="http://www.w3.org/2000/svg"
@@ -175,5 +178,17 @@ viewBox="0 0 200 200"
           </svg>
-        </div>
-      </button>
-
+          <span class="sr-only">
+            ${this.__playing && this.tooltipPlaying
+              ? this.tooltipPlaying
+              : this.tooltip}
+          </span>
+        </button>
+        <a11y-details
+          id="longdesc"
+          ?hidden="${!this.src || !this.longdesc}"
+          style="opacity:${this.__playing ? 0 : 1}"
+        >
+          <div slot="summary">info</div>
+          <div slot="details">${this.longdesc}</div>
+        </a11y-details>
+      </div>
       <simple-tooltip for="button" offset="30" animation-delay="0">
@@ -210,3 +225,17 @@ ${this.__playing && this.tooltipPlaying
       },
+      /*
+       * other id's to add to aria-describedby
+       */
+      describedBy: {
+        attribute: "described-by",
+        type: String
+      },
       /**
+       * longer image description for accesibility
+       */
+      longdesc: {
+        type: String,
+        attribute: "longdesc"
+      },
+      /**
        * Source of animated gif
@@ -242,8 +271,2 @@ */
         type: Boolean
-      },
-      /**
-       * Boolean for if theres a source image or not
-       */
-      noImage: {
-        type: Boolean
       }
@@ -253,16 +276,2 @@ };
   /**
-   * LitElement properties updated
-   */
-  updated(changedProperties) {
-    changedProperties.forEach((oldValue, propName) => {
-      if (propName == "srcWithoutAnimation") {
-        if (this[propName] != null && this[propName] != "") {
-          this.noImage = false;
-        } else {
-          this.noImage = true;
-        }
-      }
-    });
-  }
-  /**
    * plays the animation regarless of previous state
@@ -318,3 +327,4 @@ */
             source2: "srcWithoutAnimation",
-            alt: "alt"
+            alt: "alt",
+            ariaDescribedby: "describedBy"
           }
@@ -381,6 +391,34 @@ ],
             required: true
+          },
+          {
+            property: "longdesc",
+            title: "Long Description",
+            description: "Long descriptions of the GOF for accessibiility",
+            inputMethod: "textarea"
           }
         ],
-        advanced: []
-      }
+        advanced: [
+          {
+            property: "describedBy",
+            title: "aria-decsribedby",
+            description:
+              "Space-separated id list for long descriptions that appear elsewhere",
+            inputMethod: "textfield"
+          }
+        ]
+      },
+      demoSchema: [
+        {
+          tag: "a11y-gif-player",
+          properties: {
+            alt: "It's Always Sunny in Philadelphia Pepe Silvia Meme with GIFs",
+            src: "https://media0.giphy.com/media/zHaPZZvl6cVHi/giphy.gif",
+            srcWithoutAnimation:
+              "https://media0.giphy.com/media/zHaPZZvl6cVHi/480w_s.jpg",
+            longdesc:
+              "Pepe Silvia scene from It's Always Sunny in Philadelphia. Jesus, dude, you're still making GIFs. The GIF's don't stop.",
+            style: "max-width:400px"
+          }
+        }
+      ]
     };
@@ -387,0 +425,0 @@ }

a11y-gif-player.stories.js

@@ -17,10 +17,3 @@ import { html } from "lit-element/lit-element.js";
   const utils = new StorybookUtilities();
-  let gif = utils.makeElementFromClass(A11yGifPlayer, {
-    alt: "It's Always Sunny in Philadelphia Pepe Silvia Meme with GIFs",
-    src: "https://media0.giphy.com/media/zHaPZZvl6cVHi/giphy.gif",
-    srcWithoutAnimation:
-      "https://media0.giphy.com/media/zHaPZZvl6cVHi/480w_s.jpg"
-  });
-  gif.style.maxWidth = "200px";
-  return gif;
+  return utils.makeElementFromHaxDemo(A11yGifPlayer);
 };

package.json

@@ -15,3 +15,3 @@ {
   },
-  "version": "2.6.17",
+  "version": "2.6.21",
   "description": "Play gifs in an accessible way by having the user click to play their animation",
@@ -40,3 +40,3 @@ "repository": {
   "dependencies": {
-    "@lrnwebcomponents/schema-behaviors": "^2.6.17",
+    "@lrnwebcomponents/schema-behaviors": "^2.6.21",
     "@lrnwebcomponents/simple-tooltip": "^2.6.17",
@@ -48,3 +48,3 @@ "@polymer/iron-image": "^3.0.0",
     "@lrnwebcomponents/deduping-fix": "^2.6.16",
-    "@lrnwebcomponents/storybook-utilities": "^2.6.17",
+    "@lrnwebcomponents/storybook-utilities": "^2.6.21",
     "@polymer/iron-component-page": "github:PolymerElements/iron-component-page",
@@ -69,3 +69,3 @@ "@polymer/iron-demo-helpers": "3.1.0",
   ],
-  "gitHead": "c63b24aa201a5bfcd3b2ff42f7252c6dba994b1a"
+  "gitHead": "feb7f30cf51d59343e3d94dcc8d4e761983cca2a"
 }

src/a11y-gif-player.js

@@ -7,2 +7,4 @@ /**
 import { SchemaBehaviors } from "@lrnwebcomponents/schema-behaviors/schema-behaviors.js";
+import { A11yDetails } from "@lrnwebcomponents/a11y-details/a11y-details.js";
+
 /**
@@ -46,3 +48,2 @@ * `a11y-gif-player`
     this.__playing = false;
-    this.noImage = true;
     import("@lrnwebcomponents/simple-tooltip/simple-tooltip.js");
@@ -60,14 +61,30 @@ import("@polymer/iron-image/iron-image.js");
         }
-        *[hidden] {
+        :host([hidden]) {
           display: none;
         }
-        button {
+        .sr-only {
+          position: absolute;
+          left: -9999999px;
+          top: 0;
+          width: 0;
+          overflow: hidden;
+        }
+        #container {
           padding: 0;
-          display: flex;
-          align-items: stretch;
+          margin: 0;
           position: relative;
-          width: auto;
+          width: min-content;
           border: var(--a11y-gif-player-border, none);
           border-radius: var(--a11y-gif-player-border-radius, 0);
         }
+        button {
+          position: absolute;
+          width: 100%;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          right: 0;
+          background-size: contain;
+          background-color: var(--a11y-gif-player-button-bg, #cccccc);
+        }
         button:active,
@@ -77,3 +94,2 @@ button:focus,
           border: var(--a11y-gif-player-focus-border, none);
-          cursor: var(--a11y-gif-player-cursor, pointer);
           outline: var(--a11y-gif-player-outline, 3px solid);
@@ -84,16 +100,9 @@ }
         }
-        button > * {
-          width: 100%;
-          min-width: 100%;
-          min-height: 100%;
-          flex: 1 1 100%;
+        button[aria-pressed="true"] {
+          opacity: 0;
         }
-        div {
-          display: flex;
-          align-items: center;
-          flex-direction: column;
+        svg {
           position: absolute;
-        }
-        svg {
-          flex: 1 1 100%;
+          top: 35%;
+          left: 35%;
           width: var(--a11y-gif-player-arrow-size, 30%);
@@ -118,15 +127,9 @@ height: var(--a11y-gif-player-arrow-size, 30%);
         }
-        img {
+        #longdesc {
           position: absolute;
+          left: 2px;
+          bottom: 2px;
+          width: calc(100% - 2px);
+          font-size: 80%;
         }
-        button[aria-pressed="true"] svg,
-        button[aria-pressed="true"] img {
-          opacity: 0;
-        }
-        button[data-no-image] .button-bg {
-          background-color: var(--a11y-gif-player-button-bg, #cccccc);
-        }
-        button[aria-pressed="true"][data-no-image] .button-bg {
-          background-color: transparent;
-        }
         simple-tooltip {
@@ -143,25 +146,25 @@ --simple-tooltip-background: #000000;
     return html`
-      <button
-        id="button"
-        aria-controls="gif"
-        aria-pressed="${this.__playing ? "true" : "false"}"
-        @click="${this.toggle}"
-        ?data-no-image="${this.noImage}"
-        ?disabled="${this.disabled || !this.src}"
-      >
-        <iron-image id="gif" src="${this.src}" ?hidden="${!this.src}">
+      <div id="container">
+        <iron-image
+          id="gif"
+          src="${this.src}"
+          alt="${this.alt}"
+          aria-describedby="${this.longdesc ? "longdesc" : ""} ${(
+            this.describedBy || ""
+          ).trim()}"
+          ?hidden="${!this.src}"
+          slot="summary"
+        >
         </iron-image>
-        ${!this.noImage
-          ? html`
-              <img
-                id="static"
-                loading="lazy"
-                alt="${this.alt}"
-                src="${this.srcWithoutAnimation}"
-              />
-            `
-          : html``}
-        <div class="button-bg">
+        <button
+          id="button"
+          aria-controls="gif"
+          aria-pressed="${this.__playing ? "true" : "false"}"
+          @click="${this.toggle}"
+          ?disabled="${this.disabled || !this.src}"
+          style="background-image: url('${this.srcWithoutAnimation}')"
+        >
           <svg
             id="svg"
+            aria-hidden="true"
             xmlns="http://www.w3.org/2000/svg"
@@ -175,5 +178,17 @@ viewBox="0 0 200 200"
           </svg>
-        </div>
-      </button>
-
+          <span class="sr-only">
+            ${this.__playing && this.tooltipPlaying
+              ? this.tooltipPlaying
+              : this.tooltip}
+          </span>
+        </button>
+        <a11y-details
+          id="longdesc"
+          ?hidden="${!this.src || !this.longdesc}"
+          style="opacity:${this.__playing ? 0 : 1}"
+        >
+          <div slot="summary">info</div>
+          <div slot="details">${this.longdesc}</div>
+        </a11y-details>
+      </div>
       <simple-tooltip for="button" offset="30" animation-delay="0">
@@ -210,3 +225,17 @@ ${this.__playing && this.tooltipPlaying
       },
+      /*
+       * other id's to add to aria-describedby
+       */
+      describedBy: {
+        attribute: "described-by",
+        type: String
+      },
       /**
+       * longer image description for accesibility
+       */
+      longdesc: {
+        type: String,
+        attribute: "longdesc"
+      },
+      /**
        * Source of animated gif
@@ -242,8 +271,2 @@ */
         type: Boolean
-      },
-      /**
-       * Boolean for if theres a source image or not
-       */
-      noImage: {
-        type: Boolean
       }
@@ -253,16 +276,2 @@ };
   /**
-   * LitElement properties updated
-   */
-  updated(changedProperties) {
-    changedProperties.forEach((oldValue, propName) => {
-      if (propName == "srcWithoutAnimation") {
-        if (this[propName] != null && this[propName] != "") {
-          this.noImage = false;
-        } else {
-          this.noImage = true;
-        }
-      }
-    });
-  }
-  /**
    * plays the animation regarless of previous state
@@ -318,3 +327,4 @@ */
             source2: "srcWithoutAnimation",
-            alt: "alt"
+            alt: "alt",
+            ariaDescribedby: "describedBy"
           }
@@ -381,6 +391,34 @@ ],
             required: true
+          },
+          {
+            property: "longdesc",
+            title: "Long Description",
+            description: "Long descriptions of the GOF for accessibiility",
+            inputMethod: "textarea"
           }
         ],
-        advanced: []
-      }
+        advanced: [
+          {
+            property: "describedBy",
+            title: "aria-decsribedby",
+            description:
+              "Space-separated id list for long descriptions that appear elsewhere",
+            inputMethod: "textfield"
+          }
+        ]
+      },
+      demoSchema: [
+        {
+          tag: "a11y-gif-player",
+          properties: {
+            alt: "It's Always Sunny in Philadelphia Pepe Silvia Meme with GIFs",
+            src: "https://media0.giphy.com/media/zHaPZZvl6cVHi/giphy.gif",
+            srcWithoutAnimation:
+              "https://media0.giphy.com/media/zHaPZZvl6cVHi/480w_s.jpg",
+            longdesc:
+              "Pepe Silvia scene from It's Always Sunny in Philadelphia. Jesus, dude, you're still making GIFs. The GIF's don't stop.",
+            style: "max-width:400px"
+          }
+        }
+      ]
     };
@@ -387,0 +425,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

107801

increased by2.47%

Lines of code

2062

increased by3.46%

Dependency changes

• Updated@lrnwebcomponents/schema-behaviors@^2.6.21