From 341001e30a9cef01613ac6c5314482a3b8549730 Mon Sep 17 00:00:00 2001
From: Martin Yosifov <martin.yosifov@instructure.com>
Date: Wed, 9 Mar 2022 18:07:28 -0800
Subject: [PATCH] Hide Horizontal Separator from screen readers

closes OUT-5016
flag=individual_outcome_rating_and_calculation

Test plan:
- Enable Improved Outcomes Management FF
- Enable Individual Outcome Rating and Calculation FF
- Disable Account Level Mastery Scales FF
- Go to Account > Outcomes and open devtools -> Elements
- Click on Create button and in the Create modal select the
horizonal separator between Proficiency Ratings and Calc Method
- Verify in the Elements tab that the corresponding <hr />
element has aria-hidden="true" attribute
- Select an outcome and click on kebab menu -> Edit
- In the Edit modal select the horizontal separator between
Proficiency Ratings and Calculation Method
- Verify in the Elements tab that the corresponding <hr />
element has aria-hidden="true" attribute

Change-Id: I4c9b13b33900a4ac2892791fa6ff441dedda4c94
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/286738
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Kyle Rosenbaum <krosenbaum@instructure.com>
QA-Review: Angela Gomba <angela.gomba@instructure.com>
Product-Review: Ben Friedman <ben.friedman@instructure.com>
---
 .../outcome_management/react/CreateOutcomeModal.js    |  6 +++++-
 .../react/Management/OutcomeEditModal.js              |  8 +++++++-
 .../Management/__tests__/OutcomeEditModal.test.js     | 11 +++++++++++
 .../react/__tests__/CreateOutcomeModal.test.js        |  8 ++++++++
 4 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/ui/features/outcome_management/react/CreateOutcomeModal.js b/ui/features/outcome_management/react/CreateOutcomeModal.js
index ba3e38d66c1..e281059fc5e 100644
--- a/ui/features/outcome_management/react/CreateOutcomeModal.js
+++ b/ui/features/outcome_management/react/CreateOutcomeModal.js
@@ -277,7 +277,11 @@ const CreateOutcomeModal = ({isOpen, onCloseHandler, onSuccess, starterGroupId})
                 canManage
               />
               <View as="div" minHeight="14rem">
-                <hr style={{margin: '1rem 0 0'}} />
+                <hr
+                  style={{margin: '1rem 0 0'}}
+                  aria-hidden="true"
+                  data-testid="outcome-create-modal-horizontal-divider"
+                />
                 <ProficiencyCalculation
                   update={updateProficiencyCalculation}
                   setError={setProficiencyCalculationError}
diff --git a/ui/features/outcome_management/react/Management/OutcomeEditModal.js b/ui/features/outcome_management/react/Management/OutcomeEditModal.js
index 66a46482116..514483b3761 100644
--- a/ui/features/outcome_management/react/Management/OutcomeEditModal.js
+++ b/ui/features/outcome_management/react/Management/OutcomeEditModal.js
@@ -279,7 +279,13 @@ const OutcomeEditModal = ({outcome, isOpen, onCloseHandler, onEditLearningOutcom
                 canManage={!!attributesEditable.individualRatings}
               />
               <View as="div" minHeight={attributesEditable.calculationMethod ? '14rem' : '5rem'}>
-                {attributesEditable.calculationMethod && <hr style={{margin: '1rem 0 0'}} />}
+                {attributesEditable.calculationMethod && (
+                  <hr
+                    style={{margin: '1rem 0 0'}}
+                    aria-hidden="true"
+                    data-testid="outcome-edit-modal-horizontal-divider"
+                  />
+                )}
                 <ProficiencyCalculation
                   method={{
                     calculationMethod: proficiencyCalculationMethod,
diff --git a/ui/features/outcome_management/react/Management/__tests__/OutcomeEditModal.test.js b/ui/features/outcome_management/react/Management/__tests__/OutcomeEditModal.test.js
index f450220852f..15e6c459ed3 100644
--- a/ui/features/outcome_management/react/Management/__tests__/OutcomeEditModal.test.js
+++ b/ui/features/outcome_management/react/Management/__tests__/OutcomeEditModal.test.js
@@ -443,6 +443,17 @@ describe('OutcomeEditModal', () => {
           type: 'success'
         })
       })
+
+      it('displays horizontal divider between ratings and calculation method which is hidden from screen readers', async () => {
+        const {getByTestId} = renderWithProvider({
+          env: {
+            contextType: 'Account',
+            contextId: '1',
+            individualOutcomeRatingAndCalculationFF: true
+          }
+        })
+        expect(getByTestId('outcome-edit-modal-horizontal-divider')).toBeInTheDocument()
+      })
     })
 
     describe('when feature flag disabled', () => {
diff --git a/ui/features/outcome_management/react/__tests__/CreateOutcomeModal.test.js b/ui/features/outcome_management/react/__tests__/CreateOutcomeModal.test.js
index 418f80c4237..bfbd9da2697 100644
--- a/ui/features/outcome_management/react/__tests__/CreateOutcomeModal.test.js
+++ b/ui/features/outcome_management/react/__tests__/CreateOutcomeModal.test.js
@@ -520,6 +520,14 @@ describe('CreateOutcomeModal', () => {
               })
             })
           })
+
+          it('displays horizontal divider between ratings and calculation method which is hidden from screen readers', async () => {
+            const {getByTestId} = render(<CreateOutcomeModal {...defaultProps()} />, {
+              individualOutcomeRatingAndCalculationFF: true
+            })
+            await act(async () => jest.runOnlyPendingTimers())
+            expect(getByTestId('outcome-create-modal-horizontal-divider')).toBeInTheDocument()
+          })
         })
 
         describe('when feature flag disabled', () => {