itemengine-cypress-automation 1.0.132 → 1.0.133

package/cypress/e2e/ILC/ShortTextResponseNew/additionalSettings.js

@@ -1,5 +1,10 @@
 import { shortTextResponsePage } from "../../../pages";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const fontSizes = { 'Tiny': '12px', 'Small': '14px', 'Default': '16px', 'Normal': '18px', 'Big': '22px', 'Huge': '26px' };
+const clipboardFunctions = ['Cut', 'Copy', 'Paste'];
 
 describe('Create Item page - Short text response - drag and drop: Additional settings', () => {
     before(() => {
@@ -14,30 +19,358 @@ describe('Create Item page - Short text response - drag and drop: Additional set
             cy.barsPreLoaderWait();
         });
 
-        shortTextResponsePage.tests.verifyAdditonalSettingsAccordionProperties();
+        shortTextResponsePage.tests.verifyAdditionalSettingsAccordionProperties();
+    });
+
+    describe('Additional settings: Student response area and layout', () => {
+        abortEarlySetup();
+        before(() => {
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            cy.barsPreLoaderWait();
+            shortTextResponsePage.steps.expandAdditionalSettings();
+        });
+
+        shortTextResponsePage.tests.verifyStudentResponseAreaAndLayoutLabelAndCSS();
+    });
+
+    describe('Additional settings: Clipboard functions - contents', () => {
+        abortEarlySetup();
+        before(() => {
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            cy.barsPreLoaderWait();
+            shortTextResponsePage.steps.expandAdditionalSettings();
+        });
+
+        it('Clipboard functions label should be displayed', () => {
+            utilities.verifyInnerText(shortTextResponsePage.clipboardFunctionLabel(), 'Clipboard functions');
+            utilities.verifyElementVisibilityState(shortTextResponsePage.clipboardFunctionLabel(), 'visible');
+        });
+
+        it(`3 clipboard function buttons ${clipboardFunctions.join(', ')} should be displayed and by default all of them should be in selected`, () => {
+            for (var i = 0; i < 3; i++) {
+                shortTextResponsePage.steps.verifyClipBoardButton(i);
+            }
+        });
+
+        clipboardFunctions.forEach((functionName, index) => {
+            it(`When user hovers over '${functionName}' clipboard function button, then tooltip '${functionName}' should be displayed`, () => {
+                shortTextResponsePage.clipboardFunctionButton(index)
+                    .verifyTooltip(functionName);
+            });
+        });
+
+        it('User should be able to unselect all the buttons', () => {
+            for (var i = 0; i < 3; i++) {
+                shortTextResponsePage.steps.unselectClipboardFunctionButton(i);
+            }
+        });
+    });
+
+    describe('Additional settings: Placeholder text', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to short text response - question type');
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            cy.barsPreLoaderWait();
+            shortTextResponsePage.steps.expandAdditionalSettings();
+        });
+
+        it('\'Placeholder text\' label and input field should be displayed and by default the input field should be empty', () => {
+            utilities.verifyInnerText(shortTextResponsePage.placeholderTextLabel(), 'Placeholder text');
+            utilities.verifyElementVisibilityState(shortTextResponsePage.placeholderTextLabel(), 'visible');
+            utilities.verifyInnerText(shortTextResponsePage.placeholderTextInputField(), '');
+        });
+
+        it('CSS of \'Placeholder text\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(shortTextResponsePage.placeholderTextLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            })
+            utilities.verifyCSS(shortTextResponsePage.placeholderTextInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            })
+            utilities.verifyCSS(shortTextResponsePage.clipboardFunctionButton(0), {
+                'background-color': css.color.activeButtons,
+                'border': `1px solid ${css.color.activeButtons}`
+            });
+        });
+
+        it('Accessibility of \'Placeholder text\' section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(shortTextResponsePage.placeholderTextLabel().parent('[class*="ShortTextResponsestyle__PlaceholderWrapper"]'))
+        });
+
+        it('When \'Placeholder text\' input field is empty then no \'Placeholder text\' should be displayed in the specify correct answer response field', () => {
+            shortTextResponsePage.steps.verifyPlaceholderAttributeInSpecifyCorrectAnswerSectionResponseFieldEmpty();
+        });
+
+        it('When the user adds a text in the Placeholder input field, the added placeholder should be displayed in the specify correct answer response field', () => {
+            shortTextResponsePage.steps.enterTextInPlaceholderTextInputField('Enter correct answer');
+            shortTextResponsePage.steps.verifyPlaceholderTextAnswerInputFieldSpecifyCorrectAnswerSection('Enter correct answer');
+        });
+
+        it('Accessibility of \'Placeholder text\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(shortTextResponsePage.answerInputFieldSpecifyCorrectAnswerSection());
+        });
+
+        it('When the user enters text in the response field, then the placeholder text should disappear and on clearing the input field the placeholder text should re-appear for the specify correct answer section response fields', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldSpecifyCorrectAnswerSection('Flower');
+            shortTextResponsePage.steps.verifyPlaceholderAttributeInSpecifyCorrectAnswerSectionResponseFieldNotExists();
+            shortTextResponsePage.steps.clearAndFocusOutOfSpecifyCorrectAnswerInputField();
+            shortTextResponsePage.steps.verifyPlaceholderTextAnswerInputFieldSpecifyCorrectAnswerSection('Enter correct answer');
+        });
+
+        it('When the user clears the placeholder text input field, the placeholder text should get removed from the specify correct answer section response fields', () => {
+            shortTextResponsePage.steps.clearAndFocusOutOfPlaceholderTextInputField();
+            shortTextResponsePage.steps.verifyPlaceholderAttributeInSpecifyCorrectAnswerSectionResponseFieldEmpty();
+        });
+    });
+
+    describe('Additional settings: Placeholder text - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to short text response question type');
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            cy.barsPreLoaderWait();
+            shortTextResponsePage.steps.expandAdditionalSettings();
+            shortTextResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('When \'Placeholder text\' input field is empty then no \'Placeholder text\' should be displayed in the preview tab response field', () => {
+            shortTextResponsePage.steps.verifyPlaceholderAttributeInResponseFieldPreviewTabEmpty();
+        });
+
+        it('When the user adds a text in the Placeholder input field, the added placeholder should be displayed in the preview tab response field', () => {
+            shortTextResponsePage.steps.switchToEditTab();
+            shortTextResponsePage.steps.enterTextInPlaceholderTextInputField('Enter response');
+            shortTextResponsePage.steps.switchToPreviewTab();
+            shortTextResponsePage.steps.verifyPlaceholderTextResponseFieldPreviewTab('Enter response');
+        });
+
+        it('When the user starts typing in the response field, then the placeholder text should disappear and on clearing the input field the placeholder text should re-appear for the preview tab response fields', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldPreviewTab('Flower');
+            shortTextResponsePage.steps.verifyPlaceholderAttributeInResponseFieldPreviewTabNotExists();
+            shortTextResponsePage.steps.clearAndFocusOutOfResponseInputFieldPreviewTab();
+            shortTextResponsePage.steps.verifyPlaceholderTextResponseFieldPreviewTab('Enter response');
+        });
+
+        it('When the user clears the placeholder text input field, the placeholder text should get removed from the preview tab response fields', () => {
+            shortTextResponsePage.steps.switchToEditTab();
+            shortTextResponsePage.steps.clearAndFocusOutOfPlaceholderTextInputField();
+            shortTextResponsePage.steps.switchToPreviewTab();
+            shortTextResponsePage.steps.verifyPlaceholderAttributeInResponseFieldPreviewTabEmpty();
+        });
+    });
+
+    describe('Setting tab: Accessibility section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to short text response question type');
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            shortTextResponsePage.steps.expandAdditionalSettings();
+        });
+
+        it('When the user expands additional settings accordion then \'Accessibility\' label should be displayed', () => {
+            utilities.verifyInnerText(shortTextResponsePage.accessibilityLabel(), 'Accessibility');
+            utilities.verifyElementVisibilityState(shortTextResponsePage.accessibilityLabel(), 'visible');
+        });
+
+        it('In \'Accessibility\' section, \'Flag this question as non-accessible\' label with checkbox should be displayed and it should be unchecked by default', () => {
+            utilities.verifyElementVisibilityState(shortTextResponsePage.flagNonAccessibleCheckbox(), 'exist');
+            utilities.verifyInnerText(shortTextResponsePage.flagNonAccessibleLabel(), 'Flag this question as non-accessible');
+            utilities.verifyElementVisibilityState(shortTextResponsePage.flagNonAccessibleLabel(), 'visible');
+            shortTextResponsePage.steps.verifyFlagThisItemNonAccessibleCheckboxIsUnchecked();
+        });
+
+
+        it('User should be able to check the \'Flag this question as non-accessible\' checkbox', () => {
+            shortTextResponsePage.steps.checkFlagThisItemNonAccessibleCheckbox();
+        });
+
+        it('CSS of \'Accessibility\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(shortTextResponsePage.accessibilityLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(shortTextResponsePage.flagNonAccessibleLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(shortTextResponsePage.flagNonAccessibleCheckbox().parents('.icon-checkbox-selected').find('.checkbox-icon-border-rect'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of checked \'Flag this question as non-accessible\' checkbox', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(shortTextResponsePage.flagNonAccessibleCheckbox());
+        });
     });
 
     describe('Additional settings: Font size contents', () => {
         abortEarlySetup();
         before(() => {
-            cy.log('Navigating to Highlight question type');
+            cy.log('Navigating to short text response question type');
             shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
             cy.barsPreLoaderWait();
-            shortTextResponsePage.steps.expandAdditonalSettings();
+            shortTextResponsePage.steps.expandAdditionalSettings();
         });
 
         shortTextResponsePage.tests.verifyFontSizeSectionContents();
     });
 
