Merge pull request coralproject#4206 from coralproject/fix/CORL-2731-…

…add-a-message-screen-reader-pronunciation [CORL-2731] Add a message screen reader fix
Lammland · May 23, 2023 · 771fa02 · 771fa02
2 parents 656058d + 9cbe95e
commit 771fa02
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 12 deletions.
diff --git a/src/core/client/stream/tabs/Configure/AddMessage/AddMessageClosed.tsx b/src/core/client/stream/tabs/Configure/AddMessage/AddMessageClosed.tsx
@@ -38,6 +38,7 @@ const AddMessageClosed: FunctionComponent<Props> = ({
           disabled={disableButton}
           upperCase
           data-testid="configure-addMessage"
+          aria-label="Add message"
         >
           Add message
         </Button>

diff --git a/src/core/client/stream/tabs/Configure/AddMessage/AddMessageOpen.tsx b/src/core/client/stream/tabs/Configure/AddMessage/AddMessageOpen.tsx
@@ -169,19 +169,21 @@ const AddMessageOpen: FunctionComponent<Props> = ({
                 >
                   <Localized id="configure-addMessage-cancel">Cancel</Localized>
                 </Button>
-                <Button
-                  className={CLASSES.configureCommentStream.applyButton}
-                  color="primary"
-                  variant="filled"
-                  type="submit"
-                  disabled={submitting || pristine}
-                  upperCase
-                  data-testid="configure-addMessage-submitAdd"
-                >
-                  <Localized id="configure-addMessage-submitAdd">
+                <Localized id="configure-addMessage-submitAdd">
+                  <Button
+                    className={CLASSES.configureCommentStream.applyButton}
+                    color="primary"
+                    variant="filled"
+                    type="submit"
+                    disabled={submitting || pristine}
+                    upperCase
+                    data-testid="configure-addMessage-submitAdd"
+                    aria-label="Add message"
+                  >
                     Add message
-                  </Localized>
-                </Button>
+                  </Button>
+                </Localized>
+
                 {renderSuccess}
               </div>
             )}

diff --git a/src/core/client/stream/test/configure/__snapshots__/renderConfigure.spec.tsx.snap b/src/core/client/stream/test/configure/__snapshots__/renderConfigure.spec.tsx.snap
@@ -170,6 +170,7 @@ to pose a topic, ask a question or make announcements relating to this
 story.
         </div>
         <button
+          aria-label="Add message"
           class="BaseButton-root Button-base Button-filled Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeSmall Button-colorSecondary Button-upperCase coral coral-openCommentStream-openButton"
           data-testid="configure-addMessage"
           data-variant="filled"