From ec60fdbc8772ed60ecca40f62d3ec0449a2e09e5 Mon Sep 17 00:00:00 2001
From: Ed Schiebel <eschiebel@instructure.com>
Date: Wed, 15 Mar 2023 09:21:38 -0400
Subject: [PATCH] Format a11y checker header to be compliant with canvas
 standards

closes MAT-1130
flag=none

test plan
  - have an a11y violation in rce content
  - open the a11y checker
  > expect the close button to be on the right
  > expect the tray to be a little wider so the title
    fits on 1 line (in English, it may wrap in other languages)

Change-Id: I88c43d7421390baf79e5e18ab44543fbe425240c
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/313340
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Juan Chavez <juan.chavez@instructure.com>
QA-Review: Juan Chavez <juan.chavez@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
---
 .../components/checker.js                     | 283 ++++++++++--------
 1 file changed, 150 insertions(+), 133 deletions(-)

diff --git a/packages/canvas-rce/src/tinymce-a11y-checker/components/checker.js b/packages/canvas-rce/src/tinymce-a11y-checker/components/checker.js
index d81f08a275c..fbd4ed60659 100644
--- a/packages/canvas-rce/src/tinymce-a11y-checker/components/checker.js
+++ b/packages/canvas-rce/src/tinymce-a11y-checker/components/checker.js
@@ -15,6 +15,8 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+/* eslint-disable jest/valid-describe */
+// our own imported describe function confuses eslint
 
 import React from 'react'
 
@@ -22,6 +24,7 @@ import preventDefault from 'prevent-default'
 import {LiveAnnouncer, LiveMessage} from 'react-aria-live'
 import {ScreenReaderContent} from '@instructure/ui-a11y-content'
 import {Button, CloseButton} from '@instructure/ui-buttons'
+import {Flex} from '@instructure/ui-flex'
 import {Tray} from '@instructure/ui-tray'
 import {Popover} from '@instructure/ui-popover'
 import {View} from '@instructure/ui-view'
@@ -45,6 +48,7 @@ import * as dom from '../utils/dom'
 import checkNode from '../node-checker'
 import formatMessage from '../../format-message'
 import {clearIndicators} from '../utils/indicate'
+import {getTrayHeight} from '../../rce/plugins/shared/trayUtils'
 
 // safari still doesn't support the standard api
 const FS_CHANGEEVENT = document.exitFullscreen ? 'fullscreenchange' : 'webkitfullscreenchange'
