Merge pull request #857 from PR0M3TH3AN/codex/update-video-modal-for-accessible-comments

Add accessible comment scaffold to video modal

components/video-modal.html

@@ -71,7 +71,12 @@
             <div class="watch-container">
               <div class="modal-info-panel">
                 <div class="video-modal__details flex flex-col gap-6">
-                <div id="videoTags" class="video-modal__tags" hidden aria-hidden="true"></div>
+                  <div
+                    id="videoTags"
+                    class="video-modal__tags"
+                    hidden
+                    aria-hidden="true"
+                  ></div>
                 <div
                   class="video-modal__headline flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between"
                 >
@@ -407,6 +412,125 @@
                     No description available.
                   </p>
                 </div>
+
+                <section
+                  class="video-modal__comments comment-thread"
+                  aria-labelledby="videoModalCommentsHeading"
+                  role="region"
+                  data-comments-root
+                >
+                  <div class="comment-thread__header">
+                    <h2
+                      id="videoModalCommentsHeading"
+                      class="comment-thread__title"
+                    >
+                      Comments
+                    </h2>
+                    <p
+                      class="comment-thread__count"
+                      data-comments-count
+                      aria-live="polite"
+                    >
+                      0 comments
+                    </p>
+                  </div>
+
+                  <p
+                    class="comment-thread__empty"
+                    data-comments-empty
+                    role="status"
+                    aria-live="polite"
+                  >
+                    No comments yet. Be the first to share your thoughts.
+                  </p>
+
+                  <ol
+                    class="comment-thread__list"
+                    data-comments-list
+                    role="list"
+                    aria-live="polite"
+                  ></ol>
+
+                  <button
+                    type="button"
+                    class="comment-thread__load-more focus-ring"
+                    data-comments-load-more
+                    hidden
+                  >
+                    Load more comments
+                  </button>
+
+                  <div
+                    class="comment-thread__disabled"
+                    data-comments-disabled
+                    role="status"
+                    aria-live="polite"
+                    hidden
+                  >
+                    Comments are turned off for this video.
+                  </div>
+
+                  <form
+                    class="comment-composer"
+                    data-comments-composer
+                    aria-labelledby="videoModalCommentsHeading"
+                    novalidate
+                  >
+                    <div class="comment-composer__field">
+                      <label
+                        for="commentComposerInput"
+                        class="comment-composer__label"
+                      >
+                        Add a comment
+                      </label>
+                      <textarea
+                        id="commentComposerInput"
+                        name="comment"
+                        class="textarea comment-composer__textarea"
+                        rows="3"
+                        maxlength="500"
+                        placeholder="Share your thoughts"
+                        aria-describedby="commentComposerHelp commentComposerCount"
+                        data-comments-input
+                        required
+                      ></textarea>
+                    </div>
+
+                    <div class="comment-composer__footer">
+                      <p
+                        id="commentComposerHelp"
+                        class="comment-composer__hint"
+                      >
+                        Keep it respectful and follow the community guidelines.
+                      </p>
+                      <div class="comment-composer__actions">
+                        <p
+                          id="commentComposerCount"
+                          class="comment-composer__char-count"
+                          data-comments-char-count
+                          aria-live="polite"
+                        >
+                          0 / 500
+                        </p>
+                        <button
+                          type="submit"
+                          class="comment-composer__submit btn"
+                          data-comments-submit
+                          disabled
+                        >
+                          Post
+                        </button>
+                      </div>
+                    </div>
+
+                    <p
+                      class="comment-composer__status sr-only"
+                      data-comments-status
+                      role="status"
+                      aria-live="polite"
+                    ></p>
+                  </form>
+                </section>
               </div>
             </div>
           </div>

css/tailwind.generated.css

