Formly Enhancements for JAWS and Icon Functionality

[Sunset05]

Is your feature request related to a problem? Please describe.
I received a mock that has an optional address line 2 as blue text and when clicked an input field for address line two appears and the blue text will disappear. I am using a button with btnType: 'info'.

I am experiencing two main issues:

1. I haven't been able to find a way to notify JAWS that a new field has opened and to focus it
2. The mocks are calling for a plus icon to be placed to the left of the text and I haven't found a way to insert that into the text field

Describe the desired solution
The text has a plus icon to the left and when clicked JAWS is able to focus on the input field that is toggled into the form

Describe alternatives you've considered
I have tried to use DOM manipulation in the props.onClick($event), and the props.onKeyDown($event) to target the formfield and focus() it for JAWS and that has not consistently worked.

for the Icon I have seen implementations using field.props.addonLeft to add icon classes but it did not work and I haven't been able to insert angular icons.

Additional context
Formly button

Hidden field

design mock

[brandydanner-gsa]

Just wanted to check if there are any updates on this? We will need the Street Address 2 component for the Entity Registration Modules MVP.

[yerramshilpa]

@brandydanner-gsa I am still working on it.

[brandydanner-gsa]

@davereed This is also needed for the Entity Registration Modules MVP since we need the Street Address 2 component for Taxpayer Information.

[yerramshilpa]

@brandydanner-gsa I am currently working on it.Will keep you updated

[yerramshilpa]

Here is the demo for the Address form
if you use the below configuration JAWS is reading in an order.

https://github.com/GSA/sam-design-system/blob/formly-address/libs/documentation/src/lib/storybook/formly/custom/formly-forms/formly-forms.component.ts

https://gsa.github.io/sam-design-system/pr-preview/pr-1487/?path=/story/formly-examples-address-form--address-form

[brandydanner-gsa]

@yerramshilpa @davereed I had our tester use JAWS on the Storybook demo linked above, and he still has concerns because the focus is lost after pressing Enter on the "Street Address 2" link. Ideally the focus would go to the input field that appears.

[davereed]

Reopening this issue.

[brandydanner-gsa]

@davereed Any update on if Design Team will be implementing a solution for the focus?

[yerramshilpa]

@brandydanner-gsa I am currently working on this item

[yerramshilpa]

@brandydanner-gsa Here is the demo example of the address line 2 feature, it will be available in an upcoming release.

https://gsa.github.io/sam-design-system/pr-preview/pr-1487/?path=/story/formly-examples-address-form--address-form

[yerramshilpa]

This feature is implemented in @gsa-sam/[email protected] and @gsa-sam/[email protected] and here is the demo
https://gsa.github.io/sam-design-system/?path=/story/formly-examples-address-form--address-form