How to use @instructure/ui-a11y-utils - 8 common examples

buttonRef,
      children,
      cursor,
      disabled,
      href,
      icon,
      margin,
      onClick,
      readOnly,
      size,
      type,
      variant,
      tabIndex
    } = this.props

    const IHaveVisibleChildren = hasVisibleChildren(this.props.children)
    const hasTextAndIcon = IHaveVisibleChildren && this.props.icon // any button with an icon + text label
    const hasOnlyIcon = !IHaveVisibleChildren && this.props.icon // any button with just an icon visible

    if (process.env.NODE_ENV !== 'production') {
      // show warning if icon is added as a child
      if (this.hasVisibleChildren) {
        React.Children.forEach(children, (child) => {
          const icon = child && child.type && typeof child.type.glyphName !== 'undefined'
          warn(
            !icon,
            `[Button] Icons as children is deprecated. Please use the 'icon' prop instead.`
          )
        })
      }
    }

get hasVisibleChildren () {
    return hasVisibleChildren(this.props.children)
  }

render () {
    const {
      minimized,
      label
    } = this.props

    const link = this.renderLink()

    return (
      minimized && hasVisibleChildren(label) ? (
        
          {link}
        
      ) : link
    )
  }
}

inputProps['aria-activedescendant'] = `${this._optionsId}_${highlightedOption.id}`
    } else {
      inputProps['aria-activedescendant'] = null
    }


    let wrappedLabel = (
      <label>
        {this.props.label}
      </label>
    )

    if (!hasVisibleChildren(this.props.label)) {
      wrappedLabel = {wrappedLabel}
    }

    return (

get hasVisibleChildren () {
    return hasVisibleChildren(this.props.children)
  }

renderLabel () {
    const display = this.props.variant === 'compact' ? 'block' : 'inline-block'
    const visibleLabel = hasVisibleChildren(this.props.label)

    return (
      
    )
  }

renderLabel () {
    const { label } = this.props

    return hasVisibleChildren(label) ? (
      <span>{label}</span>
    ) : label
  }

render () {
    const ElementType = getElementType(FormFieldLabel, this.props)

    const classes = {
      [styles.root]: true,
      [styles['has-content']]: hasVisibleChildren(this.props.children)
    }

    return (
      
        {this.props.children}
      
    )
  }
}