@@ -7,4 +7,4 @@
       --player-modal-inline-padding,clamp(var(--space-sm),3vw,var(--space-xl))
     )}#playerModal#playerModal .modal-nav__rail{display:block}#playerModal .modal-nav__rail{display:flex;width:100%;align-items:center;justify-content:space-between;gap:.75rem}#playerModal#playerModal .modal-nav__slot{display:block}#playerModal .modal-nav__slot{display:flex;align-items:center;gap:.5rem}#playerModal .modal-nav__slot--context{justify-content:flex-end;margin-inline-start:auto;min-inline-size:0}#playerModal .modal-nav__context{font-size:var(--font-size-xs);line-height:var(--line-height-tight);font-weight:600;text-transform:uppercase;letter-spacing:.025em;color:var(--text-muted)}#playerModal#playerModal .modal-nav .modal-actions{display:block}#playerModal .modal-nav .modal-actions{display:flex;align-items:center;gap:.5rem;margin-left:0}#playerModal .modal-nav .icon-button{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);color:var(--text-muted);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-timing-function:cubic-bezier(0,0,.2,1);width:var(--icon-size-md);height:var(--icon-size-md);background:var(--color-surface-tint-subtle);border:var(--border-width-hairline) solid var(--color-border-translucent-medium);color:var(--color-text-muted)}#playerModal .modal-nav .icon-button:focus-visible,#playerModal .modal-nav .icon-button:hover{background:var(--color-border-translucent-bright);border-color:var(--color-border-translucent-strong);color:var(--color-text)}.modal-nav--hidden{--tw-translate-y:-100%}.modal-nav--hidden,.modal-nav--visible{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.modal-nav--visible{--tw-translate-y:0px}.video-modal__layout{--video-modal-secondary-size:clamp(var(--video-modal-secondary-min),46vw,var(--video-modal-secondary-max));--video-modal-gap:clamp(var(--space-sm),1.5vw,var(--space-md-plus));display:grid;gap:var(--video-modal-gap);width:min(100%,var(--video-modal-layout-max));margin-inline:auto;grid-template-columns:minmax(0,1fr);grid-template-areas:"primary" "secondary";align-items:start}@media (min-width:1024px){.video-modal__layout{--video-modal-secondary-size:clamp(var(--video-modal-secondary-min),40vw,var(--video-modal-secondary-max));grid-template-columns:minmax(0,1fr) minmax(var(--video-modal-secondary-min),var(--video-modal-secondary-size));grid-template-areas:"primary secondary";align-items:stretch;grid-auto-flow:column}.video-modal__primary{min-width:0;min-height:0;grid-area:primary}.video-modal__secondary{min-width:var(--video-modal-secondary-min);min-height:0;max-width:var(--video-modal-secondary-size);grid-area:secondary;height:100%}#playerModal .video-modal__layout .watch-container{max-width:none;margin-inline:0;width:100%}}@media (min-width:1280px){.video-modal__layout{--video-modal-secondary-size:clamp(var(--video-modal-secondary-min),36vw,var(--video-modal-secondary-max))}}#playerModal .video-modal__layout{display:grid}@media (min-width:1024px){#playerModal .video-modal__layout{grid-template-columns:minmax(0,1fr) minmax(var(--video-modal-secondary-min),var(--video-modal-secondary-size));grid-template-areas:"primary secondary";align-items:stretch;grid-auto-flow:column}#playerModal .video-modal__primary{grid-area:primary}#playerModal .video-modal__secondary{grid-area:secondary}#playerModal .modal-nav__bar,#playerModal .video-modal__primary{--player-modal-inline-padding:var(
         --player-modal-primary-inline-padding-lg,clamp(var(--space-sm),2.75vw,var(--space-lg))
