Set visual focus indicator on the iframe

[kolkheang]

Summary

Set visual focus indicator on the iframe when focus/blur style is given by consumers. This change would allow keyboard only users to see where the focus is on the page and navigate the page with a better user experience for accessibility.

Additional Details

By default, the auto resize logic is used to size the content appropriately. However, this library also has option to set fixedWidth and fixedHeight which may not fully display the content in the viewport. With that as the case, scrolling is needed to see the content. For a better user experience for keyboard only users, we should have a way to display the visual focus indicator on the frame so the users know that the focus is on the frame and can start using the arrow keys to scroll the content as needed.

[Gagerdude]

One more question: the intention is to only add these focus styles when the iframe can't otherwise be targeted with keyboard navigation - and iframes that we can navigate or scroll using the keyboard before this change will be unaffected?

[kolkheang]

One more question: the intention is to only add these focus styles when the iframe can't otherwise be targeted with keyboard navigation - and iframes that we can navigate or scroll using the keyboard before this change will be unaffected?

Yeah, no change visually to the existing browser's frame functionality. You can still tab through and get to the interactable element inside of the frame like before and scroll (if scrollable).

The condition that would have the tabIndex=0 set on the embedded page, and the new outline style on the frame is when:

• the embedded page doesn't have any interactable element inside
• the content is scrollable (has more scroll height than client height)
• the iframe has scrolling config set to yes or auto (default)

[jfrhong]

[celebrate] Jennifer Hong reacted to your message:

…

________________________________ From: Gage Phillips ***@***.***> Sent: Wednesday, November 29, 2023 10:06:35 PM To: cerner/xfc ***@***.***> Cc: Jennifer Hong ***@***.***>; Manual ***@***.***> Subject: [External] : Re: [cerner/xfc] Set visual focus indicator on the iframe (PR #96) Merged #96<https://urldefense.com/v3/__https://github.com/cerner/xfc/pull/96__;!!ACWV5N9M2RV99hQ!LdI-3wBKi6oG_lCv_jOMg1_9pO-aJawZgkUxRS3f9vYhX11Xg5n3QGpO5MnfbL7JH4C9NoitDWSW1CUdUcqe96RVbKg$> into master. — Reply to this email directly, view it on GitHub<https://urldefense.com/v3/__https://github.com/cerner/xfc/pull/96*event-11101975129__;Iw!!ACWV5N9M2RV99hQ!LdI-3wBKi6oG_lCv_jOMg1_9pO-aJawZgkUxRS3f9vYhX11Xg5n3QGpO5MnfbL7JH4C9NoitDWSW1CUdUcqeHPNLXy4$>, or unsubscribe<https://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/AC5RGCMGNHKYYVYYC44425LYG6WWXAVCNFSM6AAAAAA6YGFZNKVHI2DSMVQWIX3LMV45UABCJFZXG5LFIV3GK3TUJZXXI2LGNFRWC5DJN5XDWMJRGEYDCOJXGUYTEOI__;!!ACWV5N9M2RV99hQ!LdI-3wBKi6oG_lCv_jOMg1_9pO-aJawZgkUxRS3f9vYhX11Xg5n3QGpO5MnfbL7JH4C9NoitDWSW1CUdUcqeUJRF4BY$>. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>