Terra-core: Button outline styles inside of modal

[Matt-Butler]

Issue Description

Buttons inside the modal do not display an outline when active. However, when the modal is full screen, the buttons do display an outline when active.

Issue Type

• [ ] New Feature
• [ ] Enhancement
• [x] Bug
• [ ] Other

Expected Behavior

Buttons inside the modal display an outline when active.

Current Behavior

Buttons inside the modal do not display an outline when active. However, when the modal is full screen, the buttons do display an outline when active.

Steps to Reproduce

1. Navigate to the modal examples using safari.
2. Open the modal and tab through the focusable elements (you may need to turn on keyboard navigation for safari)

Safari: The tab key is being pressed but the button does not display as active

Chrome:

Environment

• Component Version: Button v0 and Modal v0
• Browser Name and Version: Safari
• Operating System and version (desktop or mobile): Mac OSX

[Matt-Butler]

@bjankord suggested we investigate adding outline styles instead of using the browsers default focus outline

[emilyrohrbough]

As of right now, some sort of outline style will need to be applied to selectable list items when an item contains a chevron. Because of this I think it would be a good idea to set our own outline.

[bjankord]

I lean towards using the browser's default styles for focus outlines, but in this case, it looks like there is an issue in Safari that is causing the focus outline not to render on the button element in this use case. This causes a usability / accessibility issue making it difficult to visually see which button is in focus within non-fullscreen modals.

I'd suggest we take a page from Bootstrap and remove the outline from <Button /> components on focus and provide our own focus outline.

[emilyrohrbough]

I took a look. It seems the css styling bottom: auto is disabling the focus in Safari for modals of fixed size.

EDIT: This only seems to be an issue for the modal examples. The modal-manger examples with buttons appear to work as expected.

[neilpfeiffer]

+1 @emilyrohrbough, what we need to adjust so we can remove bottom: auto

[emilyrohrbough]

@neilpfeiffer and I have done some digging and have found a few things:

• the first focusably element located at the bottom left corner will not receive focus styles but other elements will
• adding padding: 10px to the inner content will allow the focus styles to apply

[bjankord]

Tech Design

• Add inline styles for 15px padding to div here to push in demo content https://github.com/cerner/terra-core/blob/master/packages/terra-site/src/examples/modal/ModalIsOpened.jsx#L32

• Add inline styles for 15px padding to div here to push in demo content https://github.com/cerner/terra-core/blob/master/packages/terra-site/src/examples/modal/ModalIsFullscreen.jsx#L33

• Add inline styles for 15px padding to div here to push in demo content
  https://github.com/cerner/terra-core/blob/master/packages/terra-site/src/examples/modal/ModalCloseOnOutsideClick.jsx#L33

[emilyrohrbough]

+1