-      )}}.revert-modal__layout{display:grid;gap:1.5rem}@media (min-width:1024px){.revert-modal__layout{grid-template-columns:minmax(var(--revert-modal-sidebar-min),var(--revert-modal-sidebar-width)) minmax(0,1fr)}}#playerModal.video-modal__primary{display:block}.video-modal__primary{display:flex;flex-direction:column;gap:1.5rem;min-width:0;min-height:0}#playerModal.video-modal__secondary{display:block}.video-modal__secondary{display:flex;flex-direction:column;gap:1rem;min-width:0;min-height:0;width:100%;align-self:stretch}.video-modal__similar{display:none}@media (min-width:1024px){#playerModal.video-modal__similar{display:block}.video-modal__similar{display:flex;flex-direction:column;gap:1.5rem;align-self:stretch;flex:1 1 auto;min-height:0}#playerModal .video-modal__similar .player-modal__module{height:100%;display:flex;flex:1 1 auto;min-height:0;flex-direction:column}#playerModal .video-modal__similar .player-modal__module-list{flex:1 1 auto;min-height:0}#playerModal .video-modal__similar .player-modal__module-scroll{height:100%;max-height:none;min-height:0}}#playerModal .player-modal__module-item{width:100%}#playerModal#playerModal .player-modal__module-item>.card{display:block}#playerModal .player-modal__module-item>.card{display:flex;width:100%;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:var(--space-md)}#playerModal#playerModal .player-modal__module-item>.\!card{display:block}#playerModal .player-modal__module-item>.\!card{display:flex;width:100%;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:var(--space-md)}#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__media{width:clamp(5.75rem,18vw,8rem)}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__media{width:clamp(5.75rem,18vw,8rem)!important}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__media,#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__media{flex-shrink:0;overflow:hidden;border-radius:var(--radius-lg)}#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__content{padding:clamp(var(--space-sm),1.25vw,var(--space-md))}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__content{padding:clamp(var(--space-sm),1.25vw,var(--space-md))!important}#playerModal#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__content{display:block}#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__content{display:flex;min-width:0;flex:1 1 0%;flex-direction:column;gap:var(--space-sm)}#playerModal#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__content{display:block}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__content{display:flex;min-width:0;flex:1 1 0%;flex-direction:column;gap:var(--space-sm)}#playerModal#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__meta{display:block}#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:var(--font-size-xs);line-height:var(--line-height-tight);color:var(--text-muted-strong)}#playerModal#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__meta{display:block}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:var(--font-size-xs);line-height:var(--line-height-tight);color:var(--text-muted-strong)}#playerModal .video-modal__similar .player-modal__module-list{gap:clamp(var(--space-2xs),.85vw,var(--space-sm))}#playerModal .video-modal__similar .player-modal__module-item>.card{gap:clamp(var(--space-4xs),.8vw,var(--space-xs));padding:clamp(var(--space-3xs),.75vw,var(--space-sm))}#playerModal .video-modal__similar .player-modal__module-item>.\!card{gap:clamp(var(--space-4xs),.8vw,var(--space-xs))!important;padding:clamp(var(--space-3xs),.75vw,var(--space-sm))!important}#playerModal .video-modal__similar .player-modal__module-item>.card .video-card__media{inline-size:min(clamp(8rem,calc(var(--video-modal-secondary-min, 320px)*.38),12rem),calc(50% - var(--space-4xs)));flex-basis:min(clamp(8rem,calc(var(--video-modal-secondary-min, 320px)*0.38),12rem),calc(50% - var(--space-4xs)));max-inline-size:clamp(calc(var(--space-xl-plus)*1.25),24vw,calc(var(--space-2xl-plus)*1.75))}#playerModal .video-modal__similar .player-modal__module-item>.\!card .video-card__media{inline-size:min(clamp(8rem,calc(var(--video-modal-secondary-min, 320px)*.38),12rem),calc(50% - var(--space-4xs)))!important;flex-basis:min(clamp(8rem,calc(var(--video-modal-secondary-min, 320px)*0.38),12rem),calc(50% - var(--space-4xs)))!impLine truncated
+      )}}.revert-modal__layout{display:grid;gap:1.5rem}@media (min-width:1024px){.revert-modal__layout{grid-template-columns:minmax(var(--revert-modal-sidebar-min),var(--revert-modal-sidebar-width)) minmax(0,1fr)}}#playerModal.video-modal__primary{display:block}.video-modal__primary{display:flex;flex-direction:column;gap:1.5rem;min-width:0;min-height:0}#playerModal.video-modal__secondary{display:block}.video-modal__secondary{display:flex;flex-direction:column;gap:1rem;min-width:0;min-height:0;width:100%;align-self:stretch}.video-modal__similar{display:none}@media (min-width:1024px){#playerModal.video-modal__similar{display:block}.video-modal__similar{display:flex;flex-direction:column;gap:1.5rem;align-self:stretch;flex:1 1 auto;min-height:0}#playerModal .video-modal__similar .player-modal__module{height:100%;display:flex;flex:1 1 auto;min-height:0;flex-direction:column}#playerModal .video-modal__similar .player-modal__module-list{flex:1 1 auto;min-height:0}#playerModal .video-modal__similar .player-modal__module-scroll{height:100%;max-height:none;min-height:0}}#playerModal .player-modal__module-item{width:100%}#playerModal#playerModal .player-modal__module-item>.card{display:block}#playerModal .player-modal__module-item>.card{display:flex;width:100%;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:var(--space-md)}#playerModal#playerModal .player-modal__module-item>.\!card{display:block}#playerModal .player-modal__module-item>.\!card{display:flex;width:100%;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:var(--space-md)}#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__media{width:clamp(5.75rem,18vw,8rem)}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__media{width:clamp(5.75rem,18vw,8rem)!important}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__media,#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__media{flex-shrink:0;overflow:hidden;border-radius:var(--radius-lg)}#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__content{padding:clamp(var(--space-sm),1.25vw,var(--space-md))}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__content{padding:clamp(var(--space-sm),1.25vw,var(--space-md))!important}#playerModal#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__content{display:block}#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__content{display:flex;min-width:0;flex:1 1 0%;flex-direction:column;gap:var(--space-sm)}#playerModal#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__content{display:block}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__content{display:flex;min-width:0;flex:1 1 0%;flex-direction:column;gap:var(--space-sm)}#playerModal#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__meta{display:block}#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:var(--font-size-xs);line-height:var(--line-height-tight);color:var(--text-muted-strong)}#playerModal#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__meta{display:block}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:var(--font-size-xs);line-height:var(--line-height-tight);color:var(--text-muted-strong)}#playerModal .video-modal__similar .player-modal__module-list{gap:clamp(var(--space-2xs),.85vw,var(--space-sm))}#playerModal .video-modal__similar .player-modal__module-item>.card{gap:clamp(var(--space-4xs),.8vw,var(--space-xs));padding:clamp(var(--space-3xs),.75vw,var(--space-sm))}#playerModal .video-modal__similar .player-modal__module-item>.\!card{gap:clamp(var(--space-4xs),.8vw,var(--space-xs))!important;padding:clamp(var(--space-3xs),.75vw,var(--space-sm))!important}#playerModal .video-modal__similar .player-modal__module-item>.card .video-card__media{inline-size:min(clamp(8rem,calc(var(--video-modal-secondary-min, 320px)*.38),12rem),calc(50% - var(--space-4xs)));flex-basis:min(clamp(8rem,calc(var(--video-modal-secondary-min, 320px)*0.38),12rem),calc(50% - var(--space-4xs)));max-inline-size:clamp(calc(var(--space-xl-plus)*1.25),24vw,calc(var(--space-2xl-plus)*1.75))}#playerModal .video-modal__similar .player-modal__module-item>.\!card .video-card__media{inline-size:min(clamp(8rem,calc(var(--video-modal-secondary-min, 320px)*.38),12rem),calc(50% - var(--space-4xs)))!important;flex-basis:min(clamp(8rem,calc(var(--video-modal-secondary-min, 320px)*0.38),12rem),calc(50% - var(--space-4xs)))!impLine truncated

