MWPW-159032: Accessibility requirements floating label (#3137)

Adds a floating label as accessibility requirements for comments field
adobecom · Nov 7, 2024 · 819e6f3 · 819e6f3
1 parent 8b372b4
commit 819e6f3
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 24 deletions.
diff --git a/libs/blocks/review/components/review/Comments.js b/libs/blocks/review/components/review/Comments.js
@@ -6,7 +6,6 @@ import {
 } from '../../../../deps/htm-preact.js';
 
 function Comments({
-  label,
   comment,
   handleCommentChange,
   placeholderText,
@@ -61,20 +60,19 @@ function Comments({
   `;
   return html`
     <fieldset className=${commentsClass}>
-      <label htmlFor="rating-comments" />
+      <label htmlFor="rating-comments">${placeholderText}</label>
       <textarea
         id="rating-comments"
         ref=${textArea}
         cols="40"
         maxlength=${maxLength}
         name="rating-comments"
-        aria-label=${label}
-        placeholder=${placeholderText}
+        aria-label=${placeholderText}
         onInput=${onCommentChange}
         onFocus=${onFocus}
         value=${comment}
         onBlur=${onBlur}
-      />
+      ></textarea>
       <div id="ctaCover" onClick=${onCtaCoverClick}>
         ${charCountElement}
       </div>

diff --git a/libs/blocks/review/review.css b/libs/blocks/review/review.css
@@ -1,17 +1,23 @@
+/* stylelint-disable color-function-notation */
+/* stylelint-disable keyframes-name-pattern */
+/* stylelint-disable selector-id-pattern */
+/* stylelint-disable selector-class-pattern */
+/* stylelint-disable custom-property-pattern */
+/* stylelint-disable property-no-vendor-prefix */
 :root {
   --ratingBgImage: url('./img/star-outline.svg');
   --ratingActiveBgImage: url('./img/star-filled.svg');
   --focusOutlineColor: #4e8af4;
   --focusOutline: 2px solid var(--focusOutlineColor);
-  --commentBgColor: #ffffff;
+  --commentBgColor: #fff;
   --sendEnabledColor: #505050;
   --sendDisabledColor: #bcbcbc;
-  --sendHoverColor: hsl(0, 0%, 0%);
+  --sendHoverColor: hsl(0%, 0%, 0%);
   --tooltipBackground: #747474;
-  --tooltipText: #ffffff;
+  --tooltipText: #fff;
   --tooltipTransitionTime: 0.3s;
   --tooltipZIndex: 50;
-  --ratingCommentsHeight: 58px;
+  --ratingCommentsHeight: 81px;
   --ctaCommentHeight: 22px;
   --commentFieldsHeight: calc(var(--ratingCommentsHeight) + var(--ctaCommentHeight));
 }
@@ -113,6 +119,17 @@
   display: block;
 }
 
+.hlx-Review-commentFields label {
+  position: absolute;
+  top: 0;
+  left: 9px;
+  font-size: 19px;
+  color: #767676;
+  pointer-events: none;
+  transition: all 0.2s ease;
+  font-style: italic;
+}
+
 .hlx-Review-commentFields input[type='submit'] {
   position: absolute;
   right: 17px;
@@ -154,7 +171,7 @@
   height: var(--ratingCommentsHeight);
   border: none;
   outline: none;
-  padding: 6px 8px 0 8px;
+  padding: 29px 8px 0;
   font-size: 16px;
   font-style: italic;
   box-sizing: border-box;
@@ -167,7 +184,7 @@
 }
 
 .hlx-Review-commentFields .comment-counter {
-  color: #d3d3d3;
+  color: #767676;
   font-size: var(--type-body-xs-size);
 }
 
@@ -182,19 +199,19 @@
   display: block;
 }
 
-.hlx-ReviewStats-average,
-.hlx-ReviewStats-separator:first-of-type,
-.hlx-ReviewStats-outOf {
-  font-weight: 700;
-}
-
 .hlx-ReviewStats-outOf,
 .hlx-ReviewStats-separator,
 .hlx-ReviewStats-total,
 .hlx-ReviewStats-vote {
   margin-left: 3px;
 }
 
+.hlx-ReviewStats-average,
+.hlx-ReviewStats-separator:first-of-type,
+.hlx-ReviewStats-outOf {
+  font-weight: 700;
+}
+
 .hlx-submitResponse {
   font-size: 24px;
   text-align: center;
@@ -204,7 +221,7 @@
   position: relative;
 }
 
-.tooltip:before {
+.tooltip::before {
   content: attr(data-tooltip);
   position: absolute;
   right: 50%;
@@ -225,22 +242,22 @@
   visibility: hidden;
 }
 
-.tooltip:after {
+.tooltip::after {
   content: '';
   top: 100%;
   position: absolute;
-  margin: 12px 1px 0 1px;
+  margin: 12px 1px 0;
   border: 5px solid var(--tooltipBackground);
   border-color: transparent transparent var(--tooltipBackground);
   opacity: 0;
   transition: var(--tooltipTransitionTime);
   visibility: hidden;
 }
 
-.tooltip.is-hovering:before,
-.tooltip.is-hovering:after,
-.tooltip.has-keyboard-focus:before,
-.tooltip.has-keyboard-focus:after {
+.tooltip.is-hovering::before,
+.tooltip.is-hovering::after,
+.tooltip.has-keyboard-focus::before,
+.tooltip.has-keyboard-focus::after {
   opacity: 1;
   visibility: visible;
   z-index: var(--tooltipZIndex);