remove a11y checker notification ff

Closes MAT-779
flag=none

Test Plan
1. Re-build canvas-rce and canvas JS bundles
2. Restart the Rails server
3. Navigate to an RCE and do something to trigger
   the A11y checker (example: insert an image with no
   alt text)
4. Verify the a11y checker shows a numbered notification
   badge over the checker button

Change-Id: I21952d497ee525f7ec2af8eee9a2cf8c2c3390f1
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/287608

Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jake Oeding <jake.oeding@instructure.com>
QA-Review: Jake Oeding <jake.oeding@instructure.com>
Product-Review: David Lyons <lyons@instructure.com>

app/controllers/application_controller.rb

@@ -208,7 +208,6 @@ class ApplicationController < ActionController::Base
           files_domain: HostUrl.file_host(@domain_root_account || Account.default, request.host_with_port),
           DOMAIN_ROOT_ACCOUNT_ID: @domain_root_account&.global_id,
           k12: k12?,
-          use_rce_a11y_checker_notifications: @context.try(:feature_enabled?, :rce_a11y_checker_notifications),
           help_link_name: help_link_name,
           help_link_icon: help_link_icon,
           use_high_contrast: @current_user&.prefers_high_contrast?,

config/feature_flags/learning_materials_release_flags.yml

@@ -5,13 +5,6 @@ rce_mentions_in_discussions:
   description: |-
     When enabled, turns on "@mention" functionality in course discussions.
   applies_to: SiteAdmin
-rce_a11y_checker_notifications:
-  state: allowed
-  display_name: Accessibility Checker Notifications
-  description: |-
-    Show accessibility checker notifications while editing.
-  applies_to: Course
-  root_opt_in: true
 new_equation_editor:
   state: hidden
   display_name: RCE's new and improved equation editor dialog

packages/canvas-rce/src/rce/RCE.js

