fix(sub-header): add accessibility label to SortButton (#3178)

* fix(sub-header): add accessibility label to SortButton

* fix(sub-header): add IntlShape type

* fix(sub-header): add tests

* fix(sub-header): adjust test names

Author: QingyuChai

src/elements/common/sub-header/SortButton.js

@@ -5,19 +5,31 @@
  */
 
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { injectIntl } from 'react-intl';
+import type { IntlShape } from 'react-intl';
+
 import Button from '../../../components/button';
 import IconSort from '../../../icons/general/IconSort';
-import messages from '../messages';
 import Tooltip from '../Tooltip';
+
+import messages from '../messages';
+
 import './SortButton.scss';
 
-const SortButton = (props: ?Object) => (
-    <Tooltip text={<FormattedMessage {...messages.sort} />}>
-        <Button className="be-btn-sort" type="button" {...props}>
-            <IconSort />
-        </Button>
-    </Tooltip>
-);
+type Props = {
+    intl: IntlShape,
+};
+
+const SortButton = ({ intl, ...rest }: Props) => {
+    const sortMessage = intl.formatMessage(messages.sort);
+    return (
+        <Tooltip text={sortMessage}>
+            <Button aria-label={sortMessage} className="be-btn-sort" type="button" {...rest}>
+                <IconSort />
+            </Button>
+        </Tooltip>
+    );
+};
 
-export default SortButton;
+export { SortButton as SortButtonBase };
+export default injectIntl(SortButton);

src/elements/common/sub-header/__tests__/Sort.test.js

@@ -7,7 +7,7 @@ import SortButton from '../SortButton';
 import messages from '../../messages';
 import { SORT_ASC, SORT_DESC } from '../../../../constants';
 
-describe('elements/SubHeader/Sort', () => {
+describe('elements/common/sub-header/Sort', () => {
     test('should render a button and menu with 4 menu items', () => {
         const wrapper = shallow(<Sort onSortChange={jest.fn()} sortBy="name" sortDirection={SORT_ASC} />);
 

src/elements/common/sub-header/__tests__/SortButton.test.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import Button from '../../../../components/button';
+import IconSort from '../../../../icons/general/IconSort';
+import { SortButtonBase } from '../SortButton';
+
+const intlMock = {
+    formatMessage: jest.fn().mockReturnValue('Sort'),
+};
+
+describe('elements/common/sub-header/SortButton', () => {
+    const getWrapper = () => shallow(<SortButtonBase intl={intlMock} />);
+
+    test('should render IconSort', () => {
+        const wrapper = getWrapper();
+        expect(wrapper.exists(IconSort)).toBe(true);
+    });
+
+    test('should have aria-label "Sort"', () => {
+        const wrapper = getWrapper();
+        const button = wrapper.find(Button);
+        expect(button.prop('aria-label')).toBe('Sort');
+        expect(button.prop('aria-describedby')).toBeFalsy();
+    });
+});

src/elements/common/sub-header/__tests__/SubHeaderRight.test.js

@@ -8,7 +8,7 @@ import { VIEW_FOLDER, VIEW_MODE_GRID } from '../../../../constants';
 
 const getWrapper = props => shallow(<SubHeaderRight {...props} />);
 
-describe('Elements/SubHeader/SubHeaderRight', () => {
+describe('elements/common/sub-header/SubHeaderRight', () => {
     const currentCollection = {
         sortBy: '',
         sortDirection: '',