css/tailwind.source.css

@@ -2300,6 +2300,229 @@
     color: var(--color-accent-pressed);
   }
 
+  .video-modal__comments {
+    @apply rounded-2xl border border-border border-opacity-20 bg-surface px-5 py-5 shadow-sm;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-lg);
+  }
+
+  .comment-thread {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-lg);
+  }
+
+  .comment-thread__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--space-sm);
+  }
+
+  .comment-thread__title {
+    @apply text-lg font-semibold text-text;
+  }
+
+  .comment-thread__count {
+    @apply text-sm text-muted;
+    margin: 0;
+  }
+
+  .comment-thread__empty {
+    @apply text-sm text-muted;
+    margin: 0;
+    padding: var(--space-md);
+    border-radius: var(--radius-lg);
+    border: 1px dashed color-mix(
+      in srgb,
+      var(--border-default) 40%,
+      transparent
+    );
+    background-color: var(--surface-alt);
+  }
+
+  .comment-thread__list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .comment-thread__item {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: var(--space-md);
+    padding-block: var(--space-sm);
+    border-bottom: 1px solid var(--border-subtle);
+  }
+
+  .comment-thread__item:last-child {
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+
+  .comment-thread__avatar {
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
+  }
+
+  .comment-thread__avatar img {
+    @apply rounded-full object-cover;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  .comment-thread__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+    min-inline-size: 0;
+  }
+
+  .comment-thread__meta {
+    @apply text-xs text-muted;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-xs);
+  }
+
+  .comment-thread__author {
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  .comment-thread__timestamp {
+    color: var(--text-muted);
+  }
+
+  .comment-thread__body {
+    color: var(--text-primary);
+    line-height: 1.6;
+    word-break: break-word;
+  }
+
+  .comment-thread__actions {
+    @apply text-xs;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-sm);
+  }
+
+  .comment-thread__actions button {
+    @apply focus-ring inline-flex items-center gap-1 rounded-full border border-border-subtle bg-surface px-3 py-1 text-xs font-semibold text-muted transition duration-base ease-out;
+  }
+
+  .comment-thread__actions button:hover,
+  .comment-thread__actions button:focus-visible {
+    color: var(--text-primary);
+    border-color: var(--border-default);
+  }
+
+  .comment-thread__replies {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+    margin: 0;
+    margin-inline-start: calc(var(--space-lg) + var(--space-sm));
+    padding-inline-start: var(--space-md);
+    padding-block-start: var(--space-md);
+    border-inline-start: 1px solid var(--border-subtle);
+    list-style: none;
+  }
+
+  .comment-thread__load-more {
+    @apply inline-flex items-center justify-center gap-2 rounded-full border border-border-subtle bg-surface px-4 py-2 text-sm font-semibold text-text transition duration-base ease-out;
+  }
+
+  .comment-thread__load-more:hover,
+  .comment-thread__load-more:focus-visible {
+    border-color: var(--border-default);
+    color: var(--text-primary);
+    background-color: color-mix(
+      in srgb,
+      var(--surface-alt) 70%,
+      transparent
+    );
+  }
+
+  .comment-thread__disabled {
+    @apply text-sm text-muted;
+    border-radius: var(--radius-lg);
+    border: 1px dashed color-mix(
+      in srgb,
+      var(--border-default) 32%,
+      transparent
+    );
+    background-color: var(--surface-alt);
+    padding: var(--space-md);
+  }
+
+  .comment-composer {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+    border-top: 1px solid var(--border-subtle);
+    padding-top: var(--space-lg);
+  }
+
+  .comment-composer__field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2xs);
+  }
+
+  .comment-composer__label {
+    @apply text-sm font-semibold text-text;
+  }
+
+  .comment-composer__textarea {
+    min-block-size: 7rem;
+  }
+
+  .comment-composer__footer {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+  }
+
+  .comment-composer__hint {
+    @apply text-xs text-muted;
+    margin: 0;
+  }
+
+  .comment-composer__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--space-sm);
+  }
+
+  .comment-composer__char-count {
+    @apply text-xs font-medium text-muted;
+  }
+
+  .comment-composer__submit {
+    @apply focus-ring;
+  }
+
+  .comment-composer__status {
+    margin: 0;
+  }
+
+  @media (min-width: theme("screens.sm")) {
+    .comment-composer__footer {
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+
   .video-modal__progress {
     @apply h-2 w-full overflow-hidden rounded-full bg-border-subtle;
   }