Update ts and storybook

UNRELEASED.md

@@ -31,6 +31,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Adjust `IndexTable` sticky z-index to avoid collisions with focused `TextField` ([#4150](https://github.com/Shopify/polaris-react/pull/4150))
 - Adjust `IndexTable` rows to have a grey hover state when unselected ([#4359](https://github.com/Shopify/polaris-react/pull/4359))
 - Properly support `selected` prop for `Navigation.Item` when `url` prop is not specified ([#4375](https://github.com/Shopify/polaris-react/pull/4375))
+- Fixed an accessibility bug in `Icon` where `aria-label` was used incorrectly ([#4414](https://github.com/Shopify/polaris-react/pull/4414))
 - Fixed a bug in `Option` where the label would cause scrollbars to appear instead of wrapping ([#4411](https://github.com/Shopify/polaris-react/pull/4411))
 
 ### Documentation

package.json

@@ -105,12 +105,12 @@
     "@shopify/sewing-kit": "^0.140.0",
     "@shopify/storybook-a11y-test": "^0.0.1",
     "@size-limit/preset-small-lib": "^4.10.2",
-    "@storybook/addon-a11y": "^6.1.11",
-    "@storybook/addon-console": "^1.2.1",
+    "@storybook/addon-a11y": "^6.3.7",
+    "@storybook/addon-console": "^1.2.3",
     "@storybook/addon-contexts": "^5.3.19",
-    "@storybook/addon-essentials": "^6.1.11",
-    "@storybook/addon-knobs": "^6.1.11",
-    "@storybook/react": "^6.1.11",
+    "@storybook/addon-essentials": "^6.3.7",
+    "@storybook/addon-knobs": "^6.3.0",
+    "@storybook/react": "^6.3.7",
     "@types/enzyme": "^3.10.3",
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/lodash": "^4.14.138",
@@ -152,7 +152,7 @@
     "shx": "^0.3.2",
     "size-limit": "^4.10.2",
     "svgo": "^1.3.0",
-    "typescript": "~4.0.3"
+    "typescript": "~4.3.5"
   },
   "browserslist": [
     "last 3 chrome versions",

src/components/Breadcrumbs/tests/Breadcrumbs.test.tsx

@@ -103,7 +103,9 @@ describe('<Breadcrumbs />', () => {
   it('renders breadcrumb content as a visually hidden label when the new design language is enabled', () => {
     const wrapper = mountWithApp(<Breadcrumbs breadcrumbs={linkBreadcrumbs} />);
 
-    expect(wrapper.find(VisuallyHidden))!.toContainReactText('Products');
+    expect(wrapper).toContainReactComponent(VisuallyHidden, {
+      children: 'Products',
+    });
   });
 
   it('renders nothing when empty', () => {

src/components/Icon/Icon.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import {VisuallyHidden} from '../VisuallyHidden';
 import {classNames, variationName} from '../../utilities/css';
 import type {IconSource} from '../../types';
 
@@ -86,7 +87,8 @@ export function Icon({source, color, backdrop, accessibilityLabel}: IconProps) {
   };
 
   return (
-    <span className={className} aria-label={accessibilityLabel}>
+    <span className={className}>
+      <VisuallyHidden>{accessibilityLabel}</VisuallyHidden>
       {contentMarkup[sourceType]}
     </span>
   );

src/components/Icon/tests/Icon.test.tsx

@@ -3,17 +3,22 @@ import {PlusMinor} from '@shopify/polaris-icons';
 import {mountWithApp} from 'test-utilities';
 
 import {Icon} from '../Icon';
+import {VisuallyHidden} from '../../VisuallyHidden';
 
 describe('<Icon />', () => {
   describe('accessibilityLabel', () => {
     it('uses the label as the aria-label for the icon', () => {
+      const label = 'This is an icon';
       const element = mountWithApp(
-        <Icon source="placeholder" accessibilityLabel="This is an icon" />,
+        <Icon source="placeholder" accessibilityLabel={label} />,
       ).find('span');
 
-      expect(element).toHaveReactProps({'aria-label': 'This is an icon'});
+      expect(element).toContainReactComponent(VisuallyHidden, {
+        children: label,
+      });
     });
   });
+
   describe('source', () => {
     it("renders a placeholder div when source is set to 'placeholder'", () => {
       const element = mountWithApp(<Icon source="placeholder" />);