ref: remove disabled button, instead add better a11y for required field

Author: billyvg

packages/feedback/src/integration.ts

@@ -190,7 +190,7 @@ export class Feedback implements Integration {
   /**
    * Adds click listener to attached element to open a feedback dialog
    */
-  public attachTo(el: Node | string, optionOverrides: CreateWidgetOptionOverrides): Widget | null {
+  public attachTo(el: Element | string, optionOverrides: CreateWidgetOptionOverrides): Widget | null {
     try {
       const options = {
         ...this.options,

packages/feedback/src/sendFeedback.ts

@@ -27,6 +27,10 @@ export function sendFeedback(
   replay && replay.flush();
   const replayId = replay && replay.getReplayId();
 
+  if (!message) {
+    throw new Error('Unable to submit feedback with empty message')
+  }
+
   return sendFeedbackRequest({
     feedback: {
       name,

packages/feedback/src/util/handleFeedbackSubmit.ts

@@ -19,13 +19,11 @@ export async function handleFeedbackSubmit(
     if (!dialog) {
       return;
     }
-    dialog.setSubmitEnabled();
     dialog.showError('There was a problem submitting feedback, please wait and try again.');
   };
 
   try {
     dialog.hideError();
-    dialog.setSubmitDisabled();
     const resp = await sendFeedback(feedback, options);
 
     if (!resp) {

packages/feedback/src/widget/Dialog.css.ts

@@ -64,7 +64,7 @@ export function createDialogStyles(d: Document): HTMLStyleElement {
 }
 
 .error {
-  color: red;
+  color: var(--error-color);
   margin-bottom: 16px;
 }
 
@@ -91,6 +91,18 @@ export function createDialogStyles(d: Document): HTMLStyleElement {
   margin: 0px;
 }
 
+.form__label__text {
+  display: grid;
+  gap: 4px;
+  align-items: center;
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
+}
+
+.form__label__text--required {
+  font-size: 0.85em;
+}
+
 .form__input {
   font-family: inherit;
   line-height: inherit;

packages/feedback/src/widget/Dialog.ts

@@ -19,16 +19,6 @@ export interface DialogComponent extends FeedbackComponent<HTMLDialogElement> {
    */
   hideError: () => void;
 
-  /**
-   * Disable submit button so that it cannot be clicked
-   */
-  setSubmitDisabled: () => void;
-
-  /**
-   * Enable submit buttons so that it can be clicked
-   */
-  setSubmitEnabled: () => void;
-
   /**
    * Opens and shows the dialog and form
    */
@@ -102,8 +92,6 @@ export function Dialog({
 
   const {
     el: formEl,
-    setSubmitEnabled,
-    setSubmitDisabled,
     showError,
     hideError,
   } = Form({
@@ -143,8 +131,6 @@ export function Dialog({
     el,
     showError,
     hideError,
-    setSubmitDisabled,
-    setSubmitEnabled,
     open,
     close,
     checkIsOpen,

packages/feedback/src/widget/Form.ts

@@ -32,16 +32,6 @@ interface FormComponent extends FeedbackComponent<HTMLFormElement> {
    * Hides the error message
    */
   hideError: () => void;
-
-  /**
-   * Disables the submit button
-   */
-  setSubmitDisabled: () => void;
-
-  /**
-   * Enables the submit button
-   */
-  setSubmitEnabled: () => void;
 }
 
 function retrieveStringValue(formData: FormData, key: string): string {
@@ -76,8 +66,6 @@ export function Form({
 }: FormComponentProps): FormComponent {
   const {
     el: submitEl,
-    setDisabled: setSubmitDisabled,
-    setEnabled: setSubmitEnabled,
   } = SubmitButton({
     label: submitButtonLabel,
   });
@@ -147,19 +135,9 @@ export function Form({
     autoFocus: 'true',
     rows: '5',
     name: 'message',
+    required: true,
     className: 'form__input form__input--textarea',
     placeholder: messagePlaceholder,
-    onKeyup: (e: Event) => {
-      if (!(e.currentTarget instanceof HTMLTextAreaElement)) {
-        return;
-      }
-
-      if (e.currentTarget.value) {
-        setSubmitEnabled();
-      } else {
-        setSubmitDisabled();
-      }
-    },
   });
 
   const cancelEl = createElement(
@@ -213,7 +191,8 @@ export function Form({
           htmlFor: 'message',
           className: 'form__label',
         },
-        [messageLabel, messageEl],
+        [createElement('span', {className: 'form__label__text'}, messageLabel,
+        createElement('span', {className: 'form__label__text--required'}, ' (required)')), messageEl],
       ),
 
       createElement(
@@ -227,9 +206,7 @@ export function Form({
   );
 
   return {
-    el: formEl,
-    setSubmitDisabled,
-    setSubmitEnabled,
+    get el() { return formEl },
     showError,
     hideError,
   };

packages/feedback/src/widget/SubmitButton.ts

@@ -6,15 +6,6 @@ export interface SubmitButtonProps {
 }
 
 interface SubmitButtonComponent extends FeedbackComponent<HTMLButtonElement> {
-  /**
-   * Disables the submit button
-   */
-  setDisabled: () => void;
-
-  /**
-   * Enables the submit button
-   */
-  setEnabled: () => void;
 }
 
 /**
@@ -26,21 +17,12 @@ export function SubmitButton({ label }: SubmitButtonProps): SubmitButtonComponen
     {
       type: 'submit',
       className: 'btn btn--primary',
-      disabled: true,
-      ariaDisabled: 'true',
+      ['aria-label']: label,
     },
     label,
   );
 
   return {
     el,
-    setDisabled: () => {
-      el.disabled = true;
-      el.ariaDisabled = 'true';
-    },
-    setEnabled: () => {
-      el.disabled = false;
-      el.ariaDisabled = 'false';
-    },
   };
 }

packages/feedback/src/widget/createWidget.ts

@@ -64,6 +64,12 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
       return;
     }
 
+    // Simple validation for now, just check for non-empty message
+    if (!feedback.message) {
+      dialog.showError('Please enter in some feedback before submitting!');
+      return;
+    }
+
     const result = await handleFeedbackSubmit(dialog, feedback);
 
     // Error submitting feedback