Skip to content

Bug - HelperTextItem - Forces screen-reader text #11678

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Closed
Venefilyn opened this issue Mar 14, 2025 · 1 comment · Fixed by #11704
Closed

Bug - HelperTextItem - Forces screen-reader text #11678

Venefilyn opened this issue Mar 14, 2025 · 1 comment · Fixed by #11704
Assignees
Milestone

Comments

@Venefilyn
Copy link
Contributor

Venefilyn commented Mar 14, 2025

Describe the problem
Currently the <HelperTextItem> has a screen reader element in it that has a few issues. Currently the message there feels a bit broken since many will not know about it and what the message says by default. There is also no way to disable it as when you provide an empty screenReaderText prop it will instead render : ; which will be read out to screenreaders and cause confusion.

To us this is restrictive and makes an issue for our test suite and translation tooling. Translating the status message means another value for us to track that isn't needed, requires mapping of the status, and can create issues with some languages where the screenreader text would make more sense in the beginning or simply be in a completely separate element.

How do you reproduce the problem?
See https://www.patternfly.org/components/helper-text

screenReaderText = `${variant} status`,
...props
}: HelperTextItemProps) => {
const Component = component as any;
const isNotDefaultVariant = variant !== 'default';
const defaultIcon = isNotDefaultVariant && defaultVariantIcons[variant];
return (
<Component
className={css(styles.helperTextItem, isNotDefaultVariant && styles.modifiers[variant], className)}
id={id}
{...props}
>
{(defaultIcon || icon) && <span className={css(styles.helperTextItemIcon)}>{icon || defaultIcon}</span>}
<span className={css(styles.helperTextItemText)}>
{children}
{isNotDefaultVariant && <span className="pf-v6-screen-reader">: {screenReaderText};</span>}
</span>

Expected behavior
Few options I can expect

  • The screenreader text is included in an aria attribute instead
  • Screenreader text removed completely
  • screenReaderText can be forbidden to render through a prop or empty prop

I would prefer first or second in the list as the latter means we need to change our codebase a bit

Is this issue blocking you?
Yes. It breaks our tests from PF5 to PF6 and our text already covers what the issue type is. Indicating the status in a screen reader that I can't turn off messes up with screen readers.

What is your product and what release date are you targeting?
Cockpit. Currently migrating to PF6 from PF5 and want it completed by March 28th as we are in a merge and release freeze

Any other information?

@martinpitt
Copy link

The default is <span class="pf-v6-screen-reader">: error status;</span>, so even if the text should be kept, the interpunction needs to be dropped. Thanks!

martinpitt added a commit to martinpitt/cockpit that referenced this issue Mar 14, 2025
Don't consider `.pf-v6-screen-reader` sub-elements of ph_text()
elements. Current PF6 version forces some extra screen-reader only junk:
patternfly/patternfly-react#11678

We will fix this properly (via PF), but it breaks a number of tests.
tomasmatus pushed a commit to Venefilyn/cockpit that referenced this issue Mar 17, 2025
Don't consider `.pf-v6-screen-reader` sub-elements of ph_text()
elements. Current PF6 version forces some extra screen-reader only junk:
patternfly/patternfly-react#11678

We will fix this properly (via PF), but it breaks a number of tests.
@thatblindgeye thatblindgeye moved this from Needs triage to Backlog in PatternFly Issues Mar 20, 2025
@thatblindgeye thatblindgeye self-assigned this Mar 21, 2025
@thatblindgeye thatblindgeye moved this from Backlog to PR Review in PatternFly Issues Mar 21, 2025
@thatblindgeye thatblindgeye added this to the 2025.Q2 milestone Mar 21, 2025
@github-project-automation github-project-automation bot moved this from PR Review to Done in PatternFly Issues Apr 8, 2025
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.

3 participants