From eca64a2ad59bd458c79de7f058f9118b84bb0ea0 Mon Sep 17 00:00:00 2001 From: Gilli Sigurdsson Date: Mon, 1 Jun 2020 16:44:43 +0000 Subject: [PATCH 1/3] chore(icons): update icons to use #000000 and removing white false positives (#6173) --- packages/icons/src/svg/16/checkmark--filled.svg | 2 +- packages/icons/src/svg/16/error--filled.svg | 2 +- packages/icons/src/svg/16/misuse.svg | 2 +- packages/icons/src/svg/16/redo.svg | 3 --- packages/icons/src/svg/16/undo.svg | 3 --- packages/icons/src/svg/16/warning--filled.svg | 2 +- packages/icons/src/svg/20/checkmark--filled.svg | 2 +- packages/icons/src/svg/20/error--filled.svg | 2 +- packages/icons/src/svg/20/misuse.svg | 2 +- packages/icons/src/svg/20/warning--filled.svg | 2 +- packages/icons/src/svg/24/checkmark--filled.svg | 2 +- packages/icons/src/svg/24/checkmark.svg | 2 +- packages/icons/src/svg/24/error--filled.svg | 2 +- packages/icons/src/svg/24/misuse.svg | 2 +- packages/icons/src/svg/24/warning--filled.svg | 2 +- packages/icons/src/svg/32/Q/barrier.svg | 2 +- packages/icons/src/svg/32/add--filled.svg | 2 +- packages/icons/src/svg/32/alarm--add.svg | 2 +- packages/icons/src/svg/32/alarm--subtract.svg | 2 +- packages/icons/src/svg/32/alarm.svg | 2 +- packages/icons/src/svg/32/battery--charging.svg | 2 +- packages/icons/src/svg/32/battery--empty.svg | 2 +- packages/icons/src/svg/32/battery--full.svg | 2 +- packages/icons/src/svg/32/battery--half.svg | 2 +- packages/icons/src/svg/32/battery--low.svg | 2 +- packages/icons/src/svg/32/battery--quarter.svg | 2 +- packages/icons/src/svg/32/bullhorn.svg | 2 +- packages/icons/src/svg/32/center--circle.svg | 2 +- packages/icons/src/svg/32/charging-station--filled.svg | 2 +- packages/icons/src/svg/32/charging-station.svg | 2 +- packages/icons/src/svg/32/checkmark--filled.svg | 2 +- packages/icons/src/svg/32/circle-dash.svg | 2 +- packages/icons/src/svg/32/close--filled.svg | 2 +- packages/icons/src/svg/32/close.svg | 2 +- packages/icons/src/svg/32/devices.svg | 2 +- packages/icons/src/svg/32/drop-photo--filled.svg | 2 +- packages/icons/src/svg/32/drop-photo.svg | 2 +- packages/icons/src/svg/32/error--filled.svg | 2 +- packages/icons/src/svg/32/flow--data.svg | 2 +- packages/icons/src/svg/32/flow--stream.svg | 2 +- packages/icons/src/svg/32/gas-station.svg | 2 +- packages/icons/src/svg/32/logo--glassdoor.svg | 2 +- packages/icons/src/svg/32/logo--medium.svg | 2 +- packages/icons/src/svg/32/logo--tumblr.svg | 2 +- packages/icons/src/svg/32/misuse.svg | 2 +- packages/icons/src/svg/32/mobile--audio.svg | 2 +- packages/icons/src/svg/32/omega.svg | 2 +- packages/icons/src/svg/32/paragraph.svg | 2 +- packages/icons/src/svg/32/recording--filled--alt.svg | 2 +- packages/icons/src/svg/32/recording.svg | 2 +- packages/icons/src/svg/32/redo.svg | 2 +- packages/icons/src/svg/32/sigma.svg | 2 +- packages/icons/src/svg/32/timer.svg | 2 +- packages/icons/src/svg/32/undo.svg | 2 +- packages/icons/src/svg/32/volume--up--filled.svg | 2 +- packages/icons/src/svg/32/volume--up.svg | 2 +- packages/icons/src/svg/32/warning--filled.svg | 2 +- packages/icons/src/svg/32/watch.svg | 2 +- packages/icons/src/svg/32/watson-health/hanging-protocol.svg | 2 +- packages/icons/src/svg/32/watson-health/magnify.svg | 2 +- packages/icons/src/svg/32/watson-health/pet-image--B.svg | 2 +- .../icons/src/svg/32/watson-health/region-analysis--area.svg | 2 +- .../icons/src/svg/32/watson-health/region-analysis--volume.svg | 2 +- packages/icons/src/svg/32/watson-health/smoothing.svg | 2 +- 64 files changed, 62 insertions(+), 68 deletions(-) diff --git a/packages/icons/src/svg/16/checkmark--filled.svg b/packages/icons/src/svg/16/checkmark--filled.svg index 906de6f0ed10..365c67f4639b 100644 --- a/packages/icons/src/svg/16/checkmark--filled.svg +++ b/packages/icons/src/svg/16/checkmark--filled.svg @@ -4,7 +4,7 @@ width="16px" height="16px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"> diff --git a/packages/icons/src/svg/16/error--filled.svg b/packages/icons/src/svg/16/error--filled.svg index 101863bbc99e..26eb23ea61c9 100644 --- a/packages/icons/src/svg/16/error--filled.svg +++ b/packages/icons/src/svg/16/error--filled.svg @@ -4,7 +4,7 @@ width="16px" height="16px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"> diff --git a/packages/icons/src/svg/16/misuse.svg b/packages/icons/src/svg/16/misuse.svg index 0d280aa8d407..94e2fbccfdf4 100644 --- a/packages/icons/src/svg/16/misuse.svg +++ b/packages/icons/src/svg/16/misuse.svg @@ -4,7 +4,7 @@ width="16px" height="16px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"> diff --git a/packages/icons/src/svg/20/error--filled.svg b/packages/icons/src/svg/20/error--filled.svg index fc91de408c76..924cded7c747 100644 --- a/packages/icons/src/svg/20/error--filled.svg +++ b/packages/icons/src/svg/20/error--filled.svg @@ -4,7 +4,7 @@ width="20px" height="20px" viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve"> diff --git a/packages/icons/src/svg/20/misuse.svg b/packages/icons/src/svg/20/misuse.svg index 9579dc4dcc82..22484a072efd 100644 --- a/packages/icons/src/svg/20/misuse.svg +++ b/packages/icons/src/svg/20/misuse.svg @@ -4,7 +4,7 @@ width="20px" height="20px" viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve"> diff --git a/packages/icons/src/svg/24/error--filled.svg b/packages/icons/src/svg/24/error--filled.svg index d16b9e9045f1..48cf0d6b4119 100644 --- a/packages/icons/src/svg/24/error--filled.svg +++ b/packages/icons/src/svg/24/error--filled.svg @@ -4,7 +4,7 @@ width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"> diff --git a/packages/icons/src/svg/24/misuse.svg b/packages/icons/src/svg/24/misuse.svg index 37d5bcfaba2e..1abeb1412eb8 100644 --- a/packages/icons/src/svg/24/misuse.svg +++ b/packages/icons/src/svg/24/misuse.svg @@ -4,7 +4,7 @@ width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"> Q-research--barrier \ No newline at end of file +Q-research--barrier \ No newline at end of file diff --git a/packages/icons/src/svg/32/add--filled.svg b/packages/icons/src/svg/32/add--filled.svg index 77b1849201a3..c4ec1a475906 100644 --- a/packages/icons/src/svg/32/add--filled.svg +++ b/packages/icons/src/svg/32/add--filled.svg @@ -3,7 +3,7 @@ diff --git a/packages/icons/src/svg/32/alarm--add.svg b/packages/icons/src/svg/32/alarm--add.svg index 401c3de46042..7c885379aa7a 100644 --- a/packages/icons/src/svg/32/alarm--add.svg +++ b/packages/icons/src/svg/32/alarm--add.svg @@ -1 +1 @@ -alarm--add \ No newline at end of file +alarm--add \ No newline at end of file diff --git a/packages/icons/src/svg/32/alarm--subtract.svg b/packages/icons/src/svg/32/alarm--subtract.svg index fdeceddd5a50..4b6fc910dcdb 100644 --- a/packages/icons/src/svg/32/alarm--subtract.svg +++ b/packages/icons/src/svg/32/alarm--subtract.svg @@ -1 +1 @@ -alarm--subtract \ No newline at end of file +alarm--subtract \ No newline at end of file diff --git a/packages/icons/src/svg/32/alarm.svg b/packages/icons/src/svg/32/alarm.svg index ce27065b1430..18ddbbb9a543 100644 --- a/packages/icons/src/svg/32/alarm.svg +++ b/packages/icons/src/svg/32/alarm.svg @@ -1 +1 @@ -alarm \ No newline at end of file +alarm \ No newline at end of file diff --git a/packages/icons/src/svg/32/battery--charging.svg b/packages/icons/src/svg/32/battery--charging.svg index e9e77cd465f2..5f62afdfd516 100644 --- a/packages/icons/src/svg/32/battery--charging.svg +++ b/packages/icons/src/svg/32/battery--charging.svg @@ -1 +1 @@ -battery--charging \ No newline at end of file +battery--charging \ No newline at end of file diff --git a/packages/icons/src/svg/32/battery--empty.svg b/packages/icons/src/svg/32/battery--empty.svg index 111dfe8353a7..d2e487139e4d 100644 --- a/packages/icons/src/svg/32/battery--empty.svg +++ b/packages/icons/src/svg/32/battery--empty.svg @@ -1 +1 @@ -battery--empty \ No newline at end of file +battery--empty \ No newline at end of file diff --git a/packages/icons/src/svg/32/battery--full.svg b/packages/icons/src/svg/32/battery--full.svg index 4ef10df29875..748f2207bdb9 100644 --- a/packages/icons/src/svg/32/battery--full.svg +++ b/packages/icons/src/svg/32/battery--full.svg @@ -1 +1 @@ -battery--full \ No newline at end of file +battery--full \ No newline at end of file diff --git a/packages/icons/src/svg/32/battery--half.svg b/packages/icons/src/svg/32/battery--half.svg index e96430243999..089cfa474ac6 100644 --- a/packages/icons/src/svg/32/battery--half.svg +++ b/packages/icons/src/svg/32/battery--half.svg @@ -1 +1 @@ -battery--half-full +battery--half-full diff --git a/packages/icons/src/svg/32/battery--low.svg b/packages/icons/src/svg/32/battery--low.svg index 43c268e90cce..31602ebb11b6 100644 --- a/packages/icons/src/svg/32/battery--low.svg +++ b/packages/icons/src/svg/32/battery--low.svg @@ -1 +1 @@ -battery--low \ No newline at end of file +battery--low \ No newline at end of file diff --git a/packages/icons/src/svg/32/battery--quarter.svg b/packages/icons/src/svg/32/battery--quarter.svg index 0000a2141119..f173ba33e2be 100644 --- a/packages/icons/src/svg/32/battery--quarter.svg +++ b/packages/icons/src/svg/32/battery--quarter.svg @@ -1 +1 @@ -battery--quarter \ No newline at end of file +battery--quarter \ No newline at end of file diff --git a/packages/icons/src/svg/32/bullhorn.svg b/packages/icons/src/svg/32/bullhorn.svg index b1fb634b07fd..7187abd05e1c 100644 --- a/packages/icons/src/svg/32/bullhorn.svg +++ b/packages/icons/src/svg/32/bullhorn.svg @@ -1 +1 @@ -bullhorn \ No newline at end of file +bullhorn \ No newline at end of file diff --git a/packages/icons/src/svg/32/center--circle.svg b/packages/icons/src/svg/32/center--circle.svg index ae44cdf18a54..42aa165b82c7 100644 --- a/packages/icons/src/svg/32/center--circle.svg +++ b/packages/icons/src/svg/32/center--circle.svg @@ -1 +1 @@ -center--circle \ No newline at end of file +center--circle \ No newline at end of file diff --git a/packages/icons/src/svg/32/charging-station--filled.svg b/packages/icons/src/svg/32/charging-station--filled.svg index 28e301511c3e..8b9c661eca08 100644 --- a/packages/icons/src/svg/32/charging-station--filled.svg +++ b/packages/icons/src/svg/32/charging-station--filled.svg @@ -1 +1 @@ -charging-station--filled \ No newline at end of file +charging-station--filled \ No newline at end of file diff --git a/packages/icons/src/svg/32/charging-station.svg b/packages/icons/src/svg/32/charging-station.svg index b562252435a0..b94df458d5ef 100644 --- a/packages/icons/src/svg/32/charging-station.svg +++ b/packages/icons/src/svg/32/charging-station.svg @@ -1 +1 @@ -charging-station \ No newline at end of file +charging-station \ No newline at end of file diff --git a/packages/icons/src/svg/32/checkmark--filled.svg b/packages/icons/src/svg/32/checkmark--filled.svg index 858c59ffed0f..1a4452419a86 100644 --- a/packages/icons/src/svg/32/checkmark--filled.svg +++ b/packages/icons/src/svg/32/checkmark--filled.svg @@ -4,7 +4,7 @@ width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"> diff --git a/packages/icons/src/svg/32/circle-dash.svg b/packages/icons/src/svg/32/circle-dash.svg index 906efe737c00..1b852ef6e32c 100644 --- a/packages/icons/src/svg/32/circle-dash.svg +++ b/packages/icons/src/svg/32/circle-dash.svg @@ -1 +1 @@ -circle--dash \ No newline at end of file +circle--dash \ No newline at end of file diff --git a/packages/icons/src/svg/32/close--filled.svg b/packages/icons/src/svg/32/close--filled.svg index 69c0db53c670..4599765ec91f 100644 --- a/packages/icons/src/svg/32/close--filled.svg +++ b/packages/icons/src/svg/32/close--filled.svg @@ -3,7 +3,7 @@ close \ No newline at end of file +close \ No newline at end of file diff --git a/packages/icons/src/svg/32/devices.svg b/packages/icons/src/svg/32/devices.svg index 3b627b6d9f86..24b011578b5c 100644 --- a/packages/icons/src/svg/32/devices.svg +++ b/packages/icons/src/svg/32/devices.svg @@ -1 +1 @@ -devices \ No newline at end of file +devices \ No newline at end of file diff --git a/packages/icons/src/svg/32/drop-photo--filled.svg b/packages/icons/src/svg/32/drop-photo--filled.svg index 26a31d8a7451..e8248c1e14bf 100644 --- a/packages/icons/src/svg/32/drop-photo--filled.svg +++ b/packages/icons/src/svg/32/drop-photo--filled.svg @@ -1 +1 @@ -drop-photo--filled \ No newline at end of file +drop-photo--filled \ No newline at end of file diff --git a/packages/icons/src/svg/32/drop-photo.svg b/packages/icons/src/svg/32/drop-photo.svg index 3c254b284210..791b944ce348 100644 --- a/packages/icons/src/svg/32/drop-photo.svg +++ b/packages/icons/src/svg/32/drop-photo.svg @@ -1 +1 @@ -drop-photo \ No newline at end of file +drop-photo \ No newline at end of file diff --git a/packages/icons/src/svg/32/error--filled.svg b/packages/icons/src/svg/32/error--filled.svg index c9f1d54b6510..2657556fea70 100644 --- a/packages/icons/src/svg/32/error--filled.svg +++ b/packages/icons/src/svg/32/error--filled.svg @@ -4,7 +4,7 @@ width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"> diff --git a/packages/icons/src/svg/32/flow--data.svg b/packages/icons/src/svg/32/flow--data.svg index 428c50312cf9..20d3883968d5 100644 --- a/packages/icons/src/svg/32/flow--data.svg +++ b/packages/icons/src/svg/32/flow--data.svg @@ -1 +1 @@ -flow--data \ No newline at end of file +flow--data \ No newline at end of file diff --git a/packages/icons/src/svg/32/flow--stream.svg b/packages/icons/src/svg/32/flow--stream.svg index b17898b8f593..2b2e090a728e 100644 --- a/packages/icons/src/svg/32/flow--stream.svg +++ b/packages/icons/src/svg/32/flow--stream.svg @@ -1 +1 @@ -flow--stream \ No newline at end of file +flow--stream \ No newline at end of file diff --git a/packages/icons/src/svg/32/gas-station.svg b/packages/icons/src/svg/32/gas-station.svg index d08de7ae8fe4..cf5350691673 100644 --- a/packages/icons/src/svg/32/gas-station.svg +++ b/packages/icons/src/svg/32/gas-station.svg @@ -2,7 +2,7 @@ \ No newline at end of file +mobile--audio \ No newline at end of file diff --git a/packages/icons/src/svg/32/omega.svg b/packages/icons/src/svg/32/omega.svg index bad65c7e5ce5..386687a69e0a 100644 --- a/packages/icons/src/svg/32/omega.svg +++ b/packages/icons/src/svg/32/omega.svg @@ -1 +1 @@ -omega \ No newline at end of file +omega \ No newline at end of file diff --git a/packages/icons/src/svg/32/paragraph.svg b/packages/icons/src/svg/32/paragraph.svg index 5ae9d0d86281..f7527210a542 100644 --- a/packages/icons/src/svg/32/paragraph.svg +++ b/packages/icons/src/svg/32/paragraph.svg @@ -1 +1 @@ -paragraph \ No newline at end of file +paragraph \ No newline at end of file diff --git a/packages/icons/src/svg/32/recording--filled--alt.svg b/packages/icons/src/svg/32/recording--filled--alt.svg index fbac1809610b..f8cb6f64ac17 100644 --- a/packages/icons/src/svg/32/recording--filled--alt.svg +++ b/packages/icons/src/svg/32/recording--filled--alt.svg @@ -4,7 +4,7 @@ width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"> recording \ No newline at end of file +recording \ No newline at end of file diff --git a/packages/icons/src/svg/32/redo.svg b/packages/icons/src/svg/32/redo.svg index 91b593450514..fb08f9b5a78e 100755 --- a/packages/icons/src/svg/32/redo.svg +++ b/packages/icons/src/svg/32/redo.svg @@ -3,7 +3,7 @@
Menu
, }}> - + { - const { current: triggerEl } = this._triggerRef; - if (triggerEl) { - const primaryFocusPropEl = triggerEl.querySelector( - '[data-floating-menu-primary-focus]' - ); - if (primaryFocusPropEl) { - return primaryFocusPropEl; - } - } - const firstItem = this.overflowMenuItem0; - if ( - firstItem && - firstItem.overflowMenuItem && - firstItem.overflowMenuItem.current - ) { - return firstItem.overflowMenuItem.current; - } - }; - componentDidUpdate(_, prevState) { const { onClose } = this.props; if (!this.state.open && prevState.isOpen) { @@ -393,10 +380,6 @@ class OverflowMenu extends Component { _handlePlace = menuBody => { if (menuBody) { this._menuBody = menuBody; - const primaryFocus = - menuBody.querySelector('[data-floating-menu-primary-focus]') || - menuBody; - primaryFocus.focus(); const hasFocusin = 'onfocusin' in window; const focusinEventName = hasFocusin ? 'focusin' : 'focus'; this._hFocusIn = on( @@ -446,6 +429,7 @@ class OverflowMenu extends Component { iconClass, onClick, // eslint-disable-line onOpen, // eslint-disable-line + selectorPrimaryFocus = '[data-floating-menu-primary-focus]', // eslint-disable-line renderIcon: IconElement, innerRef: ref, menuOptionsClass, @@ -509,7 +493,8 @@ class OverflowMenu extends Component { menuRef={this._bindMenuBody} flipped={this.props.flipped} target={this._getTarget} - onPlace={this._handlePlace}> + onPlace={this._handlePlace} + selectorPrimaryFocus={this.props.selectorPrimaryFocus}> {React.cloneElement(menuBody, { 'data-floating-menu-direction': direction, })} diff --git a/packages/react/src/components/OverflowMenuItem/OverflowMenuItem.js b/packages/react/src/components/OverflowMenuItem/OverflowMenuItem.js index 3cd85525c71d..bba575ce3149 100644 --- a/packages/react/src/components/OverflowMenuItem/OverflowMenuItem.js +++ b/packages/react/src/components/OverflowMenuItem/OverflowMenuItem.js @@ -11,6 +11,7 @@ import classNames from 'classnames'; import warning from 'warning'; import { settings } from 'carbon-components'; import { match, keys } from '../../internal/keyboard'; +import deprecate from '../../prop-types/deprecate.js'; const { prefix } = settings; @@ -72,7 +73,13 @@ export default class OverflowMenuItem extends React.Component { /** * `true` if this menu item should get focus when the menu gets open. */ - primaryFocus: PropTypes.bool, + primaryFocus: deprecate( + PropTypes.bool, + 'The `primaryFocus` prop has been deprecated as it is no longer used. ' + + 'Feel free to remove this prop from . This prop will ' + + 'be removed in the next major release of `carbon-components-react`. ' + + 'Opt for `selectorPrimaryFocus` in `` instead' + ), /** * `true` if this menu item has long text and requires a browser tooltip @@ -149,9 +156,6 @@ export default class OverflowMenuItem extends React.Component { }, wrapperClassName ); - const primaryFocusProp = primaryFocus - ? { 'data-floating-menu-primary-focus': true } - : {}; const TagToUse = href ? 'a' : 'button'; const OverflowMenuItemContent = (() => { if (typeof itemText !== 'string') { @@ -167,7 +171,7 @@ export default class OverflowMenuItem extends React.Component {
  • )', 0), + selectorPrimaryFocus: text( + 'Primary focus element selector (selectorPrimaryFocus)', + '' + ), }), withoutIcon: () => ({ showIcon: false, direction: select('Tooltip direction (direction)', directions, 'bottom'), triggerText: text('Trigger text (triggerText)', 'Tooltip label'), tabIndex: number('Tab index (tabIndex in )', 0), + selectorPrimaryFocus: text( + 'Primary focus element selector (selectorPrimaryFocus)', + '' + ), }), customIcon: () => ({ showIcon: true, direction: select('Tooltip direction (direction)', directions, 'bottom'), triggerText: text('Trigger text (triggerText)', 'Tooltip label'), tabIndex: number('Tab index (tabIndex in )', 0), + selectorPrimaryFocus: text( + 'Primary focus element selector (selectorPrimaryFocus)', + '' + ), renderIcon: React.forwardRef((props, ref) => (
    @@ -52,6 +64,10 @@ const props = { direction: select('Tooltip direction (direction)', directions, 'bottom'), iconDescription: 'Helpful Information', tabIndex: number('Tab index (tabIndex in )', 0), + selectorPrimaryFocus: text( + 'Primary focus element selector (selectorPrimaryFocus)', + '' + ), renderIcon: OverflowMenuVertical16, }), }; diff --git a/packages/react/src/components/Tooltip/Tooltip.js b/packages/react/src/components/Tooltip/Tooltip.js index e8bbd79ce353..272185364421 100644 --- a/packages/react/src/components/Tooltip/Tooltip.js +++ b/packages/react/src/components/Tooltip/Tooltip.js @@ -132,6 +132,12 @@ class Tooltip extends Component { */ direction: PropTypes.oneOf(['bottom', 'top', 'left', 'right']), + /** + * Specify a CSS selector that matches the DOM element that should + * be focused when the Tooltip opens + */ + selectorPrimaryFocus: PropTypes.string, + /** * The adjustment of the tooltip position. */ @@ -201,6 +207,7 @@ class Tooltip extends Component { showIcon: true, triggerText: null, menuOffset: getMenuOffset, + selectorPrimaryFocus: '[data-tooltip-primary-focus]', }; /** @@ -381,6 +388,7 @@ class Tooltip extends Component { menuOffset, tabIndex = 0, innerRef: ref, + selectorPrimaryFocus, // eslint-disable-line ...other } = this.props; @@ -447,6 +455,7 @@ class Tooltip extends Component { {open && ( { + const primaryFocusNode = menuBody.querySelector( + this.props.selectorPrimaryFocus || null + ); + const tabbableNode = menuBody.querySelector(selectorTabbable); + const focusableNode = menuBody.querySelector(selectorFocusable); + const focusTarget = + primaryFocusNode || // User defined focusable node + tabbableNode || // First sequentially focusable node + focusableNode || // First programmatic focusable node + menuBody; + focusTarget.focus(); + if (focusTarget === menuBody && __DEV__) { + warning( + focusableNode === null, + 'Floating Menus must have at least a programmatically focusable child. ' + + 'This can be accomplished by adding tabIndex="-1" to the content element.' + ); + } + }; componentDidUpdate(prevProps) { this._updateMenuSize(prevProps); const { onPlace } = this.props; - if ( - this._placeInProgress && - this.state.floatingPosition && - typeof onPlace === 'function' - ) { - onPlace(this._menuBody); - this._placeInProgress = false; + if (this._placeInProgress && this.state.floatingPosition) { + if (this._menuBody && !this._menuBody.contains(document.activeElement)) { + this._focusMenuContent(this._menuBody); + } + if (typeof onPlace === 'function') { + onPlace(this._menuBody); + this._placeInProgress = false; + } } } diff --git a/packages/react/src/internal/keyboard/navigation.js b/packages/react/src/internal/keyboard/navigation.js index cdd85de640f4..30536e8f9f0f 100644 --- a/packages/react/src/internal/keyboard/navigation.js +++ b/packages/react/src/internal/keyboard/navigation.js @@ -52,7 +52,7 @@ export const DOCUMENT_POSITION_BROAD_FOLLOWING = Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY; /** - * CSS selector that selects major nodes that is sequential-focusable. + * CSS selector that selects major nodes that are sequential-focusable. */ export const selectorTabbable = ` a[href], area[href], input:not([disabled]):not([tabindex='-1']), @@ -60,3 +60,13 @@ export const selectorTabbable = ` textarea:not([disabled]):not([tabindex='-1']), iframe, object, embed, *[tabindex]:not([tabindex='-1']), *[contenteditable=true] `; + +/** + * CSS selector that selects major nodes that are click focusable + */ +export const selectorFocusable = ` + a[href], area[href], input:not([disabled]), + button:not([disabled]),select:not([disabled]), + textarea:not([disabled]), + iframe, object, embed, *[tabindex], *[contenteditable=true] +`; From 148cd8d9b5103cdf50b032260d3bcc0f89d2e3c2 Mon Sep 17 00:00:00 2001 From: carbon-bot Date: Mon, 1 Jun 2020 18:27:39 +0000 Subject: [PATCH 3/3] chore(project): sync generated files --- packages/components/docs/sass.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md index 841d8b593a32..ec391236138c 100644 --- a/packages/components/docs/sass.md +++ b/packages/components/docs/sass.md @@ -18332,7 +18332,7 @@ Link styles color: $link-01; text-decoration: none; outline: none; - transition: $duration--fast-01 motion(standard, productive); + transition: color $duration--fast-01 motion(standard, productive); &:hover { color: $hover-primary-text;