Skip to content

Commit

Permalink
fix(TextField): adjust position of maxLength's screen reader label (#…
Browse files Browse the repository at this point in the history 
…1283)

See comments in [jira's ticket](https://jira.tid.es/browse/OBVIVO-2634)
  • Loading branch information
@marcoskolodny
marcoskolodny authored Oct 30, 2024
1 parent b68f317 commit fda424e
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 13 deletions.
10 changes: 7 additions & 3 deletions src/text-field-base.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,8 @@ export const TextFieldBase = React.forwardRef<any, TextFieldBaseProps>(
preventCopy = preventCopy ?? preventCopyInFormFields;
const reactId = React.useId();
const id = idProp || reactId;
const helperTextid = React.useId();
const leftHelperTextid = React.useId();
const rightHelperTextid = React.useId();

const [inputState, setInputState] = React.useState<InputState>(
defaultValue?.length || value?.length ? 'filled' : 'default'
Expand Down Expand Up @@ -317,7 +318,8 @@ export const TextFieldBase = React.forwardRef<any, TextFieldBaseProps>(
<HelperText
error={error}
leftText={helperText}
id={helperTextid}
leftTextId={leftHelperTextid}
rightTextId={rightHelperTextid}
rightText={multiline && maxLength ? `${characterCount}/${maxLength}` : undefined}
rightTextLabel={
multiline && maxLength
Expand Down Expand Up @@ -439,7 +441,9 @@ export const TextFieldBase = React.forwardRef<any, TextFieldBaseProps>(
defaultValue,
value,
...(error && {'aria-invalid': true}),
...(helperText && {'aria-describedby': helperTextid}),
...((helperText || (multiline && maxLength)) && {
'aria-describedby': `${leftHelperTextid} ${rightHelperTextid}`,
}),
...(preventCopy && {
onCopy: preventCopyHandler,
onCut: preventCopyHandler,
Expand Down
22 changes: 12 additions & 10 deletions src/text-field-components.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,16 +81,18 @@ type HelperTextProps = {
rightText?: string;
rightTextLabel?: string;
error?: boolean;
id?: string;
leftTextId?: string;
rightTextId?: string;
children?: void;
};

export const HelperText = ({
leftText,
leftTextId,
rightText,
rightTextId,
rightTextLabel,
error,
id,
}: HelperTextProps): JSX.Element => {
const isInverse = useIsInverseOrMediaVariant();
const leftColor = isInverse
Expand All @@ -112,7 +114,7 @@ export const HelperText = ({
<IconWarningRegular color={leftColor} className={styles.warnIcon} />
</Text1>
)}
<Text1 color={leftColor} regular id={id}>
<Text1 color={leftColor} regular id={leftTextId}>
{leftText}
</Text1>
</p>
Expand All @@ -122,20 +124,20 @@ export const HelperText = ({
className={classnames(styles.helperText, {[styles.rightHelperText]: !!leftText})}
data-testid="endHelperText"
>
{rightTextLabel && (
<ScreenReaderOnly>
<span>{rightTextLabel}</span>
</ScreenReaderOnly>
)}
<Text1
color={rightColor}
regular
as="p"
textAlign="right"
wordBreak={false}
aria-hidden={rightTextLabel !== undefined}
id={rightTextId}
>
{rightText}
{rightTextLabel && (
<ScreenReaderOnly>
<span>{rightTextLabel}</span>
</ScreenReaderOnly>
)}
<span aria-hidden={rightTextLabel !== undefined}>{rightText}</span>
</Text1>
</div>
)}
Expand Down

1 comment on commit fda424e

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deploy preview for mistica-web ready!

✅ Preview
https://mistica-1wynh3ku3-flows-projects-65bb050e.vercel.app

Built with commit fda424e.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.