feat(datagrid): add filter title

[valentin-mladenov]

PR Checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)
• If applicable, have a visual design approval

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

What is the current behavior?

Datagrid filter dialog window have no title.

Issue Number: CDE-2483

What is the new behavior?

Datagrid filter dialog window have title similar to signpost tile position.

Does this PR introduce a breaking change?

• Yes
• No

Other information

[github-actions]

👋 @valentin-mladenov,

• 🙏 The Clarity team thanks you for opening a pull request
• 🎉 The build for this PR has succeeded
• 🔍 The PR is now ready for review
• 🍿 In the meantime, view a preview of this PR
• 🖐 You can always follow up here. If you're a VMware employee, you can also reach us on our internal Clarity Support space

Thank you,

🤖 Clarity Release Bot

[github-actions]

This PR introduces visual changes: b0c3885
If these changes are intended and correct, please cherry-pick the above commit to this PR.

git checkout datagrid-filter-title_cde-2483
git fetch https://github.com/vmware-clarity/ng-clarity.git b0c3885762da2cfea8ca61a279a98a673559f618
git cherry-pick b0c3885762da2cfea8ca61a279a98a673559f618
git push

[github-actions]

This PR introduces visual changes: 93d8fa1
If these changes are intended and correct, please cherry-pick the above commit to this PR.

git checkout datagrid-filter-title_cde-2483
git fetch https://github.com/vmware-clarity/ng-clarity.git 93d8fa1478ab9ad7e4f7a925fe6a024fa31b59ef
git cherry-pick 93d8fa1478ab9ad7e4f7a925fe6a024fa31b59ef
git push

[github-actions]

This PR introduces visual changes: 8dd2c8d
If these changes are intended and correct, please cherry-pick the above commit to this PR.

git checkout datagrid-filter-title_cde-2483
git fetch https://github.com/vmware-clarity/ng-clarity.git 8dd2c8de89bebc62cfea8d1500f877b7fb8f00ac
git cherry-pick 8dd2c8de89bebc62cfea8d1500f877b7fb8f00ac
git push

[kevinbuhmann]

See comments.

Also, the filter form control labels are larger than the filter popup title. I don't think that's correct.

[kevinbuhmann]

Screen reader users might have difficulties with this not marked up as a heading. I'm not sure how to handle the heading level though.

There is an aria-label on the popup element, so maybe this is fine. I just want to make sure.

[kevinbuhmann]

The popup aria-label doesn't have the column name. Maybe that should be changed.

[valentin-mladenov]

The filter trigger already have aria-label similar to the filter title: {COLUMN} filter. That is already announced to the user via screen reader.
Adding the title have more value for the regular user. The title will be read by the screen reader anyway.
First will be popup aria-label and then the title, if I'm not mistaken.

[valentin-mladenov]

See comments.

Also, the filter form control labels are larger than the filter popup title. I don't think that's correct.

The filter title is following the signpost title design spec. I'll double check with design.