diff --git a/catalog/index.js b/catalog/index.js
index e2d1e3471..4c2d0cc8a 100644
--- a/catalog/index.js
+++ b/catalog/index.js
@@ -801,7 +801,7 @@ const components = [
Label: styled.span`
margin-right: 8px;
`,
- DownArrow: styled.img.attrs({ src: DownArrow })``,
+ DownArrow: styled.img.attrs(props => ({ src: DownArrow }))``,
},
},
{
diff --git a/catalog/listbox/variations.md b/catalog/listbox/variations.md
index 5009e2994..5335ce7ae 100644
--- a/catalog/listbox/variations.md
+++ b/catalog/listbox/variations.md
@@ -17,8 +17,8 @@ state: { isOpen: false, selected: 0 }
>
} styleOverrides={{width: '100px'}}>{browserList[state.selected]}
- {browserList.map((name, index) => {name})}
- Internet Explorer
+ {browserList.map((name, index) => {name})}
+ Internet Explorer
diff --git a/components/accordion/styled-header.jsx b/components/accordion/styled-header.jsx
index 33e701c85..0d38a8db1 100644
--- a/components/accordion/styled-header.jsx
+++ b/components/accordion/styled-header.jsx
@@ -11,10 +11,10 @@ export const HeadingWrapper = styled.div`
renderCustomIndicator ? '[title] 1fr [indicator] min-content' : '[title] auto [space] 0'};
`;
-export const Heading = styled.header.attrs({
+export const Heading = styled.header.attrs(props => ({
role: 'heading',
- 'aria-level': ({ ariaLevel }) => ariaLevel,
-})`
+ 'aria-level': props.ariaLevel,
+}))`
${resetStyles};
grid-column: 1 / span 2;
@@ -23,12 +23,12 @@ export const Heading = styled.header.attrs({
width: 100%;
`;
-export const Button = styled.button.attrs({
+export const Button = styled.button.attrs(props => ({
role: 'button',
- 'aria-expanded': ({ isExpanded }) => isExpanded,
- 'aria-controls': ({ panelId }) => `accordion-panel-${panelId}`,
- id: ({ headerId }) => `accordion-header-${headerId}`,
-})`
+ 'aria-expanded': props.isExpanded,
+ 'aria-controls': `accordion-panel-${props.panelId}`,
+ id: `accordion-header-${props.headerId}`,
+}))`
${resetStyles};
padding: 0;
diff --git a/components/accordion/styled-panel.jsx b/components/accordion/styled-panel.jsx
index b4ffa1711..f60df6126 100644
--- a/components/accordion/styled-panel.jsx
+++ b/components/accordion/styled-panel.jsx
@@ -1,11 +1,11 @@
import styled from 'styled-components';
import { resetStyles } from '../utils';
-export const Panel = styled.div.attrs({
+export const Panel = styled.div.attrs(props => ({
role: 'region',
- 'aria-labelledby': ({ headerId }) => `accordion-header-${headerId}`,
- id: ({ panelId }) => `accordion-panel-${panelId}`,
-})`
+ 'aria-labelledby': `accordion-header-${props.headerId}`,
+ id: `accordion-panel-${props.panelId}`,
+}))`
${resetStyles};
grid-area: panel;
diff --git a/components/button/styled.jsx b/components/button/styled.jsx
index db0e3f7b9..8741807c7 100644
--- a/components/button/styled.jsx
+++ b/components/button/styled.jsx
@@ -9,7 +9,7 @@ const buttonColors = {
disabled: '#bedcf2',
};
-export const ButtonContentWrapper = styled.div.attrs({ tabIndex: '-1' })`
+export const ButtonContentWrapper = styled.div.attrs(_ => ({ tabIndex: '-1' }))`
display: grid;
grid-auto-flow: column;
grid-column-gap: 6px;
diff --git a/components/dropdown/styled.jsx b/components/dropdown/styled.jsx
index a1ce2434e..a395eef61 100644
--- a/components/dropdown/styled.jsx
+++ b/components/dropdown/styled.jsx
@@ -10,12 +10,12 @@ export const DropdownMenuContent = styled.div`
flex-direction: column;
`;
-export const MenuItem = styled.button.attrs({
+export const MenuItem = styled.button.attrs(props => ({
// Menu items should not be in the tab order. They are only reachable by the arrow keys
tabIndex: '-1',
- role: ({ role }) => role || 'menuitem',
+ role: props.role || 'menuitem',
'aria-disabled': ({ isDisabled }) => isDisabled,
-})`
+}))`
${resetStyles};
outline: none;
border: none;
@@ -36,7 +36,7 @@ export const MenuItem = styled.button.attrs({
}
`;
-export const MenuItemContent = styled.span.attrs({ tabIndex: '-1' })`
+export const MenuItemContent = styled.span.attrs(_ => ({ tabIndex: '-1' }))`
${({ isDisabled }) => isDisabled && `color: ${colors.gray22}`};
padding: ${({ styleOverrides }) => styleOverrides.padding || thickness.eight};
@@ -59,10 +59,10 @@ export const MenuItemContent = styled.span.attrs({ tabIndex: '-1' })`
}
`;
-export const MenuSeparator = styled.hr.attrs({
+export const MenuSeparator = styled.hr.attrs(_ => ({
role: 'separator',
'aria-orientation': 'horizontal',
-})`
+}))`
border: 0;
border-top: 1px solid ${colors.gray14};
width: 100%;
diff --git a/components/parameter-sentence/styled.jsx b/components/parameter-sentence/styled.jsx
index 0ee6c1e7e..05e107cc5 100644
--- a/components/parameter-sentence/styled.jsx
+++ b/components/parameter-sentence/styled.jsx
@@ -51,7 +51,7 @@ export const Button = styled.button`
}
`;
-export const ButtonContent = styled.div.attrs({ tabIndex: '-1' })`
+export const ButtonContent = styled.div.attrs(_ => ({ tabIndex: '-1' }))`
${selectStyling};
`;
@@ -77,10 +77,10 @@ export const InputContainer = styled.div`
}
`;
-export const ParameterSentence = styled.form.attrs({
- role: props => (props.isSearchForm ? 'search' : 'form'),
- 'aria-labelledby': ({ labelledBy }) => labelledBy,
-})`
+export const ParameterSentence = styled.form.attrs(props => ({
+ role: props.isSearchForm ? 'search' : 'form',
+ 'aria-labelledby': props.labelledBy,
+}))`
/* stylelint-disable no-empty-block https://github.com/stylelint/stylelint/issues/3494 */
`;
diff --git a/components/popover/styled.jsx b/components/popover/styled.jsx
index 8e9bd1717..cfb71763c 100644
--- a/components/popover/styled.jsx
+++ b/components/popover/styled.jsx
@@ -129,7 +129,7 @@ export const ReferenceContainer = styled.div`
display: inline-block;
`;
-export const FocusCatcher = styled.div.attrs({ tabIndex: '-1' })`
+export const FocusCatcher = styled.div.attrs(_ => ({ tabIndex: '-1' }))`
display: inline-block;
&:focus {
diff --git a/components/tabs/styled.jsx b/components/tabs/styled.jsx
index a1a1177bc..6fcd21780 100644
--- a/components/tabs/styled.jsx
+++ b/components/tabs/styled.jsx
@@ -39,13 +39,13 @@ const selectedTab = css`
border-left: 1px solid ${colors.gray14};
`;
-export const Tab = styled.button.attrs({
+export const Tab = styled.button.attrs(props => ({
role: 'tab',
- 'aria-selected': ({ selected }) => selected,
- 'aria-controls': ({ panelId }) => `panel:${panelId}`,
- 'aria-disabled': ({ disabled }) => disabled,
- tabIndex: ({ selected }) => (selected ? '0' : '-1'),
-})`
+ 'aria-selected': props.selected,
+ 'aria-controls': `panel:${props.panelId}`,
+ 'aria-disabled': props.disabled,
+ tabIndex: props.selected ? '0' : '-1',
+}))`
${resetStyles};
box-shadow: none;
@@ -66,7 +66,7 @@ export const Tab = styled.button.attrs({
}
`;
-export const TabContent = styled.span.attrs({ tabIndex: -1 })`
+export const TabContent = styled.span.attrs(_ => ({ tabIndex: -1 }))`
border-radius: ${borderRadius};
cursor: pointer;
white-space: nowrap;
@@ -86,7 +86,7 @@ export const TabContent = styled.span.attrs({ tabIndex: -1 })`
${({ selected }) => selected && selectedTab};
`;
-export const TabList = styled.div.attrs({ role: 'tablist' })`
+export const TabList = styled.div.attrs(_ => ({ role: 'tablist' }))`
border-bottom: 1px solid ${colors.gray14};
display: flex;
flex-direction: row;
@@ -96,11 +96,11 @@ export const TabList = styled.div.attrs({ role: 'tablist' })`
}
`;
-export const TabPanel = styled.div.attrs({
+export const TabPanel = styled.div.attrs(props => ({
role: 'tabpanel',
- id: ({ panelId }) => `panel:${panelId}`,
- 'aria-expanded': ({ selected }) => selected,
-})`
+ id: `panel:${props.panelId}`,
+ 'aria-expanded': props.selected,
+}))`
position: relative;
padding: ${thickness.eight};
diff --git a/components/text-input-v2/react-select-async.jsx b/components/text-input-v2/react-select-async.jsx
index ddb27e9d2..47e843f53 100644
--- a/components/text-input-v2/react-select-async.jsx
+++ b/components/text-input-v2/react-select-async.jsx
@@ -170,8 +170,8 @@ export const makeAsyncSelect = (SelectComponent: ComponentType<*>) =>
const options = passEmptyOptions
? []
: inputValue && loadedInputValue
- ? loadedOptions
- : defaultOptions || [];
+ ? loadedOptions
+ : defaultOptions || [];
return (
// $FlowFixMe