DS storybook - Change a11yTitle to aria-label (#5863)

* Change a11yTitle to aria-label

* remove unused imports

* add react import to spinner story

Author: jcfilben

shared/aries-core/src/stories/components/Anchor.stories.tsx

@@ -7,14 +7,14 @@ import {
   textSizesArg,
   reverseArg,
   iconArg,
-  a11yTitleArg,
+  ariaLabelArg,
 } from '../utils/commonArgs';
 
 const meta = {
   title: 'Components/Anchor',
   component: Anchor,
   argTypes: {
-    a11yTitle: a11yTitleArg,
+    'aria-label': ariaLabelArg,
     disabled: disabledArg,
     icon: iconArg,
     label: labelArg,
@@ -34,9 +34,9 @@ export const Default: Story = {
     return <Anchor {...args} />;
   },
   args: {
-    label: 'Link',
+    'aria-label': 'Navigate to link',
     href: '#',
-    a11yTitle: 'Navigate to link',
+    label: 'Link',
   },
   name: 'Anchor',
 };

shared/aries-core/src/stories/components/Avatar.stories.tsx

@@ -1,12 +1,13 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Avatar } from 'grommet';
-import { a11yTitleArg, labelArg } from '../utils/commonArgs';
+import { ariaLabelArg, labelArg } from '../utils/commonArgs';
 
 const meta = {
   title: 'Components/Avatar',
   component: Avatar,
   argTypes: {
-    a11yTitle: a11yTitleArg,
+    'aria-label': ariaLabelArg,
     size: {
       control: { type: 'select' },
       options: ['xsmall', 'small', 'medium', 'large', 'xlarge'],
@@ -22,7 +23,7 @@ export const Default = {
   name: 'Avatar',
   render: args => <Avatar {...args} />,
   args: {
-    a11yTitle: 'Image of Jessica',
+    'aria-label': 'Image of Jessica',
     size: 'medium',
     src: 'https://1.gravatar.com/avatar/5134a384e69b1f9e2ff2f792145b240d714b79c4a0d49ae02874eb5e96802fd8?size=256&d=initials',
   },

shared/aries-core/src/stories/components/Button.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Button } from 'grommet';
 import {
-  a11yTitleArg,
+  ariaLabelArg,
   disabledArg,
   fillArg,
   iconArg,
@@ -13,12 +13,8 @@ import {
 const meta = {
   title: 'Components/Button',
   component: Button,
-  // TODO: Currently does not work as expected due to theme overrides, when supported, remove comments
-  // parameters: {
-  //   layout: 'centered',
-  // },
   argTypes: {
-    a11yTitle: a11yTitleArg,
+    'aria-label': ariaLabelArg,
     active: {
       control: { type: 'boolean' },
     },
@@ -62,7 +58,7 @@ export const Default = {
   name: 'Button',
   // Sets default args for argTypes, story specific args
   args: {
-    a11yTitle: undefined,
+    'aria-label': undefined,
     active: false,
     busy: false,
     disabled: false,

shared/aries-core/src/stories/components/CheckBox.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { CheckBox } from 'grommet';
 import {
   labelArg,
-  a11yTitleArg,
+  ariaLabelArg,
   disabledArg,
   fillArg,
   padArg,
@@ -14,7 +14,7 @@ const meta = {
   title: 'Components/CheckBox',
   component: CheckBox,
   argTypes: {
-    a11yTitle: a11yTitleArg,
+    'aria-label': ariaLabelArg,
     checked: {
       control: { type: 'boolean' },
     },
@@ -39,7 +39,7 @@ export const Default = {
   name: 'CheckBox',
   render: args => <CheckBox {...args} />,
   args: {
-    a11yTitle: undefined,
+    'aria-label': undefined,
     checked: false,
     disabled: false,
     fill: false,

shared/aries-core/src/stories/components/Menu.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Menu } from 'grommet';
 import {
-  a11yTitleArg,
+  ariaLabelArg,
   disabledArg,
   labelArg,
   tShirtSizes,
@@ -12,7 +12,7 @@ const meta = {
   title: 'Components/Menu',
   component: Menu,
   argTypes: {
-    a11yTitle: a11yTitleArg,
+    'aria-label': ariaLabelArg,
     disabled: disabledArg,
 
     items: {
@@ -34,7 +34,7 @@ export const Default = {
   name: 'Menu',
   // Story specific args, sets default args for argTypes
   args: {
-    a11yTitle: undefined,
+    'aria-label': undefined,
     disabled: false,
     items: [
       { label: 'Profile', onClick: () => {} },

shared/aries-core/src/stories/components/RangeInput.stories.tsx

@@ -1,13 +1,14 @@
+import React from 'react';
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { RangeInput } from 'grommet';
-import { a11yTitleArg, disabledArg } from '../utils/commonArgs';
+import { ariaLabelArg, disabledArg } from '../utils/commonArgs';
 
 const meta = {
   title: 'Components/RangeInput',
   component: RangeInput,
   argTypes: {
-    a11yTitle: a11yTitleArg,
+    'aria-label': ariaLabelArg,
     disabled: disabledArg,
     max: {
       control: { type: 'number' },
@@ -41,7 +42,7 @@ export const Default = {
     );
   },
   args: {
-    a11yTitle: 'Select range value',
+    'aria-label': 'Select range value',
     disabled: false,
     max: 100,
     min: 0,

shared/aries-core/src/stories/components/Select.stories.tsx

@@ -1,7 +1,8 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Select } from 'grommet';
 import {
-  a11yTitleArg,
+  ariaLabelArg,
   disabledArg,
   placeholderArg,
 } from '../utils/commonArgs';
@@ -10,7 +11,7 @@ const meta = {
   title: 'Components/Select',
   component: Select,
   argTypes: {
-    a11yTitle: a11yTitleArg,
+    'aria-label': ariaLabelArg,
     clear: {
       control: { type: 'boolean' },
     },
@@ -32,7 +33,7 @@ export const Default = {
   name: 'Select',
   render: args => <Select {...args} />,
   args: {
-    a11yTitle: 'Select a size',
+    'aria-label': 'Select a size',
     clear: false,
     disabled: false,
     open: false,

shared/aries-core/src/stories/components/SelectMultiple.stories.tsx

@@ -1,7 +1,8 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { SelectMultiple } from 'grommet';
 import {
-  a11yTitleArg,
+  ariaLabelArg,
   disabledArg,
   placeholderArg,
   marginArg,
@@ -11,7 +12,7 @@ const meta = {
   title: 'Components/SelectMultiple',
   component: SelectMultiple,
   argTypes: {
-    a11yTitle: a11yTitleArg,
+    'aria-label': ariaLabelArg,
     disabled: disabledArg,
     help: {
       control: { type: 'text' },
@@ -60,7 +61,7 @@ export const Default = {
   name: 'SelectMultiple',
   render: args => <SelectMultiple {...args} />,
   args: {
-    a11yTitle: 'Multiple selection',
+    'aria-label': 'Multiple selection',
     disabled: false,
     help: undefined,
     limit: undefined,

shared/aries-core/src/stories/components/Skeleton.stories.tsx

@@ -1,7 +1,7 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Skeleton } from 'grommet';
 import {
-  a11yTitleArg,
   heightArg,
   marginArg,
   padArg,
@@ -13,7 +13,6 @@ const meta = {
   title: 'Components/Skeleton',
   component: Skeleton,
   argTypes: {
-    a11yTitle: a11yTitleArg,
     height: heightArg,
     margin: marginArg,
     pad: padArg,
@@ -29,7 +28,6 @@ export const Default = {
   name: 'Skeleton',
   render: args => <Skeleton {...args} />,
   args: {
-    a11yTitle: 'Loading content',
     height: 'xxsmall',
     margin: 'small',
     pad: 'small',

shared/aries-core/src/stories/components/Spinner.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Spinner } from 'grommet';