fix: 🐛 change disabled to readonly for form inputs

[cameronperera]

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-15666

Description

This addresses an a11y issue where we use the disabled attribute on our form inputs when reading a resource. The fix is to update the attribute to readonly. This allows the screen reader to actually see the content and keep the user from being able to edit the details of the resource until they enter edit mode.

This is a small change and as long as there is no disagreement with this approach, I can make a PR that will include a much larger number of fixes.

Screenshots (if appropriate)

Before:

After:

How to Test

Checklist

• I have added before and after screenshots for UI changes
• I have added JSON response output for API changes
• I have added steps to reproduce and test for bug fixes in the description
• I have commented on my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
boundary-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 17, 2024 3:49pm
boundary-ui-desktop	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 17, 2024 3:49pm

[calcaide]

@cameronperera

I do understand the motivation for this change within the a11y goal in mind.
I am not against the change.

That said, I do think, despite it looks small, the 2 attributes provide different behaviours that can be trivial.

• Documentation about readonly
• Documentation about disabled

Also, this is an extended pattern in our codebase and this change can disrupt that, no problem with it, but it might need to be spread within the team.

I do think this could be a topic to discuss within Tech time?

Also, feel free to ping me on this topic, I would like to understand better the issue when using disabled within the a11y context

[cameronperera]

@cameronperera

I do understand the motivation for this change within the a11y goal in mind. I am not against the change.

That said, I do think, despite it looks small, the 2 attributes provide different behaviours that can be trivial.

• Documentation about readonly
• Documentation about disabled

Also, this is an extended pattern in our codebase and this change can disrupt that, no problem with it, but it might need to be spread within the team.

I do think this could be a topic to discuss within Tech time?

Also, feel free to ping me on this topic, I would like to understand better the issue when using disabled within the a11y context

Funny enough I mentioned that in the jira ticket when I did the initial review and I forgot to check my own comment. I add this to the tech time topic list. Until then, I will do some testing in other forms. I know we have some forms that once the value is set, there is no changing it and I think that would be the times we could see issues with the readonly attribute.

[lisbet-alvarez]

Thanks for looking into this, the screen reader now picks it up!!