+    describe('Additional settings: Font size - Specify correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            cy.barsPreLoaderWait();
+            shortTextResponsePage.steps.addTextInQuestionInstructionsInputField('question instruction');
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldSpecifyCorrectAnswerSection('Correct answer');
+            shortTextResponsePage.steps.allotPoints(10);
+            shortTextResponsePage.steps.expandAdditionalSettings();
+        });
+
+        Object.keys(fontSizes).forEach((option) => {
+            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the preview tab should change to ${fontSizes[option]} accordingly`, () => {
+                shortTextResponsePage.steps.selectFontSizeOptionFromFontSizeDropdown(option);
+                utilities.verifyInnerText(shortTextResponsePage.fontSizeDropdown(), `${option}`);
+                utilities.verifyCSS(shortTextResponsePage.answerInputFieldSpecifyCorrectAnswerSection(), {
+                    'font-size': fontSizes[option]
+                });
+            });
+        });
+    });
+
+    describe('Additional settings: Font size - preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            cy.barsPreLoaderWait();
+            shortTextResponsePage.steps.addTextInQuestionInstructionsInputField('question instruction');
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldSpecifyCorrectAnswerSection('Correct answer');
+            shortTextResponsePage.steps.allotPoints(10);
+            shortTextResponsePage.steps.expandAdditionalSettings();
+        });
+
+        Object.keys(fontSizes).forEach((option) => {
+            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the preview tab should change to ${fontSizes[option]} accordingly`, () => {
+                shortTextResponsePage.steps.selectFontSizeOptionFromFontSizeDropdown(option);
+                utilities.verifyInnerText(shortTextResponsePage.fontSizeDropdown(), `${option}`);
+                shortTextResponsePage.steps.switchToPreviewTab();
+                utilities.verifyCSS(shortTextResponsePage.questionInstructionsText(), {
+                    'font-size': fontSizes[option]
+                });
+                utilities.verifyCSS(shortTextResponsePage.previewTabResponseField(), {
+                    'font-size': fontSizes[option]
+                });
+                utilities.verifyCSS(shortTextResponsePage.characterWordCountLabelPreviewTab(), {
+                    'font-size': fontSizes[option]
+                });
+                shortTextResponsePage.steps.switchToGradingView();
+                utilities.verifyCSS(shortTextResponsePage.previewTabCorrectAnswerLabel(), {
+                    'font-size': fontSizes[option]
+                });
+                utilities.verifyCSS(shortTextResponsePage.previewTabCorrectAnswerResponse(), {
+                    'font-size': fontSizes[option]
+                });
+                shortTextResponsePage.steps.switchToStudentView();
+                shortTextResponsePage.steps.switchToEditTab();
+            });
+        });
+    });
+
     describe('Additional Settings: Details section', () => {
         abortEarlySetup();
         before(() => {
             cy.log('Navigating to fill in the gaps over image - drag and drop question type');
             shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
             cy.barsPreLoaderWait();
-            shortTextResponsePage.steps.expandAdditonalSettings();
+            shortTextResponsePage.steps.expandAdditionalSettings();
         });
 
         shortTextResponsePage.tests.verifyDetailsSection();
     });