@@ -56,7 +56,6 @@ const RCE = forwardRef(function RCE(props, rceRef) {
     textareaClassName,
     rcsProps,
     use_rce_buttons_and_icons,
-    use_rce_a11y_checker_notifications,
     onFocus,
     onBlur,
     onInit,
@@ -97,7 +96,6 @@ const RCE = forwardRef(function RCE(props, rceRef) {
       textareaClassName,
       trayProps: rcsProps,
       use_rce_buttons_and_icons,
-      use_rce_a11y_checker_notifications,
       editorOptions: Object.assign(editorOptions, editorOptions, {
         selector: `#${textareaId}`,
         height,
@@ -192,8 +190,6 @@ RCE.propTypes = {
   rcsProps: trayPropTypes,
   // enable the custom buttons feature (temporary until the feature is forced on)
   use_rce_buttons_and_icons: bool,
-  // enable the a11y checker notifications (temporary until the feature is forced on)
-  use_rce_a11y_checker_notifications: bool,
   // event handlers
   onFocus: func, // f(RCEWrapper component)
   onBlur: func, // f(event)
@@ -214,7 +210,6 @@ RCE.defaultProps = {
   mirroredAttrs: {},
   readOnly: false,
   use_rce_buttons_and_icons: true,
-  use_rce_a11y_checker_notifications: true,
   onFocus: () => {},
   onBlur: () => {},
   onContentChange: () => {},

packages/canvas-rce/src/rce/RCEWrapper.js

@@ -274,8 +274,7 @@ class RCEWrapper extends React.Component {
     instRecordDisabled: PropTypes.bool,
     highContrastCSS: PropTypes.arrayOf(PropTypes.string),
     maxInitRenderedRCEs: PropTypes.number,
-    use_rce_buttons_and_icons: PropTypes.bool,
-    use_rce_a11y_checker_notifications: PropTypes.bool
+    use_rce_buttons_and_icons: PropTypes.bool
   }
 
   static defaultProps = {
@@ -370,18 +369,17 @@ class RCEWrapper extends React.Component {
   }
 
   getCanvasUrl() {
-    if(!this.canvasUrl)
-      this.canvasUrl = getCanvasUrl(this.props.trayProps);
+    if (!this.canvasUrl) this.canvasUrl = getCanvasUrl(this.props.trayProps)
 
     return this.canvasUrl.then(url => {
-        if(!url) {
-          console.warn(
-            'Could not determine Canvas base URL.',
-            'Content will be referenced by relative URL.'
-          );
-        }
-        return url;
-      });
+      if (!url) {
+        console.warn(
+          'Could not determine Canvas base URL.',
+          'Content will be referenced by relative URL.'
+        )
+      }
+      return url
+    })
   }
 
   // getCode and setCode naming comes from tinyMCE
@@ -612,8 +610,7 @@ class RCEWrapper extends React.Component {
 
   insertMathEquation(tex) {
     const editor = this.mceInstance()
-    return this.getCanvasUrl().then(domain =>
-      contentInsertion.insertEquation(editor, tex, domain));
+    return this.getCanvasUrl().then(domain => contentInsertion.insertEquation(editor, tex, domain))
   }
 
   removePlaceholders(name) {
@@ -882,7 +879,7 @@ class RCEWrapper extends React.Component {
         }
 
         const popups = document.querySelectorAll('[data-mce-component]')
-        for(const popup of popups) {
+        for (const popup of popups) {
           if (popup.contains(document.activeElement)) {
             // one of our popups has focus
             return
@@ -1020,9 +1017,7 @@ class RCEWrapper extends React.Component {
     // document. We need this so that click events get captured properly by instui
     // focus-trapping components, so they properly ignore trapping focus on click.
     editor.on('click', () => window.top.document.body.click(), true)
-    if (this.props.use_rce_a11y_checker_notifications) {
-      editor.on('Cut Paste Change input Undo Redo', debounce(this.handleInputChange, 1000))
-    }
+    editor.on('Cut Paste Change input Undo Redo', debounce(this.handleInputChange, 1000))
     this.announceContextToolbars(editor)
 
     if (this.isAutoSaving) {
@@ -1343,9 +1338,6 @@ class RCEWrapper extends React.Component {
   }
 
   checkAccessibility = () => {
-    if (!this.props.use_rce_a11y_checker_notifications) {
-      return
-    }
     const editor = this.mceInstance()
     editor.execCommand(
       'checkAccessibility',
@@ -1833,7 +1825,6 @@ class RCEWrapper extends React.Component {
           onKBShortcutModalOpen={this.openKBShortcutModal}
           onA11yChecker={this.onA11yChecker}
           onFullscreen={this.handleClickFullscreen}
-          use_rce_a11y_checker_notifications={this.props.use_rce_a11y_checker_notifications}
           a11yBadgeColor={this.theme.canvasBadgeBackgroundColor}
           a11yErrorsCount={this.state.a11yErrorsCount}
         />

packages/canvas-rce/src/rce/StatusBar.js

@@ -53,7 +53,6 @@ StatusBar.propTypes = {
   onKBShortcutModalOpen: func.isRequired,
   onA11yChecker: func.isRequired,
   onFullscreen: func.isRequired,
-  use_rce_a11y_checker_notifications: bool,
   preferredHtmlEditor: oneOf([PRETTY_HTML_EDITOR_VIEW, RAW_HTML_EDITOR_VIEW]),
   readOnly: bool,
   a11yBadgeColor: string,
@@ -188,7 +187,7 @@ export default function StatusBar(props) {
         <IconA11yLine />
       </IconButton>
     )
-    if (!props.use_rce_a11y_checker_notifications || props.a11yErrorsCount <= 0) {
+    if (props.a11yErrorsCount <= 0) {
       return button
     }
     return (
@@ -307,11 +306,7 @@ export default function StatusBar(props) {
               props.onChangeView(isHtmlView() ? WYSIWYG_VIEW : getHtmlEditorView(event))
             }}
             onKeyUp={event => {
-              if (
-                props.editorView === WYSIWYG_VIEW &&
-                event.shiftKey &&
-                event.keyCode === 79
-              ) {
+              if (props.editorView === WYSIWYG_VIEW && event.shiftKey && event.keyCode === 79) {
                 const html_view =
                   preferredHtmlEditor() === RAW_HTML_EDITOR_VIEW
                     ? PRETTY_HTML_EDITOR_VIEW

packages/canvas-rce/src/rce/__tests__/StatusBar.test.js

@@ -125,29 +125,15 @@ describe('RCE StatusBar', () => {
       expect(onChangeView).toHaveBeenCalledWith(RAW_HTML_EDITOR_VIEW)
     })
 
-    it('a11y checker start with no notifications if flag is disabled', () => {
-      const props = defaultProps({
-        use_rce_a11y_checker_notifications: false
-      })
-      const {getByTitle} = renderStatusBar(props)
-      const a11yButton = getByTitle('Accessibility Checker')
-      const sibling = a11yButton.parentElement.children[1]
-      expect(sibling.id.includes('Badge')).toBeFalsy()
-    })
-
-    it('a11y checker start with no notifications if flag is enabled', () => {
-      const props = defaultProps({
-        use_rce_a11y_checker_notifications: true
-      })
-      const {getByTitle} = renderStatusBar(props)
+    it('a11y checker start with no notifications', () => {
+      const {getByTitle} = renderStatusBar(defaultProps())
       const a11yButton = getByTitle('Accessibility Checker')
       const sibling = a11yButton.parentElement.children[1]
       expect(sibling.id.includes('Badge')).toBeFalsy()
     })
 
-    it('a11y checker start set a notification count if flag is enabled', () => {
+    it('a11y checker start set a notification count', () => {
       const props = defaultProps({
-        use_rce_a11y_checker_notifications: true,
         a11yErrorsCount: 5
       })
       const {rerender, getByTitle} = renderStatusBar(props)
@@ -159,9 +145,8 @@ describe('RCE StatusBar', () => {
       expect(notificationBadge.textContent).toEqual('10')
     })
 
-    it('a11y checker set max notifications count if flag is enabled', () => {
+    it('a11y checker set max notifications count', () => {
       const props = defaultProps({
-        use_rce_a11y_checker_notifications: true,
         a11yErrorsCount: 999
       })
       const {getByTitle} = renderStatusBar(props)

spec/selenium/rcs/rce_next_spec.rb

@@ -930,8 +930,7 @@ describe "RCE next tests", ignore_js_errors: true do
         expect(a11y_checker_tray).to be_displayed
       end
 
-      it "with the rce_a11y_checker_notifications flag on should show notification badge" do
-        Account.site_admin.enable_feature! :rce_a11y_checker_notifications
+      it "shows notification badge" do
         visit_front_page_edit(@course)
 
         switch_to_html_view
@@ -958,23 +957,6 @@ describe "RCE next tests", ignore_js_errors: true do
         ).to be_truthy
       end
 
-      it "with the rce_a11y_checker_notifications flag off should show not notification badge" do
-        Account.site_admin.disable_feature! :rce_a11y_checker_notifications
-        visit_front_page_edit(@course)
-
-        switch_to_html_view
-        switch_to_raw_html_editor
-        html_view = f("textarea#wiki_page_body")
-        html_view.send_keys('<img src="image.jpg" alt="image.jpg" />')
-        switch_to_editor_view
-
-        expect(
-          wait_for_no_such_element(method: nil, timeout: 5) do
-            fxpath('//button[@data-btn-id="rce-a11y-btn"]/following-sibling::span')
-          end
-        ).to be_truthy
-      end
-
       it "opens keyboard shortcut modal when clicking button in status bar" do
         visit_front_page_edit(@course)
 

ui/shared/rce/react/CanvasRce.js

@@ -132,7 +132,6 @@ const CanvasRce = forwardRef(function CanvasRce(props, rceRef) {
       onContentChange={onContentChange}
       onInit={onInit}
       use_rce_buttons_and_icons={shouldUseFeature(Feature.ButtonsAndIcons, window.ENV)}
-      use_rce_a11y_checker_notifications={!!window.ENV?.use_rce_a11y_checker_notifications}
       {...rest}
     />
   )

ui/shared/rce/serviceRCELoader.js

@@ -192,8 +192,7 @@ const RCELoader = {
       instRecordDisabled: ENV.RICH_CONTENT_INST_RECORD_TAB_DISABLED,
       maxInitRenderedRCEs: tinyMCEInitOptions.maxInitRenderedRCEs,
       highContrastCSS: window.ENV?.url_for_high_contrast_tinymce_editor_css,
-      use_rce_buttons_and_icons: shouldUseFeature(Feature.ButtonsAndIcons, window.ENV),
-      use_rce_a11y_checker_notifications: !!window.ENV?.use_rce_a11y_checker_notifications
+      use_rce_buttons_and_icons: shouldUseFeature(Feature.ButtonsAndIcons, window.ENV)
     }
   }
 }