@@ -213,15 +217,17 @@ export default class Checker extends React.Component {
   }
 
   updateFormState = ({target}) => {
-    const formState = {...this.state.formState}
-    if (target.type === 'checkbox') {
-      formState[target.name] = target.checked
-    } else {
-      formState[target.name] = target.value
-    }
-    this.setState({
-      formState,
-      formStateValid: this.formStateValid(formState),
+    this.setState(prevState => {
+      const formState = {...prevState.formState}
+      if (target.type === 'checkbox') {
+        formState[target.name] = target.checked
+      } else {
+        formState[target.name] = target.value
+      }
+      return {
+        formState,
+        formStateValid: this.formStateValid(formState),
+      }
     })
   }
 
@@ -322,145 +328,156 @@ export default class Checker extends React.Component {
           onDismiss={() => this.handleClose()}
           placement="end"
           contentRef={e => (this.trayElement = e)}
+          size="regular"
+          theme={{regularWidth: '22em'}}
         >
-          <CloseButton
-            placement="start"
-            offset="x-small"
-            onClick={() => this.handleClose()}
-            buttonRef={ref => (this._closeButtonRef = ref)}
-          >
-            {formatMessage('Close Accessibility Checker')}
-          </CloseButton>
-          <View as="div" padding="x-large large">
-            <Heading level="h3" as="h2" margin="medium 0">
-              {' ' + formatMessage('Accessibility Checker')}
-            </Heading>
-            {this.state.errors.length > 0 && (
-              <View as="div">
-                <LiveMessage
-                  aria-live="polite"
-                  message={`
+          <Flex direction="column" height={getTrayHeight()}>
+            <Flex.Item as="header" padding="medium medium small">
+              <Flex direction="row">
+                <Flex.Item shouldGrow={true} shouldShrink={true}>
+                  <Heading as="h2">{formatMessage('Accessibility Checker')}</Heading>
+                </Flex.Item>
+                <Flex.Item>
+                  <CloseButton
+                    placement="end"
+                    onClick={() => this.handleClose()}
+                    buttonRef={ref => (this._closeButtonRef = ref)}
+                  >
+                    {formatMessage('Close Accessibility Checker')}
+                  </CloseButton>
+                </Flex.Item>
+              </Flex>
+            </Flex.Item>
+            <Flex.Item as="div" padding="0 large large">
+              {this.state.errors.length > 0 && (
+                <View as="div">
+                  <LiveMessage
+                    aria-live="polite"
+                    message={`
                   ${issueNumberMessage}
                   ${describe(this.errorNode())}
                   ${this.errorMessage()}
                 `}
-                />
-                <View as="div" margin="large 0 medium 0">
-                  <Grid vAlign="middle" hAlign="space-between" colSpacing="none">
-                    <GridRow>
-                      <GridCol>
-                        <Text weight="bold">{issueNumberMessage}</Text>
-                      </GridCol>
-                      <GridCol width="auto">
-                        <Popover
-                          on="click"
-                          show={this.state.showWhyPopover}
-                          shouldContainFocus={true}
-                          shouldReturnFocus={true}
-                        >
-                          <Popover.Trigger>
-                            <Button
-                              variant="icon"
-                              icon={IconQuestionLine}
-                              onDismiss={() => {
-                                this.setState({showWhyPopover: false})
-                              }}
-                              onClick={() => this.setState({showWhyPopover: true})}
-                            >
-                              <ScreenReaderContent>{formatMessage('Why')}</ScreenReaderContent>
-                            </Button>
-                          </Popover.Trigger>
-                          <Popover.Content>
-                            <View padding="medium" display="block" width="16rem">
-                              <CloseButton
-                                placement="end"
-                                offset="x-small"
-                                variant="icon"
-                                onClick={() => this.setState({showWhyPopover: false})}
-                              >
-                                {formatMessage('Close')}
-                              </CloseButton>
-                              <Text>
-                                <p>{rule.why()}</p>
-                                <p>
-                                  {rule.link && rule.link.length && (
-                                    <ApplyTheme
-                                      theme={{
-                                        [Link.theme]: {
-                                          textDecoration: 'underline',
-                                        },
-                                      }}
-                                    >
-                                      <Link href={rule.link} target="_blank">
-                                        {rule.linkText()}
-                                      </Link>
-                                    </ApplyTheme>
-                                  )}
-                                </p>
-                              </Text>
-                            </View>
-                          </Popover.Content>
-                        </Popover>
-                      </GridCol>
-                    </GridRow>
-                  </Grid>
-                </View>
-                <form onSubmit={preventDefault(() => this.fixIssue())}>
-                  <Text as="div">{this.errorMessage()}</Text>
-                  {rule.form().map(f => (
-                    <View as="div" key={f.dataKey} margin="medium 0 0">
-                      {this.renderField(f)}
-                    </View>
-                  ))}
-                  <View as="div" margin="medium 0">
+                  />
+                  <View as="div" margin="large 0 medium 0">
                     <Grid vAlign="middle" hAlign="space-between" colSpacing="none">
                       <GridRow>
                         <GridCol>
-                          <Button
-                            onClick={() => this.prevError()}
-                            margin="0 small 0 0"
-                            aria-label="Previous"
-                          >
-                            {formatMessage('Prev')}
-                          </Button>
-                          <Button onClick={() => this.nextError()}>{formatMessage('Next')}</Button>
+                          <Text weight="bold">{issueNumberMessage}</Text>
                         </GridCol>
                         <GridCol width="auto">
-                          <Button
-                            type="submit"
-                            variant="primary"
-                            disabled={!this.state.formStateValid}
+                          <Popover
+                            on="click"
+                            show={this.state.showWhyPopover}
+                            shouldContainFocus={true}
+                            shouldReturnFocus={true}
                           >
-                            {formatMessage('Apply')}
-                          </Button>
+                            <Popover.Trigger>
+                              <Button
+                                variant="icon"
+                                icon={IconQuestionLine}
+                                onDismiss={() => {
+                                  this.setState({showWhyPopover: false})
+                                }}
+                                onClick={() => this.setState({showWhyPopover: true})}
+                              >
+                                <ScreenReaderContent>{formatMessage('Why')}</ScreenReaderContent>
+                              </Button>
+                            </Popover.Trigger>
+                            <Popover.Content>
+                              <View padding="medium" display="block" width="16rem">
+                                <CloseButton
+                                  placement="end"
+                                  offset="x-small"
+                                  variant="icon"
+                                  onClick={() => this.setState({showWhyPopover: false})}
+                                >
+                                  {formatMessage('Close')}
+                                </CloseButton>
+                                <Text>
+                                  <p>{rule.why()}</p>
+                                  <p>
+                                    {rule.link && rule.link.length && (
+                                      <ApplyTheme
+                                        theme={{
+                                          [Link.theme]: {
+                                            textDecoration: 'underline',
+                                          },
+                                        }}
+                                      >
+                                        <Link href={rule.link} target="_blank">
+                                          {rule.linkText()}
+                                        </Link>
+                                      </ApplyTheme>
+                                    )}
+                                  </p>
+                                </Text>
+                              </View>
+                            </Popover.Content>
+                          </Popover>
                         </GridCol>
                       </GridRow>
                     </Grid>
                   </View>
-                </form>
-              </View>
-            )}
-            {this.state.errors.length === 0 && !this.state.checking && (
-              <View>
-                <Text>
-                  <p>{formatMessage('No accessibility issues were detected.')}</p>
-                </Text>
-                <PlaceholderSVG />
-              </View>
-            )}
-            {this.state.checking && (
-              <div>
-                <LiveMessage
-                  message={formatMessage('Checking for accessibility issues')}
-                  aria-live="polite"
-                />
-                <Spinner
-                  title={formatMessage('Checking for accessibility issues')}
-                  margin="medium auto"
-                />
-              </div>
-            )}
-          </View>
+                  <form onSubmit={preventDefault(() => this.fixIssue())}>
+                    <Text as="div">{this.errorMessage()}</Text>
+                    {rule.form().map(f => (
+                      <View as="div" key={f.dataKey} margin="medium 0 0">
+                        {this.renderField(f)}
+                      </View>
+                    ))}
+                    <View as="div" margin="medium 0">
+                      <Grid vAlign="middle" hAlign="space-between" colSpacing="none">
+                        <GridRow>
+                          <GridCol>
+                            <Button
+                              onClick={() => this.prevError()}
+                              margin="0 small 0 0"
+                              aria-label="Previous"
+                            >
+                              {formatMessage('Prev')}
+                            </Button>
+                            <Button onClick={() => this.nextError()}>
+                              {formatMessage('Next')}
+                            </Button>
+                          </GridCol>
+                          <GridCol width="auto">
+                            <Button
+                              type="submit"
+                              variant="primary"
+                              disabled={!this.state.formStateValid}
+                            >
+                              {formatMessage('Apply')}
+                            </Button>
+                          </GridCol>
+                        </GridRow>
+                      </Grid>
+                    </View>
+                  </form>
+                </View>
+              )}
+              {this.state.errors.length === 0 && !this.state.checking && (
+                <View>
+                  <Text>
+                    <p>{formatMessage('No accessibility issues were detected.')}</p>
+                  </Text>
+                  <PlaceholderSVG />
+                </View>
+              )}
+              {this.state.checking && (
+                <div>
+                  <LiveMessage
+                    message={formatMessage('Checking for accessibility issues')}
+                    aria-live="polite"
+                  />
+                  <Spinner
+                    title={formatMessage('Checking for accessibility issues')}
+                    margin="medium auto"
+                  />
+                </div>
+              )}
+            </Flex.Item>
+          </Flex>
         </Tray>
       </LiveAnnouncer>
     )