+
+    describe('Additional settings: ARIA label', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to short text response - question type');
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            cy.barsPreLoaderWait();
+            shortTextResponsePage.steps.expandAdditionalSettings();
+        });
+
+        it('\'ARIA label\' label and input field should be displayed and by default the input field should be empty', () => {
+            utilities.verifyInnerText(shortTextResponsePage.ariaLabelLabel(), 'ARIA label');
+            utilities.verifyElementVisibilityState(shortTextResponsePage.ariaLabelLabel(), 'visible');
+            utilities.verifyInnerText(shortTextResponsePage.ariaLabelInputField(), '\n');
+        });
+
+        it('CSS of \'ARIA label\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(shortTextResponsePage.ariaLabelLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            })
+            utilities.verifyCSS(shortTextResponsePage.ariaLabelInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            })
+        });
+
+        it('Accessibility of \'ARIA label\' section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(shortTextResponsePage.ariaLabelLabel().parent('.aria-label-wrapper'))
+        });
+
+        it('When \'ARIA label\' input field is empty then input field should have default aria label in the specify correct answer response field', () => {
+            shortTextResponsePage.steps.verifyAnswerInputFieldHasDefaultAriaLabelInSpecifyCorrectAnswerSection();
+        });
+
+        it('When the user adds a text in the ARIA label input field, the added Aria label should be displayed in the specify correct answer response field', () => {
+            shortTextResponsePage.steps.enterTextInARIALabelInputField('Enter correct answer');
+            shortTextResponsePage.steps.verifyAriaLabelAddedResponseFieldSpecifyCorrectAnswerSection('Enter correct answer');
+        });
+
+        it('Accessibility of \'ARIA label\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(shortTextResponsePage.answerInputFieldSpecifyCorrectAnswerSection());
+        });
+
+        it('When the user clears the ARIA label text input field, then input field should have default aria label in the specify correct answer response field', () => {
+            shortTextResponsePage.steps.clearAndFocusOutOfARIALabelInputField();
+            shortTextResponsePage.steps.verifyAnswerInputFieldHasDefaultAriaLabelInSpecifyCorrectAnswerSection();
+        });
+    });
+
+    describe('Additional settings: ARIA label - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to short text response question type');
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            cy.barsPreLoaderWait();
+            shortTextResponsePage.steps.expandAdditionalSettings();
+            shortTextResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('When \'Aria label\' input field is empty then input field should have default aria label in the preview tab', () => {
+            shortTextResponsePage.steps.verifyResponseFieldHasDefaultAriaLabelInPreviewTab();
+        });
+
+        it('When the user adds a text in the ARIA label input field, the added aria label should be displayed in the preview tab response field', () => {
+            shortTextResponsePage.steps.switchToEditTab();
+            shortTextResponsePage.steps.enterTextInARIALabelInputField('Enter response');
+            shortTextResponsePage.steps.switchToPreviewTab();
+            shortTextResponsePage.steps.verifyAriaLabelAddedResponseFieldPreviewTab('Enter response');
+        });
+
+        it('When the user clears the placeholder text input field, the placeholder text should get removed from the preview tab response fields', () => {
+            shortTextResponsePage.steps.switchToEditTab();
+            shortTextResponsePage.steps.clearAndFocusOutOfARIALabelInputField();
+            shortTextResponsePage.steps.switchToPreviewTab();
+            shortTextResponsePage.steps.verifyResponseFieldHasDefaultAriaLabelInPreviewTab();
+        });
+    });
 });

