Skip to content

[FE-112] Boundary Enterprise a11y audit- User details form #2977

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

[FE-112] Boundary Enterprise a11y audit- User details form #2977

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ed04192
refactor: 💡 add edit-user-details translations
venusang Aug 26, 2025
f7082ea
refactor: 💡 change inputs to readonly and update submit button
venusang Aug 26, 2025
334e7d6
refactor: 💡 move translation to resources for user
venusang Aug 27, 2025
d86805c
refactor: 💡 removed aria-label from button set
venusang Aug 29, 2025
2ec32be
fix: 🐛 Add aria-describedby to Edit user details button
venusang Sep 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions addons/core/translations/resources/en-us.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -570,6 +570,9 @@ user:
actions:
add-accounts: Add Accounts
delete: Delete User
edit-details:
button-text: 'Edit User details'
aria-describedby: 'user-details'
Copy link

@nikkipurcell nikkipurcell Nov 5, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

change aria-describedby to 'edit-user-details' to match button text (if you need aria-describedby).

role:
title: Role
title_plural: Roles
Expand Down
1 change: 1 addition & 0 deletions addons/rose/addon/components/rose/form/actions/edit-toggle/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
{{yield to='edit'}}
{{else}}
<Hds::Button
aria-describedby={{@ariaDescribedBy}}
@text={{@enableEditText}}
@color='secondary'
{{on 'click' @enableEdit}}
Expand Down
10 changes: 7 additions & 3 deletions ui/admin/app/components/form/user/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
}}

<Rose::Form
id={{t 'resources.user.actions.edit-details.aria-describedby'}}
@onSubmit={{@submit}}
@cancel={{@cancel}}
@disabled={{@model.isSaving}}
Expand All @@ -16,7 +17,7 @@
@value={{@model.name}}
@isInvalid={{@model.errors.name}}
@isOptional={{true}}
disabled={{form.disabled}}
readonly={{form.disabled}}
{{on 'input' (set-from-event @model 'name')}}
as |F|
>
Expand All @@ -36,7 +37,7 @@
@value={{@model.description}}
@isInvalid={{@model.errors.description}}
@isOptional={{true}}
disabled={{form.disabled}}
readonly={{form.disabled}}
as |F|
>
<F.Label>{{t 'form.description.label'}}</F.Label>
Expand All @@ -52,7 +53,10 @@

{{#if (can 'save model' @model)}}
<form.actions
@enableEditText={{t 'actions.edit-form'}}
@ariaDescribedBy={{t
Copy link
Collaborator

@ZedLi ZedLi Sep 10, 2025

Choose a reason for hiding this comment

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

I'm not sure I understand why we linked the ID of the form itself, what text are we trying to descriptively add to this by using aria-describedby? It also seems weird to use a translated text as the ID when the element itself should have the translated text

Copy link
Author

@venusang venusang Sep 10, 2025

Choose a reason for hiding this comment

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

I pinged you in the JIRA ticket comment but adding reference here for good measure.

(taking a screenshot so it has more context versus copy paste):

CleanShot 2025-09-10 at 09 25 10@2x

https://hashicorp.atlassian.net/browse/FE-112?focusedCommentId=828913

Copy link
Author

@venusang venusang Sep 10, 2025

Choose a reason for hiding this comment

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

Going off @MelSumner thoughts in the JIRA ticket, I set the form ID value to be user-details versus users since to me it seems to make better sense that the form is specific to the user-details. Users did not seem to make sense to me but maybe I am misunderstanding the purpose here.

It also seems weird to use a translated text as the ID when the element itself should have the translated text

@ZedLi from what I am getting here, it sounds like the form ID value should be semantic versus the ember generated ID. Maybe Melanie could provide some clarity here for both of us. I'm not all that familiar with aria-describedby prior to working on this.

Copy link
Collaborator

@ZedLi ZedLi Sep 10, 2025

Choose a reason for hiding this comment

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

Right, I think all those choices make sense but it sounds like we just need to pick one choice? It seems we could leave the button as Edit form if we're adding one of the aria attributes.

With regards to the current implementation with 3, I was specifically pointing out the fact that it's currently pointing to the form ID instead of something with descriptive text (which melanie suggests as the form title):

where the value is the ID of the form title element (in this case, the element with the text “Users”)

Though that looks like it has some extra text which would pulled in as part of the helper doc link text.

Copy link

@MelSumner MelSumner Sep 10, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

you wouldn't need to translate the element's id attribute value.

Copy link
Author

@venusang venusang Sep 10, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Assuming this is what we are talking about:

<button class="hds-button hds-button--color-primary hds-button--size-medium" type="button">
  <span class="hds-button__text">Button text</span>
  <span aria-description="some description" />
</button>

How would we do this with <Hds::Button />?

https://github.com/hashicorp/design-system/blob/main/packages/components/src/components/hds/button/index.hbs#L42-L44

Copy link
Collaborator

@ZedLi ZedLi Sep 10, 2025

Choose a reason for hiding this comment

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

aria-description would be an attribute on the actual element itself, in this case the button in your example. We wouldn't be passing in a separate element but instead be passing the attribute to the button itself.

i.e.

<button class="hds-button hds-button--color-primary hds-button--size-medium" type="button" aria-description="some description">
  <span class="hds-button__text">Button text</span>
</button>

My only question is if aria-description is OK to use? The docs mention:

Note: aria-description is still in W3C Editor's Draft for ARIA 1.3. For the time being, continue to use aria-describedby, which has been supported since ARIA 1.1.

@MelSumner Do you happen to know if this is something that is just a formality and we're OK to use or we should avoid for now?

Copy link
Author

@venusang venusang Sep 10, 2025

Choose a reason for hiding this comment

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

fwiw, we can actually pass in aria-description into <Hds::Button /> (see ...attributes). I'll wait for @MelSumner to verify whether the code example that @ZedLi provided is acceptable. But I could use some help on what the description should be if we want to go in this direction.

'resources.user.actions.edit-details.aria-describedby'
}}
@enableEditText={{t 'resources.user.actions.edit-details.button-text'}}
@submitText={{t 'actions.save'}}
@cancelText={{t 'actions.cancel'}}
/>
Expand Down