message: Fix double handling of native inputs wrapped for aria menus
diff: @@ -425,17 +425,25 @@ MenuItemCheckbox.propTypes = {
  // Semantic component for representing a styled role=menuitemcheckbox
  export const StyledMenuItemCheckbox = ({children, label, onChange, onClose, checked, disabled=false, ...props}) => {
  - const onKeyDown = (ev) => {
  + const onKeyDown = (e) => {
  + if (e.key === Key.ENTER || e.key === Key.SPACE) {
  + e.stopPropagation();
  + e.preventDefault();
  + onChange();
  // Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12
  - if (ev.key === Key.ENTER || ev.key === Key.SPACE) {
  - ev.preventDefault();
  - ev.stopPropagation();
  - onChange(ev);
  - if (ev.key === Key.ENTER) {
  + if (e.key === Key.ENTER) {
  onClose();
  }
  }
  };
  + const onKeyUp = (e) => {
  + // prevent the input default handler as we handle it on keydown to match
  + // https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-2/menubar-2.html
  + if (e.key === Key.SPACE || e.key === Key.ENTER) {
  + e.stopPropagation();
  + e.preventDefault();
  + }
  + };
  return (
  <StyledCheckbox
  {...props}
  @@ -447,6 +455,7 @@ export const StyledMenuItemCheckbox = ({children, label, onChange, onClose, chec
  aria-label={label}
  onChange={onChange}
  onKeyDown={onKeyDown}
  + onKeyUp={onKeyUp}
  >
  { children }
  </StyledCheckbox>
  @@ -482,17 +491,25 @@ MenuItemRadio.propTypes = {
  // Semantic component for representing a styled role=menuitemradio
  export const StyledMenuItemRadio = ({children, label, onChange, onClose, checked=false, disabled=false, ...props}) => {
  - const onKeyDown = (ev) => {
  + const onKeyDown = (e) => {
  + if (e.key === Key.ENTER || e.key === Key.SPACE) {
  + e.stopPropagation();
  + e.preventDefault();
  + onChange();
  // Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12
  - if (ev.key === Key.ENTER || ev.key === Key.SPACE) {
  - ev.preventDefault();
  - ev.stopPropagation();
  - onChange(ev);
  - if (ev.key === Key.ENTER) {
  + if (e.key === Key.ENTER) {
  onClose();
  }
  }
  };
  + const onKeyUp = (e) => {
  + // prevent the input default handler as we handle it on keydown to match
  + // https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-2/menubar-2.html
  + if (e.key === Key.SPACE || e.key === Key.ENTER) {
  + e.stopPropagation();
  + e.preventDefault();
  + }
  + };
  return (
  <StyledRadioButton
  {...props}
  @@ -504,6 +521,7 @@ export const StyledMenuItemRadio = ({children, label, onChange, onClose, checked
  aria-label={label}
  onChange={onChange}
  onKeyDown={onKeyDown}
  + onKeyUp={onKeyUp}
  >
  { children }
  </StyledRadioButton>
  