chore(textInputGroup): add unique aria labels to examples by Mash707 · Pull Request #7713 · patternfly/patternfly

Mash707 · 2025-08-01T06:08:11Z

Mash707 · 2025-08-01T06:11:48Z

@thatblindgeye For now I have added aria-labels to text-input-group-main but I think we should rather add these to text-input-group-text-input since it adds a aria-label by default (this means that there are two aria-labels which I think we should not have). Let me know what you think.

patternfly/src/patternfly/components/TextInputGroup/text-input-group-text-input.hbs

Lines 24 to 31 in 2147287

    
               aria-label=" 
        
                 {{~#if text-input-group-text-input--aria-label~}} 
        
                   {{text-input-group-text-input--aria-label}} 
        
                 {{~else if text-input-group--IsDisabled~}} 
        
                   Disabled text input group example input 
        
                 {{~else~}} 
        
                   Type to filter 
        
                 {{~/if}}"

Based on the response I'll update the remaining examples.

patternfly-build · 2025-08-01T06:12:03Z

Preview: https://pf-pr-7713.surge.sh

A11y report: https://pf-pr-7713-a11y.surge.sh

thatblindgeye

One file comment below, and just the following:

For the "Search input group, advanced search expanded" and "Search input group, advanced search expanded with autocomplete" examples, can we just tweak the "Submit" and "Reset" buttons in the examples so those have unique accessible names? We can keep it simple and apply unique ID's to the buttons themselves, then give each button an aria-labelledby that points to itself and the example heading (in that order). The end result should be an accessible name of "Submit Search input group, advanced search expanded" and so on.

thatblindgeye · 2025-08-18T13:36:14Z

+        {{#> badge badge--modifier="pf-m-read"}}
+          <span aria-hidden="true">{{text-input-group--search-input--count}}</span>
+          {{#> screen-reader}}
+            {{#if text-input-group--search-input--IsNavigable}}


Looks like the "Search input group, match with navigable options" doesnt have this passed into it

mcoker

Looks great to me! Just a few small tweaks if you don't mind.

mcoker · 2025-08-18T19:49:17Z

+        {{#if text-input-group--search-input--aria-label}}
+          {{> text-input-group-text-input text-input-group-text-input--aria-label=text-input-group--search-input--aria-label }}
+        {{else}}
+          {{> text-input-group-text-input text-input-group-text-input--aria-label="Search input" }}
+        {{/if}}


FWIW we do have a ternary helper for handlebars that would make this less code

patternfly/scripts/helpers.mjs

Lines 67 to 75 in 9005060

/** Using ternary

if custom value for select--width: {{#> select select--width='160px'}}Filter by name{{/select}}

else custom value for select--width: {{#> select)}}Filter by name{{/select}}

{{#> select select--id=(concat toolbar--id '-select-name') select--width=(ternary toolbar-items-search-filter--width toolbar-items-search-filter--width '175px') select-toggle--icon="fas fa-filter"}}

{{> toolbar-item-search-filter toolbar-items-search-filter--width="300px"}}

*/

export const ternary = (testValue, trueValue, fallback) => {

return testValue ? trueValue : fallback;

};

Suggested change

{{#if text-input-group--search-input--aria-label}}

{{> text-input-group-text-input text-input-group-text-input--aria-label=text-input-group--search-input--aria-label }}

{{else}}

{{> text-input-group-text-input text-input-group-text-input--aria-label="Search input" }}

{{/if}}

{{> text-input-group-text-input text-input-group-text-input--aria-label=(ternary text-input-group--search-input--aria-label text-input-group--search-input--aria-label 'Search input' }}

mcoker · 2025-08-18T19:58:56Z

+      {{#if text-input-group--search-input--clear-button-aria-label}}
+        {{> button
+          button--IsPlain=true
+          button--IsIcon=true
+          button--icon="times fa-fw"
+          button--aria-label=text-input-group--search-input--clear-button-aria-label
+        }}
+      {{else}}
+        {{> button
+          button--IsPlain=true
+          button--IsIcon=true
+          button--icon="times fa-fw"
+          button--aria-label="Clear input"
+        }}
+      {{/if}}


I'd use a ternary here, too

Suggested change

{{#if text-input-group--search-input--clear-button-aria-label}}

{{> button

button--IsPlain=true

button--IsIcon=true

button--icon="times fa-fw"

button--aria-label=text-input-group--search-input--clear-button-aria-label

}}

{{else}}

{{> button

button--IsPlain=true

button--IsIcon=true

button--icon="times fa-fw"

button--aria-label="Clear input"

}}

{{/if}}

{{> button

button--IsPlain=true

button--IsIcon=true

button--icon="times fa-fw"

button--aria-label=(ternary text-input-group--search-input--clear-button-aria-label text-input-group--search-input--clear-button-aria-label "Clear input")

}}

mcoker · 2025-08-18T20:02:11Z

 ### Search input group, match with navigable options
 ```hbs
-{{> text-input-group--search-input text-input-group--id="text-input-group-search-input-group-match-with-navigable-options" text-input-group-text-input--placeholder="Find by name" text-input-group--value="John Doe" text-input-group--search-input--count="1 / 3" text-input-group--search-input--IsFirstMatch="true"}}
+{{> text-input-group--search-input text-input-group--id="text-input-group-search-input-group-match-with-navigable-options" text-input-group-text-input--placeholder="Find by name" text-input-group--value="John Doe" text-input-group--search-input--count="1 / 3" text-input-group--search-input--IsFirstMatch="true" text-input-group--search-input--IsNavigable="true" text-input-group--search-input--aria-label="Search input group match with navigable options" text-input-group--search-input--clear-button-aria-label="Clear search input group match with navigable options"}}


The tiniest nittiest nit, just use true instead of "true" for setting something to true, unless you need to use the string "true" for some reason. In this case it should just be true. Our code is a little inconsistent that way, but we're trying to write all new code omitting the quotes unless you're passing a string to the parameter/attribute.

Suggested change

{{> text-input-group--search-input text-input-group--id="text-input-group-search-input-group-match-with-navigable-options" text-input-group-text-input--placeholder="Find by name" text-input-group--value="John Doe" text-input-group--search-input--count="1 / 3" text-input-group--search-input--IsFirstMatch="true" text-input-group--search-input--IsNavigable="true" text-input-group--search-input--aria-label="Search input group match with navigable options" text-input-group--search-input--clear-button-aria-label="Clear search input group match with navigable options"}}

{{> text-input-group--search-input text-input-group--id="text-input-group-search-input-group-match-with-navigable-options" text-input-group-text-input--placeholder="Find by name" text-input-group--value="John Doe" text-input-group--search-input--count="1 / 3" text-input-group--search-input--IsFirstMatch="true" text-input-group--search-input--IsNavigable=true text-input-group--search-input--aria-label="Search input group match with navigable options" text-input-group--search-input--clear-button-aria-label="Clear search input group match with navigable options"}}

mcoker

🚀

patternfly-build · 2025-08-27T15:18:33Z

🎉 This PR is included in version 6.3.0-prerelease.51 🎉

The release is available on:

Your semantic-release bot 📦🚀

chore(textInputGroup): add unique aria labels to examples

a8712f5

Mash707 added 3 commits August 14, 2025 23:19

chore(text input group): added aria labels and screen reader text

787a75c

chore(text input group): added aria labels for search input examples

2c8af1e

chore(text input group): updated aria labels for buttons

deeb9bb

thatblindgeye requested changes Aug 18, 2025

View reviewed changes

Mash707 added 2 commits August 18, 2025 23:06

chore(text input group): added aria tags for submit and reset buttons

b934998

chore(text input group): added aria tags for submit and reset buttons

6810257

Mash707 requested a review from thatblindgeye August 18, 2025 19:21

chore(text input group): added aria tags for submit and reset buttons

6707b0b

thatblindgeye approved these changes Aug 18, 2025

View reviewed changes

thatblindgeye requested a review from mcoker August 18, 2025 19:39

mcoker approved these changes Aug 18, 2025

View reviewed changes

chore(text input group): added usage of ternary

d7b65a7

mcoker approved these changes Aug 19, 2025

View reviewed changes

thatblindgeye merged commit afa1921 into patternfly:main Aug 19, 2025
4 checks passed

Mash707 deleted the text-input-group-add-aria-labels branch August 22, 2025 19:28

patternfly-build added the released on @prerelease label Aug 27, 2025

This was referenced Jul 22, 2026

The automated release is failing 🚨 #8519

Closed

The automated release is failing 🚨 #8533

Closed

Navigation Menu

chore(textInputGroup): add unique aria labels to examples - #7713

chore(textInputGroup): add unique aria labels to examples#7713
thatblindgeye merged 8 commits into
patternfly:mainfrom
Mash707:text-input-group-add-aria-labels

Mash707 commented Aug 1, 2025

Uh oh!

Mash707 commented Aug 1, 2025 •

edited

Loading

Uh oh!

patternfly-build commented Aug 1, 2025 •

edited

Loading

Uh oh!

thatblindgeye left a comment

Uh oh!

thatblindgeye Aug 18, 2025

Uh oh!

mcoker left a comment

Uh oh!

mcoker Aug 18, 2025

Uh oh!

mcoker Aug 18, 2025

Uh oh!

mcoker Aug 18, 2025

Uh oh!

mcoker left a comment

Uh oh!

Uh oh!

patternfly-build commented Aug 27, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	/** Using ternary
	if custom value for select--width: {{#> select select--width='160px'}}Filter by name{{/select}}
	else custom value for select--width: {{#> select)}}Filter by name{{/select}}
	{{#> select select--id=(concat toolbar--id '-select-name') select--width=(ternary toolbar-items-search-filter--width toolbar-items-search-filter--width '175px') select-toggle--icon="fas fa-filter"}}
	{{> toolbar-item-search-filter toolbar-items-search-filter--width="300px"}}
	*/
	export const ternary = (testValue, trueValue, fallback) => {
	return testValue ? trueValue : fallback;
	};

Conversation

Mash707 commented Aug 1, 2025

Uh oh!

Mash707 commented Aug 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

patternfly-build commented Aug 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

thatblindgeye left a comment

Choose a reason for hiding this comment

Uh oh!

thatblindgeye Aug 18, 2025

Choose a reason for hiding this comment

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker Aug 18, 2025

Choose a reason for hiding this comment

Uh oh!

mcoker Aug 18, 2025

Choose a reason for hiding this comment

Uh oh!

mcoker Aug 18, 2025

Choose a reason for hiding this comment

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

patternfly-build commented Aug 27, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Mash707 commented Aug 1, 2025 •

edited

Loading

patternfly-build commented Aug 1, 2025 •

edited

Loading