@salutejs/plasma-new-hope 0.76.3-canary.1180.8720362393.0 → 0.77.0-canary.1185.8720195819.0

package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.stories.tsx

@@ -112,10 +112,10 @@ const StoryNormal = (args: StoryDropdownProps) => {
         }
     };
 
-    const handleSelect = (value: string, text: string) => {
+    const handleSelect = (value: string, text: string, toggleIsOpen: React.Dispatch<React.SetStateAction<boolean>>) => {
         setSelected(value);
         onSelect(value, text);
-        setIsOpen(false);
+        toggleIsOpen(false);
     };
 
     return (
@@ -127,34 +127,51 @@ const StoryNormal = (args: StoryDropdownProps) => {
                 onToggle={onMainToggle}
                 offset={[Number(skidding), Number(distance)]}
                 placement={placement}
+                role="listbox"
                 {...rest}
             >
                 {getDropdownItems('item', 6).map((item) => (
                     <DropdownItem
                         key={item.value}
                         isSelected={Boolean(item.value === selected)}
-                        onSelect={() => handleSelect(item.value, item.child)}
+                        onSelect={() => handleSelect(item.value, item.child, setIsOpen)}
                         onClick={onClick}
                         value={item.value}
+                        role="option"
                     >
                         {item.child}
                     </DropdownItem>
                 ))}
                 <Dropdown
-                    target={<DropdownItem contentRight={DisclosureRightIcon} name="test" text="Nested dropdown" />}
+                    target={
+                        <DropdownItem
+                            contentRight={DisclosureRightIcon}
+                            role="option"
+                            name="test"
+                            text="Nested dropdown"
+                        />
+                    }
                     onToggle={(is) => setIsOpenDropdown2(is)}
                     isOpen={isOpenDropdown2}
+                    role="listbox"
                     offset={[0, 0]}
                     {...rest}
                 >
-                    <DropdownItem contentRight={StyledCheckbox} value="checked" onChange={onChange} text="Checkbox" />
+                    <DropdownItem
+                        contentRight={StyledCheckbox}
+                        role="option"
+                        value="checked"
+                        onChange={onChange}
+                        text="Checkbox"
+                    />
                     {getDropdownItems('nested', 4).map((item) => (
                         <DropdownItem
                             key={item.value}
                             isSelected={Boolean(item.value === selected)}
-                            onSelect={() => handleSelect(item.value, item.child)}
+                            onSelect={() => handleSelect(item.value, item.child, setIsOpenDropdown2)}
                             onClick={onClick}
                             value={item.value}
+                            role="option"
                         >
                             {item.child}
                         </DropdownItem>
@@ -165,6 +182,7 @@ const StoryNormal = (args: StoryDropdownProps) => {
                         value="1"
                         onChange={onChange}
                         text="Radiobox 1"
+                        role="option"
                     />
                     <DropdownItem
                         contentLeft={StyledRadiobox}
@@ -172,14 +190,16 @@ const StoryNormal = (args: StoryDropdownProps) => {
                         value="2"
                         onChange={onChange}
                         text="Radiobox 2"
+                        role="option"
                     />
                 </Dropdown>
 
                 <DropdownItem
                     isSelected={selected === 'disabled'}
-                    onSelect={() => handleSelect('disabled', 'disabled')}
+                    onSelect={() => handleSelect('disabled', 'disabled', setIsOpen)}
                     onClick={onClick}
                     value="disabled"
+                    role="option"
                     disabled
                 >
                     disabled

package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.config.js

@@ -21,7 +21,7 @@ var config = exports.config = {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ";", ";", ":0.8125rem;", ":1rem;", ":0.8125rem;", ":1rem;", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], dropdownSizeCommon, dropdownItemSizeCommon, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight)
     },
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemBackgroundSelected, _Dropdown.dropdownTokens.itemColorSelected, _Dropdown.dropdownTokens.itemBackgroundSelectedHover, _Dropdown.dropdownTokens.itemColorSelectedHover, _Dropdown.dropdownTokens.itemColor)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-accent);", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.focusColor, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemBackgroundSelected, _Dropdown.dropdownTokens.itemColorSelected, _Dropdown.dropdownTokens.itemBackgroundSelectedHover, _Dropdown.dropdownTokens.itemColorSelectedHover, _Dropdown.dropdownTokens.itemColor)
     }
   }
 };

package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.stories.tsx

@@ -92,7 +92,7 @@ const DisclosureRightIcon = (props) => (
     </StyledDisclosureRightIcon>
 );
 
-const StoryTight = (args: StoryDropdownProps) => {
+const StoryNormal = (args: StoryDropdownProps) => {
     const [selected, setSelected] = useState('');
     const [isOpen, setIsOpen] = useState(false);
     const [isOpenDropdown2, setIsOpenDropdown2] = useState(false);
@@ -112,10 +112,10 @@ const StoryTight = (args: StoryDropdownProps) => {
         }
     };
 
-    const handleSelect = (value: string, text: string) => {
+    const handleSelect = (value: string, text: string, toggleIsOpen: React.Dispatch<React.SetStateAction<boolean>>) => {
         setSelected(value);
         onSelect(value, text);
-        setIsOpen(false);
+        toggleIsOpen(false);
     };
 
     return (
@@ -127,35 +127,51 @@ const StoryTight = (args: StoryDropdownProps) => {
                 onToggle={onMainToggle}
                 offset={[Number(skidding), Number(distance)]}
                 placement={placement}
+                role="listbox"
                 {...rest}
             >
                 {getDropdownItems('item', 6).map((item) => (
                     <DropdownItem
                         key={item.value}
                         isSelected={Boolean(item.value === selected)}
-                        onSelect={() => handleSelect(item.value, item.child)}
+                        onSelect={() => handleSelect(item.value, item.child, setIsOpen)}
                         onClick={onClick}
                         value={item.value}
+                        role="option"
                     >
                         {item.child}
                     </DropdownItem>
                 ))}
                 <Dropdown
-                    target={<DropdownItem contentRight={DisclosureRightIcon} name="test" text="Nested dropdown" />}
+                    target={
+                        <DropdownItem
+                            contentRight={DisclosureRightIcon}
+                            role="option"
+                            name="test"
+                            text="Nested dropdown"
+                        />
+                    }
                     onToggle={(is) => setIsOpenDropdown2(is)}
                     isOpen={isOpenDropdown2}
+                    role="listbox"
                     offset={[0, 0]}
-                    isNested
                     {...rest}
                 >
-                    <DropdownItem contentRight={StyledCheckbox} value="checked" onChange={onChange} text="Checkbox" />
+                    <DropdownItem
+                        contentRight={StyledCheckbox}
+                        role="option"
+                        value="checked"
+                        onChange={onChange}
+                        text="Checkbox"
+                    />
                     {getDropdownItems('nested', 4).map((item) => (
                         <DropdownItem
                             key={item.value}
                             isSelected={Boolean(item.value === selected)}
-                            onSelect={() => handleSelect(item.value, item.child)}
+                            onSelect={() => handleSelect(item.value, item.child, setIsOpenDropdown2)}
                             onClick={onClick}
                             value={item.value}
+                            role="option"
                         >
                             {item.child}
                         </DropdownItem>
@@ -166,6 +182,7 @@ const StoryTight = (args: StoryDropdownProps) => {
                         value="1"
                         onChange={onChange}
                         text="Radiobox 1"
+                        role="option"
                     />
                     <DropdownItem
                         contentLeft={StyledRadiobox}
@@ -173,14 +190,16 @@ const StoryTight = (args: StoryDropdownProps) => {
                         value="2"
                         onChange={onChange}
                         text="Radiobox 2"
+                        role="option"
                     />
                 </Dropdown>
 
                 <DropdownItem
                     isSelected={selected === 'disabled'}
-                    onSelect={() => handleSelect('disabled', 'disabled')}
+                    onSelect={() => handleSelect('disabled', 'disabled', setIsOpen)}
                     onClick={onClick}
                     value="disabled"
+                    role="option"
                     disabled
                 >
                     disabled
@@ -190,6 +209,6 @@ const StoryTight = (args: StoryDropdownProps) => {
     );
 };
 
-export const Tight: StoryObj<StoryDropdownProps> = {
-    render: (args) => <StoryTight {...args} />,
+export const Normal: StoryObj<StoryDropdownProps> = {
+    render: (args) => <StoryNormal {...args} />,
 };

package/styled-components/cjs/examples/plasma_web/components/Avatar/Avatar.stories.tsx

@@ -34,38 +34,13 @@ export const Default: Story = {
 };
 
 export const Accessibility: Story = {
-    args: {
-        role: 'button',
-        name: 'Геннадий Силуянович',
-        tabIndex: 0,
-        view: 'default',
-        size: 'xxl',
-        status: 'active',
-        focused: true,
-    },
-};
-
-export const AccessibilityWithURL: Story = {
     args: {
         role: 'button',
         tabIndex: 0,
         view: 'default',
         size: 'xxl',
+        name: 'Иван Фадеев',
         status: 'active',
         focused: true,
-        name: 'Микула Селянинович',
-        url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
-    },
-};
-
-export const AccessibilityWithCustomText: Story = {
-    args: {
-        role: 'button',
-        tabIndex: 0,
-        view: 'default',
-        size: 'xxl',
-        status: 'inactive',
-        focused: true,
-        customText: 'ФИО',
     },
 };

package/styled-components/cjs/examples/plasma_web/components/Dropdown/Normal/Dropdown.config.js

@@ -21,7 +21,7 @@ var config = exports.config = {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ";", ";", ":1.0625rem;", ":1rem;", ":1.0625rem;", ":1rem;", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], dropdownSizeCommon, dropdownItemSizeCommon, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight)
     },
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemBackgroundSelected, _Dropdown.dropdownTokens.itemColorSelected, _Dropdown.dropdownTokens.itemBackgroundSelectedHover, _Dropdown.dropdownTokens.itemColorSelectedHover, _Dropdown.dropdownTokens.itemColor)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-accent);", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.focusColor, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemBackgroundSelected, _Dropdown.dropdownTokens.itemColorSelected, _Dropdown.dropdownTokens.itemBackgroundSelectedHover, _Dropdown.dropdownTokens.itemColorSelectedHover, _Dropdown.dropdownTokens.itemColor)
     }
   }
 };

package/styled-components/cjs/examples/plasma_web/components/Dropdown/Normal/Dropdown.stories.tsx

@@ -112,10 +112,10 @@ const StoryNormal = (args: StoryDropdownProps) => {
         }
     };
 
-    const handleSelect = (value: string, text: string) => {
+    const handleSelect = (value: string, text: string, toggleIsOpen: React.Dispatch<React.SetStateAction<boolean>>) => {
         setSelected(value);
         onSelect(value, text);
-        setIsOpen(false);
+        toggleIsOpen(false);
     };
 
     return (
@@ -127,35 +127,51 @@ const StoryNormal = (args: StoryDropdownProps) => {
                 onToggle={onMainToggle}
                 offset={[Number(skidding), Number(distance)]}
                 placement={placement}
+                role="listbox"
                 {...rest}
             >
                 {getDropdownItems('item', 6).map((item) => (
                     <DropdownItem
                         key={item.value}
                         isSelected={Boolean(item.value === selected)}
-                        onSelect={() => handleSelect(item.value, item.child)}
+                        onSelect={() => handleSelect(item.value, item.child, setIsOpen)}
                         onClick={onClick}
                         value={item.value}
+                        role="option"
                     >
                         {item.child}
                     </DropdownItem>
                 ))}
                 <Dropdown
-                    target={<DropdownItem contentRight={DisclosureRightIcon} name="test" text="Nested dropdown" />}
+                    target={
+                        <DropdownItem
+                            contentRight={DisclosureRightIcon}
+                            role="option"
+                            name="test"
+                            text="Nested dropdown"
+                        />
+                    }
                     onToggle={(is) => setIsOpenDropdown2(is)}
                     isOpen={isOpenDropdown2}
+                    role="listbox"
                     offset={[0, 0]}
-                    isNested
                     {...rest}
                 >
-                    <DropdownItem contentRight={StyledCheckbox} value="checked" onChange={onChange} text="Checkbox" />
+                    <DropdownItem
+                        contentRight={StyledCheckbox}
+                        role="option"
+                        value="checked"
+                        onChange={onChange}
+                        text="Checkbox"
+                    />
                     {getDropdownItems('nested', 4).map((item) => (
                         <DropdownItem
                             key={item.value}
                             isSelected={Boolean(item.value === selected)}
-                            onSelect={() => handleSelect(item.value, item.child)}
+                            onSelect={() => handleSelect(item.value, item.child, setIsOpenDropdown2)}
                             onClick={onClick}
                             value={item.value}
+                            role="option"
                         >
                             {item.child}
                         </DropdownItem>
@@ -166,6 +182,7 @@ const StoryNormal = (args: StoryDropdownProps) => {
                         value="1"
                         onChange={onChange}
                         text="Radiobox 1"
+                        role="option"
                     />
                     <DropdownItem
                         contentLeft={StyledRadiobox}
@@ -173,14 +190,16 @@ const StoryNormal = (args: StoryDropdownProps) => {
                         value="2"
                         onChange={onChange}
                         text="Radiobox 2"
+                        role="option"
                     />
                 </Dropdown>
 
                 <DropdownItem
                     isSelected={selected === 'disabled'}
-                    onSelect={() => handleSelect('disabled', 'disabled')}
+                    onSelect={() => handleSelect('disabled', 'disabled', setIsOpen)}
                     onClick={onClick}
                     value="disabled"
+                    role="option"
                     disabled
                 >
                     disabled

package/styled-components/cjs/examples/plasma_web/components/Dropdown/Tight/Dropdown.config.js

@@ -21,7 +21,7 @@ var config = exports.config = {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ";", ";", ":0.8125rem;", ":1rem;", ":0.8125rem;", ":1rem;", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], dropdownSizeCommon, dropdownItemSizeCommon, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight)
     },
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemBackgroundSelected, _Dropdown.dropdownTokens.itemColorSelected, _Dropdown.dropdownTokens.itemBackgroundSelectedHover, _Dropdown.dropdownTokens.itemColorSelectedHover, _Dropdown.dropdownTokens.itemColor)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-accent);", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.focusColor, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemBackgroundSelected, _Dropdown.dropdownTokens.itemColorSelected, _Dropdown.dropdownTokens.itemBackgroundSelectedHover, _Dropdown.dropdownTokens.itemColorSelectedHover, _Dropdown.dropdownTokens.itemColor)
     }
   }
 };

package/styled-components/cjs/examples/plasma_web/components/Dropdown/Tight/Dropdown.stories.tsx

@@ -92,7 +92,7 @@ const DisclosureRightIcon = (props) => (
     </StyledDisclosureRightIcon>
 );
 
-const StoryTight = (args: StoryDropdownProps) => {
+const StoryNormal = (args: StoryDropdownProps) => {
     const [selected, setSelected] = useState('');
     const [isOpen, setIsOpen] = useState(false);
     const [isOpenDropdown2, setIsOpenDropdown2] = useState(false);
@@ -112,10 +112,10 @@ const StoryTight = (args: StoryDropdownProps) => {
         }
     };
 
-    const handleSelect = (value: string, text: string) => {
+    const handleSelect = (value: string, text: string, toggleIsOpen: React.Dispatch<React.SetStateAction<boolean>>) => {
         setSelected(value);
         onSelect(value, text);
-        setIsOpen(false);
+        toggleIsOpen(false);
     };
 
     return (
@@ -127,35 +127,51 @@ const StoryTight = (args: StoryDropdownProps) => {
                 onToggle={onMainToggle}
                 offset={[Number(skidding), Number(distance)]}
                 placement={placement}
+                role="listbox"
                 {...rest}
             >
                 {getDropdownItems('item', 6).map((item) => (
                     <DropdownItem
                         key={item.value}
                         isSelected={Boolean(item.value === selected)}
-                        onSelect={() => handleSelect(item.value, item.child)}
+                        onSelect={() => handleSelect(item.value, item.child, setIsOpen)}
                         onClick={onClick}
                         value={item.value}
+                        role="option"
                     >
                         {item.child}
                     </DropdownItem>
                 ))}
                 <Dropdown
-                    target={<DropdownItem contentRight={DisclosureRightIcon} name="test" text="Nested dropdown" />}
+                    target={
+                        <DropdownItem
+                            contentRight={DisclosureRightIcon}
+                            role="option"
+                            name="test"
+                            text="Nested dropdown"
+                        />
+                    }
                     onToggle={(is) => setIsOpenDropdown2(is)}
                     isOpen={isOpenDropdown2}
+                    role="listbox"
                     offset={[0, 0]}
-                    isNested
                     {...rest}
                 >
-                    <DropdownItem contentRight={StyledCheckbox} value="checked" onChange={onChange} text="Checkbox" />
+                    <DropdownItem
+                        contentRight={StyledCheckbox}
+                        role="option"
+                        value="checked"
+                        onChange={onChange}
+                        text="Checkbox"
+                    />
                     {getDropdownItems('nested', 4).map((item) => (
                         <DropdownItem
                             key={item.value}
                             isSelected={Boolean(item.value === selected)}
-                            onSelect={() => handleSelect(item.value, item.child)}
+                            onSelect={() => handleSelect(item.value, item.child, setIsOpenDropdown2)}
                             onClick={onClick}
                             value={item.value}
+                            role="option"
                         >
                             {item.child}
                         </DropdownItem>
@@ -166,6 +182,7 @@ const StoryTight = (args: StoryDropdownProps) => {
                         value="1"
                         onChange={onChange}
                         text="Radiobox 1"
+                        role="option"
                     />
                     <DropdownItem
                         contentLeft={StyledRadiobox}
@@ -173,14 +190,16 @@ const StoryTight = (args: StoryDropdownProps) => {
                         value="2"
                         onChange={onChange}
                         text="Radiobox 2"
+                        role="option"
                     />
                 </Dropdown>
 
                 <DropdownItem
                     isSelected={selected === 'disabled'}
-                    onSelect={() => handleSelect('disabled', 'disabled')}
+                    onSelect={() => handleSelect('disabled', 'disabled', setIsOpen)}
                     onClick={onClick}
                     value="disabled"
+                    role="option"
                     disabled
                 >
                     disabled
@@ -190,6 +209,6 @@ const StoryTight = (args: StoryDropdownProps) => {
     );
 };
 
-export const Tight: StoryObj<StoryDropdownProps> = {
-    render: (args) => <StoryTight {...args} />,
+export const Normal: StoryObj<StoryDropdownProps> = {
+    render: (args) => <StoryNormal {...args} />,
 };

package/styled-components/cjs/examples/sds_engineer/components/Avatar/Avatar.stories.tsx

@@ -30,36 +30,10 @@ export const Default: Story = {
 export const Accessibility: Story = {
     args: {
         role: 'button',
-        name: 'Геннадий Силуянович',
         tabIndex: 0,
         view: 'default',
         size: 'xxl',
-        status: 'active',
-        focused: true,
-    },
-};
-
-export const AccessibilityWithURL: Story = {
-    args: {
-        role: 'button',
-        tabIndex: 0,
-        view: 'default',
-        size: 'xxl',
-        status: 'active',
-        focused: true,
-        name: 'Микула Селянинович',
-        url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
-    },
-};
-
-export const AccessibilityWithCustomText: Story = {
-    args: {
-        role: 'button',
-        tabIndex: 0,
-        view: 'default',
-        size: 'xxl',
-        status: 'inactive',
+        name: 'Иван Фадеев',
         focused: true,
-        customText: 'ФИО',
     },
 };

package/styled-components/es/components/Avatar/Avatar.js

@@ -1,11 +1,5 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["size", "name", "url", "customText", "status", "className", "focused", "isScalable", "statusDict"];
+var _excluded = ["size", "name", "url", "customText", "status", "className", "focused", "isScalable"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { forwardRef, useMemo } from 'react';
@@ -18,10 +12,6 @@ import { base, Wrapper, Image, StatusIcon, Text } from './Avatar.styles';
 import { base as viewCSS } from './variations/_size/base';
 import { base as focusedCSS } from './variations/_focused/base';
 import { getInitialsForName } from './utils';
-var StatusDictDefault = {
-  active: 'Активен',
-  inactive: 'Неактивен'
-};
 var getAvatarContent = function getAvatarContent(_ref) {
   var customText = _ref.customText,
     url = _ref.url,
@@ -38,27 +28,6 @@ var getAvatarContent = function getAvatarContent(_ref) {
   }
   return /*#__PURE__*/React.createElement(Text, null, initials);
 };
-var getAriaLabel = function getAriaLabel(props) {
-  var customText = props.customText,
-    url = props.url,
-    name = props.name,
-    status = props.status,
-    ariaLabelProp = props['aria-label'],
-    role = props.role,
-    statusDict = props.statusDict;
-
-  // INFO: В этих сценариях aria-label не нужен
-  if (customText || !role || role !== 'button') {
-    return undefined;
-  }
-
-  // INFO: включаем aria-label чтобы озвучить что на изображении
-  if (url) {
-    var ariaLabel = !ariaLabelProp || ariaLabelProp.trim() === '' ? name : ariaLabelProp;
-    return status ? "".concat(ariaLabel, ". ").concat(statusDict[status]) : ariaLabel;
-  }
-  return undefined;
-};
 var mergedConfig = /*#__PURE__*/mergeConfig(indicatorConfig);
 var Indicator = /*#__PURE__*/component(mergedConfig);
 var StyledIndicator = /*#__PURE__*/styled(Indicator).withConfig({
@@ -78,22 +47,14 @@ export var avatarRoot = function avatarRoot(Root) {
       _props$focused = props.focused,
       focused = _props$focused === void 0 ? true : _props$focused,
       isScalable = props.isScalable,
-      _props$statusDict = props.statusDict,
-      statusDict = _props$statusDict === void 0 ? StatusDictDefault : _props$statusDict,
       rest = _objectWithoutProperties(props, _excluded);
     var initials = useMemo(function () {
       return getInitialsForName(name);
     }, [name]);
-    var ariaLabel = useMemo(function () {
-      return getAriaLabel(_objectSpread(_objectSpread({}, props), {}, {
-        statusDict: statusDict
-      }));
-    }, [name, url, rest.role, status, customText, statusDict, rest['aria-label']]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       ref: ref,
       size: avatarSize,
       className: cx(classes.avatarItem, className),
-      "aria-label": ariaLabel,
       focused: focused
     }, rest), /*#__PURE__*/React.createElement(Wrapper, {
       isScalable: isScalable
@@ -103,7 +64,6 @@ export var avatarRoot = function avatarRoot(Root) {
       initials: initials,
       name: name
     })), status && /*#__PURE__*/React.createElement(StatusIcon, null, /*#__PURE__*/React.createElement(StyledIndicator, {
-      "aria-label": statusDict[status],
       status: status
     })));
   });