fix(content-picker): add accessible names to Footer (#3177)

* chore: add accessible names to Footer

* fix(content-picker): tooltip bug fix

* fix(content-picker): add test

* fix(content-picker): update test

Author: MarieRogers

src/elements/content-picker/Footer.js

@@ -5,8 +5,9 @@
  */
 
 import React from 'react';
+import { injectIntl, FormattedMessage } from 'react-intl';
 import type { Node } from 'react';
-import { FormattedMessage } from 'react-intl';
+
 import type { Collection, BoxItem } from '../../common/types/core';
 import Button from '../../components/button';
 import ButtonGroup from '../../components/button-group';
@@ -24,6 +25,7 @@ type Props = {
     chooseButtonLabel?: string,
     currentCollection: Collection,
     hasHitSelectionLimit: boolean,
+    intl: any,
     isSingleSelect: boolean,
     onCancel: Function,
     onChoose: Function,
@@ -45,6 +47,7 @@ const Footer = ({
     selectedItems,
     onSelectedClick,
     hasHitSelectionLimit,
+    intl,
     isSingleSelect,
     onCancel,
     onChoose,
@@ -53,55 +56,61 @@ const Footer = ({
     children,
     renderCustomActionButtons,
     showSelectedButton,
-}: Props) => (
-    <footer className="bcp-footer">
-        <div className="bcp-footer-left">
-            {showSelectedButton && !isSingleSelect && (
-                <Button className="bcp-selected" onClick={onSelectedClick} type="button">
-                    <FormattedMessage
-                        className="bcp-selected-count"
-                        {...messages.selected}
-                        values={{ count: selectedCount }}
-                    />
-                    {hasHitSelectionLimit && (
-                        <span className="bcp-selected-max">
-                            (<FormattedMessage {...messages.max} />)
-                        </span>
-                    )}
-                </Button>
-            )}
-        </div>
-        <div className="bcp-footer-right">
-            {children}
+}: Props) => {
+    const cancelMessage = intl.formatMessage(messages.cancel);
+    const chooseMessage = intl.formatMessage(messages.choose);
+    return (
+        <footer className="bcp-footer">
+            <div className="bcp-footer-left">
+                {showSelectedButton && !isSingleSelect && (
+                    <Button className="bcp-selected" onClick={onSelectedClick} type="button">
+                        <FormattedMessage
+                            className="bcp-selected-count"
+                            {...messages.selected}
+                            values={{ count: selectedCount }}
+                        />
+                        {hasHitSelectionLimit && (
+                            <span className="bcp-selected-max">
+                                (<FormattedMessage {...messages.max} />)
+                            </span>
+                        )}
+                    </Button>
+                )}
+            </div>
+            <div className="bcp-footer-right">
+                {children}
 
-            {renderCustomActionButtons ? (
-                renderCustomActionButtons({
-                    currentFolderId: currentCollection.id,
-                    currentFolderName: currentCollection.name,
-                    onCancel,
-                    onChoose,
-                    selectedCount,
-                    selectedItems,
-                })
-            ) : (
-                <ButtonGroup className="bcp-footer-actions">
-                    <Tooltip text={cancelButtonLabel || <FormattedMessage {...messages.cancel} />}>
-                        <Button onClick={onCancel} type="button">
-                            <IconClose height={16} width={16} />
-                        </Button>
-                    </Tooltip>
-                    <Tooltip
-                        isDisabled={!selectedCount}
-                        text={chooseButtonLabel || <FormattedMessage {...messages.choose} />}
-                    >
-                        <PrimaryButton isDisabled={!selectedCount} onClick={onChoose} type="button">
-                            <IconCheck color="#fff" height={16} width={16} />
-                        </PrimaryButton>
-                    </Tooltip>
-                </ButtonGroup>
-            )}
-        </div>
-    </footer>
-);
+                {renderCustomActionButtons ? (
+                    renderCustomActionButtons({
+                        currentFolderId: currentCollection.id,
+                        currentFolderName: currentCollection.name,
+                        onCancel,
+                        onChoose,
+                        selectedCount,
+                        selectedItems,
+                    })
+                ) : (
+                    <ButtonGroup className="bcp-footer-actions">
+                        <Tooltip text={cancelButtonLabel || cancelMessage}>
+                            <Button aria-label={cancelMessage} onClick={onCancel} type="button">
+                                <IconClose height={16} width={16} />
+                            </Button>
+                        </Tooltip>
+                        <Tooltip isDisabled={!selectedCount} text={chooseButtonLabel || chooseMessage}>
+                            <PrimaryButton
+                                aria-label={chooseMessage}
+                                isDisabled={!selectedCount}
+                                onClick={onChoose}
+                                type="button"
+                            >
+                                <IconCheck color="#fff" height={16} width={16} />
+                            </PrimaryButton>
+                        </Tooltip>
+                    </ButtonGroup>
+                )}
+            </div>
+        </footer>
+    );
+};
 
-export default Footer;
+export default injectIntl(Footer);

src/elements/content-picker/__tests__/Footer.test.js

@@ -25,6 +25,13 @@ describe('elements/content-picker/Footer', () => {
             expect(wrapper.find('.footer-child').length).toBe(1);
         });
 
+        test('should render Footer buttons with aria-label', () => {
+            const buttons = getWrapper().find('Button');
+
+            expect(buttons.at(0).prop('aria-label')).toBe('Cancel');
+            expect(buttons.at(1).prop('aria-label')).toBe('Choose');
+        });
+
         test('should render Footer with custom action button', () => {
             const renderCustomActionButtons = jest.fn();