kolkheang
commented
11 months ago 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
yesorauto(default)
jfrhong
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
fixedWidthandfixedHeightwhich 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.