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 (