diff --git a/change/@fluentui-react-input-80a0046e-4134-4acd-adfc-9e114bb26396.json b/change/@fluentui-react-input-80a0046e-4134-4acd-adfc-9e114bb26396.json new file mode 100644 index 00000000000000..67743382892724 --- /dev/null +++ b/change/@fluentui-react-input-80a0046e-4134-4acd-adfc-9e114bb26396.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Fix styling issues found in accessibility review", + "packageName": "@fluentui/react-input", + "email": "elcraig@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-input/src/components/Input/useInputStyles.ts b/packages/react-input/src/components/Input/useInputStyles.ts index 253bf2ad42f350..44be8302d3c1e3 100644 --- a/packages/react-input/src/components/Input/useInputStyles.ts +++ b/packages/react-input/src/components/Input/useInputStyles.ts @@ -97,6 +97,11 @@ const useRootStyles = makeStyles({ // This is if the user clicks the field again while it's already focused borderBottomColor: tokens.colorCompoundBrandStrokePressed, }, + ':focus-within': { + outlineWidth: '2px', + outlineStyle: 'solid', + outlineColor: 'transparent', + }, }, small: { minHeight: fieldHeights.small, @@ -167,8 +172,12 @@ const useRootStyles = makeStyles({ }, disabled: { cursor: 'not-allowed', + backgroundColor: tokens.colorTransparentBackground, ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled), ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius + '@media (forced-colors: active)': { + ...shorthands.borderColor('GrayText'), + }, }, }); @@ -176,6 +185,7 @@ const useInputElementStyles = makeStyles({ base: { boxSizing: 'border-box', flexGrow: 1, + minWidth: 0, // required to make the input shrink to fit the wrapper ...shorthands.borderStyle('none'), // input itself never has a border (this is handled by inputWrapper) ...shorthands.padding('0', horizontalSpacing.xxs), color: tokens.colorNeutralForeground1, diff --git a/packages/react-input/src/stories/InputAppearance.stories.tsx b/packages/react-input/src/stories/InputAppearance.stories.tsx index fa5a19af5a3b02..5042fe2e063e4e 100644 --- a/packages/react-input/src/stories/InputAppearance.stories.tsx +++ b/packages/react-input/src/stories/InputAppearance.stories.tsx @@ -1,14 +1,21 @@ import * as React from 'react'; import { Label } from '@fluentui/react-label'; import { useId } from '@fluentui/react-utilities'; -import { makeStyles } from '@fluentui/react-make-styles'; +import { makeStyles, shorthands } from '@fluentui/react-make-styles'; +import { tokens } from '@fluentui/react-theme'; import { Input } from '../index'; const useStyles = makeStyles({ root: { '& label': { display: 'block', paddingBottom: '2px' }, - '& label:not(:first-child)': { paddingTop: '20px' }, + // filledLighter and filledDarker appearances depend on particular background colors, + // so the story includes wrapper divs around the example of each appearance + '> div': { ...shorthands.padding('20px'), ...shorthands.borderRadius('20px') }, + '> div:not(:first-child)': { paddingTop: '10px' }, }, + filledDarker: { backgroundColor: tokens.colorNeutralBackground1 }, + // ideally should match doc site, #faf9f8 + filledLighter: { backgroundColor: tokens.colorNeutralBackground2 }, }); export const Appearance = () => { @@ -20,17 +27,25 @@ export const Appearance = () => { return (
- - +
+ + +
- - +
+ + +
- - +
+ + +
- - +
+ + +
); }; diff --git a/packages/react-input/src/stories/InputContentBeforeAfter.stories.tsx b/packages/react-input/src/stories/InputContentBeforeAfter.stories.tsx index bdc8fc59e05c4c..ebc85d453866f8 100644 --- a/packages/react-input/src/stories/InputContentBeforeAfter.stories.tsx +++ b/packages/react-input/src/stories/InputContentBeforeAfter.stories.tsx @@ -23,18 +23,13 @@ export const ContentBeforeAfter = () => { return (
- } id={beforeId} placeholder="placeholder" /> + } id={beforeId} /> - } id={afterId} placeholder="placeholder" /> + } id={afterId} /> - } - contentAfter={} - id={bothId} - placeholder="placeholder" - /> + } contentAfter={} id={bothId} />
); }; diff --git a/packages/react-input/src/stories/InputDefault.stories.tsx b/packages/react-input/src/stories/InputDefault.stories.tsx index b0341aa67dc1c9..d33fe1be984c2d 100644 --- a/packages/react-input/src/stories/InputDefault.stories.tsx +++ b/packages/react-input/src/stories/InputDefault.stories.tsx @@ -22,7 +22,6 @@ export const Default = (props: InputProps) => { const argTypes: ArgTypes = { // Add these native props to the props table and controls pane placeholder: { - defaultValue: 'placeholder', description: 'Placeholder text for the input. If using this instead of a label (which is ' + 'not recommended), be sure to provide an `aria-label` for screen reader users.', diff --git a/packages/react-input/src/stories/InputSize.stories.tsx b/packages/react-input/src/stories/InputSize.stories.tsx index 6b30d77e40e849..cd9d84040ddc86 100644 --- a/packages/react-input/src/stories/InputSize.stories.tsx +++ b/packages/react-input/src/stories/InputSize.stories.tsx @@ -22,17 +22,17 @@ export const Size = () => { - + - + - + ); };