prompt activation frontend

services/QuillLMS/client/app/bundles/PremiumHub/components/canvas/__tests__/__snapshots__/canvasIntegrationForm.test.tsx.snap

@@ -74,7 +74,9 @@ exports[`CanvasIntegrationForm when there is an existing integration it should r
             scope="col"
           >
             <button
+              aria-checked="true"
               class="quill-checkbox selected"
+              role="checkbox"
               type="button"
             >
               <img
@@ -243,8 +245,10 @@ exports[`CanvasIntegrationForm when there is not an existing integration it shou
             scope="col"
           >
             <button
+              aria-checked="false"
               aria-label="Unchecked checkbox"
               class="quill-checkbox unselected"
+              role="checkbox"
               type="button"
             />
           </th>

services/QuillLMS/client/app/bundles/PremiumHub/components/canvas/__tests__/__snapshots__/canvasIntegrationModal.test.tsx.snap

@@ -83,7 +83,9 @@ exports[`CanvasIntegrationModal it should render when there is an existing integ
                 scope="col"
               >
                 <button
+                  aria-checked="true"
                   class="quill-checkbox selected"
+                  role="checkbox"
                   type="button"
                 >
                   <img
@@ -263,8 +265,10 @@ exports[`CanvasIntegrationModal it should render when there is not an existing i
                 scope="col"
               >
                 <button
+                  aria-checked="false"
                   aria-label="Unchecked checkbox"
                   class="quill-checkbox unselected"
+                  role="checkbox"
                   type="button"
                 />
               </th>

services/QuillLMS/client/app/bundles/PremiumHub/components/canvas/__tests__/__snapshots__/schoolSelector.test.tsx.snap

@@ -14,7 +14,9 @@ exports[`SchoolSelector it should render when all school ids are selected 1`] =
           scope="col"
         >
           <button
+            aria-checked="true"
             class="quill-checkbox selected"
+            role="checkbox"
             type="button"
           >
             <img
@@ -98,8 +100,10 @@ exports[`SchoolSelector it should render when there are no selected school ids 1
           scope="col"
         >
           <button
+            aria-checked="false"
             aria-label="Unchecked checkbox"
             class="quill-checkbox unselected"
+            role="checkbox"
             type="button"
           />
         </th>
@@ -170,7 +174,9 @@ exports[`SchoolSelector it should render when there is one selected school id 1`
           scope="col"
         >
           <button
+            aria-checked="true"
             class="quill-checkbox selected"
+            role="checkbox"
             type="button"
           >
             <img

services/QuillLMS/client/app/bundles/PremiumHub/components/canvas/__tests__/canvasIntegrationForm.test.tsx

@@ -31,7 +31,7 @@ function clearInput(user, name) {
 
 function topLevelCheckbox(user) {
   const row = screen.getByRole('row', { name: /schools/i });
-  return within(row).getByRole('button', { name: /checkbox/i })
+  return within(row).getByRole('checkbox', { name: /checkbox/i })
 }
 
 function clickTopLevelCheckbox(user) {
@@ -80,7 +80,7 @@ describe('CanvasIntegrationForm', () => {
       expect(getInputValue(user, /client id/i)).toBe(clientId)
 
       const row = screen.getByRole('row', { name: /schools/i });
-      expect(within(row).getByRole('button', { name: /checked checkbox/i })).toBeTruthy()
+      expect(within(row).getByRole('checkbox', { name: /checked checkbox/i })).toBeTruthy()
     })
 
     it('calls close if cancel is clicked and there is a close prop', async () => {
@@ -206,7 +206,7 @@ describe('CanvasIntegrationForm', () => {
       expect(getInputValue(user, /client id/i)).toBe('')
 
       const row = screen.getByRole('row', { name: /schools/i });
-      expect(within(row).getByRole('button', { name: /unchecked checkbox/i })).toBeTruthy()
+      expect(within(row).getByRole('checkbox', { name: /unchecked checkbox/i })).toBeTruthy()
     })
 
     it('calls close if cancel is clicked and there is a close prop', async () => {

services/QuillLMS/client/app/bundles/Shared/components/shared/__tests__/__snapshots__/checkBox.test.tsx.snap

@@ -8,6 +8,7 @@ exports[`Checkbox it should render 1`] = `
     <button
       aria-checked="true"
       class="quill-checkbox selected light focus-on-light"
+      id="test label"
       role="checkbox"
       type="button"
     >
@@ -16,11 +17,12 @@ exports[`Checkbox it should render 1`] = `
         src="https://assets.quill.org/images/icons/xs/check-small-white.svg"
       />
     </button>
-    <span
+    <label
       class=" light"
+      for="test label"
     >
       test label
-    </span>
+    </label>
   </div>
 </DocumentFragment>
 `;

services/QuillLMS/client/app/bundles/Shared/components/shared/__tests__/__snapshots__/list.tes.tsx.snap

@@ -12,14 +12,16 @@ exports[`List it should render checkbox style as expected 1`] = `
         <button
           aria-checked="false"
           class="quill-checkbox unselected light focus-on-light"
+          id="checkbox 1"
           role="checkbox"
           type="button"
         />
-        <span
+        <label
           class=" light"
+          for="checkbox 1"
         >
           checkbox 1
-        </span>
+        </label>
       </div>
     </li>
     <li>
@@ -29,14 +31,16 @@ exports[`List it should render checkbox style as expected 1`] = `
         <button
           aria-checked="false"
           class="quill-checkbox unselected light focus-on-light"
+          id="checkbox 2"
           role="checkbox"
           type="button"
         />
-        <span
+        <label
           class=" light"
+          for="checkbox 2"
         >
           checkbox 2
-        </span>
+        </label>
       </div>
     </li>
   </ul>

services/QuillLMS/client/app/bundles/Shared/components/shared/__tests__/__snapshots__/radioButton.test.tsx.snap

@@ -8,18 +8,20 @@ exports[`RadioButton it should render 1`] = `
     <button
       aria-checked="true"
       class="quill-radio-button interactive-wrapper selected  light focus-on-light"
-      role="checkbox"
+      id="test label"
+      role="radio"
       type="button"
     >
       <div
         class="button-fill"
       />
     </button>
-    <span
+    <label
       class=" light focus-on-light"
+      for="test label"
     >
       test label
-    </span>
+    </label>
   </div>
 </DocumentFragment>
 `;

services/QuillLMS/client/app/bundles/Shared/components/shared/checkBox.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import { ACTIVE, DISABLED, INDETERMINATE } from '../../utils/constants';
 
 const indeterminateBlackSrc = 'https://assets.quill.org/images/icons/xs/dash-black.svg'
@@ -10,14 +11,16 @@ const DARK = 'dark'
 const LIGHT = 'light'
 
 interface checkboxProps {
-  label: string;
+  label?: string;
   mode?: string;
   onClick?: () => void;
   state?: string;
   selected: boolean;
+  id?: string;
 }
 
-export const Checkbox = ({ label, mode=LIGHT, onClick, state, selected }: checkboxProps) => {
+export const Checkbox = ({ label, mode=LIGHT, onClick, state, selected, id, }: checkboxProps) => {
+  const checkboxId = id || label
   const labelClass = `${state === DISABLED ? DISABLED : ''} ${mode}`
   const modeClass = mode === LIGHT ? `${mode} focus-on-light` : `${mode} focus-on-dark`
 
@@ -28,20 +31,27 @@ export const Checkbox = ({ label, mode=LIGHT, onClick, state, selected }: checkb
   }
 
   function renderCheckbox() {
-    let checkbox = (<button aria-checked={selected} className={`quill-checkbox unselected ${modeClass}`} onClick={onClick} role="checkbox" type="button">
+    const sharedProps = {
+      'aria-checked': selected,
+      id: checkboxId,
+      onClick,
+      role: 'checkbox'
+    }
+
+    let checkbox = (<button {...sharedProps} className={`quill-checkbox unselected ${modeClass}`} type="button">
       {renderCheck()}
     </button>)
     if (state === INDETERMINATE) {
-      checkbox = (<button aria-checked={selected} className={`quill-checkbox indeterminate ${modeClass}`} onClick={onClick} role="checkbox" type="button">
+      checkbox = (<button {...sharedProps} className={`quill-checkbox indeterminate ${modeClass}`} type="button">
         {renderCheck()}
       </button>)
 
     } else if (state === DISABLED) {
-      checkbox = (<button aria-checked={selected} className={`quill-checkbox ${selected ? 'selected' : 'unselected'} ${modeClass} disabled`} role="checkbox" type="button">
+      checkbox = (<button {...sharedProps} className={`quill-checkbox ${selected ? 'selected' : 'unselected'} ${modeClass} disabled`} disabled={true} type="button">
         {renderCheck()}
       </button>)
     } else if (selected) {
-      checkbox = (<button aria-checked={selected} className={`quill-checkbox selected ${modeClass}`} onClick={onClick} role="checkbox" type="button">
+      checkbox = (<button {...sharedProps} className={`quill-checkbox selected ${modeClass}`} type="button">
         {renderCheck()}
       </button>)
     }
@@ -51,7 +61,7 @@ export const Checkbox = ({ label, mode=LIGHT, onClick, state, selected }: checkb
   return (
     <div className="checkbox-container">
       {renderCheckbox()}
-      <span className={labelClass}>{label}</span>
+      {label ? <label className={labelClass} htmlFor={checkboxId}>{label}</label> : null}
     </div>
   );
 };

services/QuillLMS/client/app/bundles/Shared/components/shared/dataTable.tsx

@@ -195,7 +195,7 @@ export class DataTable extends React.Component<DataTableProps, DataTableState> {
     if (allChecked) {
       return (
         <th className={dataTableHeaderClassName} scope="col">
-          <button className="quill-checkbox selected" onClick={uncheckAllRows} type="button">
+          <button aria-checked={true} className="quill-checkbox selected" onClick={uncheckAllRows} role="checkbox" type="button">
             <img alt="Checked checkbox" src={smallWhiteCheckSrc} />
           </button>
         </th>
@@ -206,7 +206,7 @@ export class DataTable extends React.Component<DataTableProps, DataTableState> {
     if (anyChecked) {
       return (
         <th className={dataTableHeaderClassName} scope="col">
-          <button className="quill-checkbox selected" onClick={uncheckAllRows} type="button">
+          <button aria-checked={true} className="quill-checkbox selected" onClick={uncheckAllRows} role="checkbox" type="button">
             <img alt="Checked checkbox" src={indeterminateSrc} />
           </button>
         </th>
@@ -215,7 +215,7 @@ export class DataTable extends React.Component<DataTableProps, DataTableState> {
 
     return (
       <th className={dataTableHeaderClassName} scope="col">
-        <button aria-label="Unchecked checkbox" className="quill-checkbox unselected" onClick={checkAllRows} type="button" />
+        <button aria-checked={false} aria-label="Unchecked checkbox" className="quill-checkbox unselected" onClick={checkAllRows} role="checkbox" type="button" />
       </th>
     )
   }

services/QuillLMS/client/app/bundles/Shared/components/shared/radioButton.tsx

@@ -4,23 +4,27 @@ import { DISABLED } from '../../utils/constants';
 const LIGHT = 'light'
 
 interface radioButtonProps {
-  label: string;
+  selected: boolean;
+  label?: string;
   mode?: string;
   onClick?: () => void;
   state?: string;
-  selected: boolean;
   value?: any;
+  id?: any;
+  ariaLabel?: string;
 }
 
-export const RadioButton = ({ label, mode = LIGHT, onClick, state, selected, value }: radioButtonProps) => {
+export const RadioButton = ({ label, mode = LIGHT, onClick, state, selected, value, id, ariaLabel, }: radioButtonProps) => {
+  const radioButtonId = id || label
+
   const elementClass = `${state === DISABLED ? DISABLED : ''} ${mode === LIGHT ? `${mode} focus-on-light` : `${mode} focus-on-dark`}`
 
   return (
     <div className="quill-radio-button-container">
-      <button aria-checked={selected} className={`quill-radio-button interactive-wrapper ${selected ? 'selected' : 'unselected'} ${elementClass}`} onClick={onClick} role="checkbox" type="button" value={value} >
+      <button aria-checked={selected} aria-label={ariaLabel} className={`quill-radio-button interactive-wrapper ${selected ? 'selected' : 'unselected'} ${elementClass}`} id={radioButtonId} onClick={onClick} role="radio" type="button" value={value} >
         <div className="button-fill" />
       </button>
-      <span className={elementClass}>{label}</span>
+      {label && <label className={elementClass} htmlFor={radioButtonId}>{label}</label>}
     </div>
   );
 };

services/QuillLMS/client/app/bundles/Shared/components/shared/textArea.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 interface InputProps {
   timesSubmitted: Number;
-  label: string;
+  label?: string;
   error?: string;
   disabled?: boolean;
   className?: string;
@@ -129,7 +129,7 @@ export class TextArea extends React.Component<InputProps, InputState> {
             onClick={this.activateInput}
             ref={node => this.node = node}
           >
-            <label>{label}</label>
+            <label htmlFor={id}>{label}</label>
             <textarea
               disabled={disabled}
               id={id}
@@ -150,7 +150,7 @@ export class TextArea extends React.Component<InputProps, InputState> {
             onClick={this.acknowledgeError}
             ref={node => this.node = node}
           >
-            <label>{label}</label>
+            <label htmlFor={id}>{label}</label>
             <textarea
               id={id}
               maxLength={characterLimit ? characterLimit : 10000}
@@ -172,7 +172,7 @@ export class TextArea extends React.Component<InputProps, InputState> {
           onClick={this.activateInput}
           ref={node => this.node = node}
         >
-          <label>{label}</label>
+          <label htmlFor={id}>{label}</label>
           <textarea
             defaultValue={value}
             disabled={disabled}
@@ -191,7 +191,7 @@ export class TextArea extends React.Component<InputProps, InputState> {
           className={sharedClasses}
           ref={node => this.node = node}
         >
-          <label>{label}</label>
+          <label htmlFor={id}>{label}</label>
           <textarea
             id={id}
             maxLength={characterLimit ? characterLimit : 10000}
@@ -209,7 +209,7 @@ export class TextArea extends React.Component<InputProps, InputState> {
   }
 
   render() {
-    return <div onClick={this.props.onClick}>{this.renderInput()}</div>
+    return <div className="textarea-wrapper" onClick={this.props.onClick}>{this.renderInput()}</div>
   }
 
 }

services/QuillLMS/client/app/bundles/Shared/styles/checkboxes.scss

@@ -44,19 +44,20 @@
   background-color: transparent;
 }
 
-
 .checkbox-container {
   display: flex;
   align-items: center;
   padding: 8px;
   .quill-checkbox:focus {
     outline-offset: 3px;
   }
-  span {
+  label {
     @include display-xs-semibold;
   }
-  span:last-of-type {
+  label:last-of-type {
     margin-left: 8px;
+    margin-bottom: 0px;
+    font-weight: inherit;
     &.disabled {
       color: $quill-grey-30;
     }

services/QuillLMS/client/app/bundles/Shared/styles/data_table.scss

@@ -318,3 +318,8 @@ table.data-table {
 .left-align {
   text-align: left !important;
 }
+
+.grow-to-fit {
+  flex: 1;
+  width: 100%;
+}