package/cypress/fixtures/constants.js

@@ -9,7 +9,7 @@ const constants = {
     sampleSVGLink: "https://www.svgrepo.com/show/128943/3-flowers.svg",
     CKEditorEquationEditorPopupInputFieldEnteredEquationText: "x=3√8,What is the value of x?",
     CKEditorInputFieldEnteredEquationText: "x=83,What is the value of x?",
-    CKEditorInputFieldEnteredEquationAriaLabel: "x equals the cube root of 8 comma cap w h of A t i s t h of e v A l u e o f x question mark",
+    CKEditorInputFieldEnteredEquationAriaLabel: "x equals the cube root of 8 comma cap w h of A t i s t h of e v A l u e o f x question mark question mark",
     sampleMp3Link: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
     sampleWAVLink: "https://dl.espressif.com/dl/audio/ff-16b-1c-44100hz.wav",
     sampleAACLink: "https://dl.espressif.com/dl/audio/ff-16b-1c-44100hz.aac",

package/cypress/fixtures/theme/ilc.json

@@ -118,7 +118,9 @@
         "darkThemeBtnBg": "rgb(28, 28, 155)",
         "darkThemeBtnBorder": "rgb(117, 51, 255)",
         "lightThemeBtnBg": "rgb(82, 0, 255)",
-        "lightThemeBtnBorder": "rgb(94, 110, 255)"
+        "lightThemeBtnBorder": "rgb(94, 110, 255)",
+        "enabledSwitchBg": "rgb(48, 160, 79)",
+        "geoGebraCanvasBorder": "rgb(102, 102, 102)"
     },
     "fontSize": {
         "extraSmall": "10px",

package/cypress/pages/components/additionalSettingsAccessibilitySectionComponent.js

@@ -0,0 +1,66 @@
+import utilities from "../../support/helpers/utilities";
+
+const selectors = {
+    accessibilityLabel: () => cy.get('[class*="Accessibilitystyles__AccessibilityLabelWrapper"]'),
+    flagNonAccessibleCheckbox: () => cy.get('[class*="Accessibilitystyles__OptionWrapper"] input'),
+    flagNonAccessibleLabel: () => cy.get('[class*="Accessibilitystyles__OptionWrapper"] span[class*="label"]')
+}
+
+const steps = {
+    verifyFlagThisItemNonAccessibleCheckboxIsUnchecked: () => {
+        additionalSettingsAccessibilitySectionComponent.flagNonAccessibleCheckbox()
+            .should('not.be.checked');
+    },
+
+    checkFlagThisItemNonAccessibleCheckbox: () => {
+        additionalSettingsAccessibilitySectionComponent.flagNonAccessibleCheckbox()
+            .click()
+            .should('be.checked');
+    },
+}
+
+const tests = {
+    verifyAdditionalSettingsAccessibilitySection: () => {
+        it('When the user expands additional settings accordion then \'Accessibility\' label should be displayed', () => {
+            utilities.verifyInnerText(additionalSettingsAccessibilitySectionComponent.accessibilityLabel(), 'Accessibility');
+            utilities.verifyElementVisibilityState(additionalSettingsAccessibilitySectionComponent.accessibilityLabel(), 'visible');
+        });
+
+        it('In \'Accessibility\' section, \'Flag this question as non-accessible\' label with checkbox should be displayed and it should be unchecked by default', () => {
+            utilities.verifyElementVisibilityState(additionalSettingsAccessibilitySectionComponent.flagNonAccessibleCheckbox(), 'exist');
+            utilities.verifyInnerText(additionalSettingsAccessibilitySectionComponent.flagNonAccessibleLabel(), 'Flag this question as non-accessible');
+            utilities.verifyElementVisibilityState(additionalSettingsAccessibilitySectionComponent.flagNonAccessibleLabel(), 'visible');
+            additionalSettingsAccessibilitySectionComponent.steps.verifyFlagThisItemNonAccessibleCheckboxIsUnchecked();
+        });
+
+        it('User should be able to check the \'Flag this question as non-accessible\' checkbox', () => {
+            additionalSettingsAccessibilitySectionComponent.steps.checkFlagThisItemNonAccessibleCheckbox();
+        });
+
+        it('CSS of \'Accessibility\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(additionalSettingsAccessibilitySectionComponent.accessibilityLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(additionalSettingsAccessibilitySectionComponent.flagNonAccessibleLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(additionalSettingsAccessibilitySectionComponent.flagNonAccessibleCheckbox().parents('.icon-checkbox-selected').find('.checkbox-icon-border-rect'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of checked \'Flag this question as non-accessible\' checkbox and \'Alternate accessible item id\' input field', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(additionalSettingsAccessibilitySectionComponent.flagNonAccessibleCheckbox());
+        });
+    }
+}
+
+export const additionalSettingsAccessibilitySectionComponent = {
+    ...selectors,
+    steps,
+    tests,
+}