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 6 commits into
base: main
Choose a base branch
from
+7 −3
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
6 commits
Select commit Hold shift + click to select a range
9107d4d
refactor: 💡 add edit-user-details translations
venusang Aug 26, 2025
a30c931
refactor: 💡 change inputs to readonly and update submit button
venusang Aug 26, 2025
15276be
refactor: 💡 move translation to resources for user
venusang Aug 27, 2025
2444f57
refactor: 💡 removed aria-label from button set
venusang Aug 29, 2025
ee255d4
fix: 🐛 Add aria-describedby to Edit user details button
venusang Sep 9, 2025
c41fcfa
refactor: 💡 update translation and removed unnecessary aria
venusang Dec 2, 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 @@ -571,6 +571,9 @@ user:
actions:
add-accounts: Add Accounts
delete: Delete User
edit-details:
button-text: 'Edit User details'
aria-describedby: 'edit-user-details'
Copy link
Collaborator

@ZedLi ZedLi Dec 2, 2025

Choose a reason for hiding this comment

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

I don't think we should have a translation for an 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}}
Copy link
Collaborator

@ZedLi ZedLi Dec 2, 2025

Choose a reason for hiding this comment

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

Where do we pass in @ariaDescribedBy now?

@text={{@enableEditText}}
@color='secondary'
{{on 'click' @enableEdit}}
Expand Down
6 changes: 3 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 @@ -16,7 +16,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 +36,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 +52,7 @@

{{#if (can 'save model' @model)}}
<form.actions
@enableEditText={{t 'actions.edit-form'}}
@enableEditText={{t 'resources.user.actions.edit-details.button-text'}}
Copy link
Collaborator

@ZedLi ZedLi Dec 2, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

I don't believe we need the extra aria-described by stuff since you've already modified the edit text itself to be more descriptive for everyone.

To be clear, I think we have 3 reasonable options here of which only one needs to get done:

  1. Do what you did here and just change the edit text itself to more descriptive
  2. Keep the edit button to just say Edit Form but add an aria-description with the translated string that says Edit Form: Users.
  3. Keep the edit button to just say Edit Form but add an aria-describedby with the ID of the form title, in this case it would be the one here. We would need to add in our own ID for the title so it's not an auto-generated one so we can refer to it with the aria-describedby. We would also need to refactor to remove the DocLink from the title element (and fix the CSS as well) since that content would also be read by the screen reader and instead probably put it in the Badges section like this:
<@header.Title id="header-title">
  {{t 'resources.user.title'}}
</@header.Title>
<@header.Badges>
<DocLink @doc='user' />
</@header.Badges>

Of the three, I think 1 and 2 is easiest but 3 is more convenient as a developer since you don't need to add a new translated string for every edit button, just the ID and refactor of the header. They're all fine at the end of the day though.

@submitText={{t 'actions.save'}}
@cancelText={{t 'actions.cancel'}}
/>
Expand Down
Loading