fix(ToggleButton): remove role="button" from label (react-bootstrap#6204)

Author: kyletsang

src/Button.tsx

@@ -86,8 +86,8 @@ const Button: BsPrefixRefForwardingComponent<'button', ButtonProps> =
 
       return (
         <Component
-          {...props}
           {...buttonProps}
+          {...props}
           ref={ref}
           className={classNames(
             className,

src/ToggleButton.tsx

@@ -112,6 +112,7 @@ const ToggleButton = React.forwardRef<HTMLLabelElement, ToggleButtonProps>(
           ref={ref}
           className={classNames(className, disabled && 'disabled')}
           type={undefined}
+          role={undefined}
           as="label"
           htmlFor={id}
         />

test/ToggleButtonGroupSpec.tsx

@@ -1,35 +1,8 @@
-import * as React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import sinon from 'sinon';
 
 import ToggleButtonGroup from '../src/ToggleButtonGroup';
 
-describe('ToggleButton', () => {
-  it('should forward refs to the label', () => {
-    const ref = React.createRef<HTMLLabelElement>();
-    render(
-      <div>
-        <ToggleButtonGroup.Button id="id" ref={ref} value={3}>
-          Option 3
-        </ToggleButtonGroup.Button>
-      </div>,
-    );
-
-    ref.current!.tagName.should.equal('LABEL');
-  });
-
-  it('should add an inputRef', () => {
-    const ref = React.createRef<HTMLInputElement>();
-    render(
-      <ToggleButtonGroup.Button id="id" inputRef={ref} value={3}>
-        Option 3
-      </ToggleButtonGroup.Button>,
-    );
-
-    ref.current!.tagName.should.equal('INPUT');
-  });
-});
-
 describe('ToggleButtonGroup', () => {
   it('should render checkboxes', () => {
     const { container, getByLabelText } = render(

test/ToggleButtonSpec.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { expect } from 'chai';
+
+import ToggleButton from '../src/ToggleButton';
+
+describe('ToggleButton', () => {
+  it('should forward refs to the label', () => {
+    const ref = React.createRef<HTMLLabelElement>();
+    render(
+      <ToggleButton id="id" ref={ref} value={1}>
+        Option
+      </ToggleButton>,
+    );
+
+    ref.current!.tagName.should.equal('LABEL');
+  });
+
+  it('should add an inputRef', () => {
+    const ref = React.createRef<HTMLInputElement>();
+    render(
+      <ToggleButton id="id" inputRef={ref} value={1}>
+        Option
+      </ToggleButton>,
+    );
+
+    ref.current!.tagName.should.equal('INPUT');
+  });
+
+  it('should not have a role on the label button', () => {
+    const { getByText } = render(
+      <ToggleButton id="id" value={1}>
+        Option
+      </ToggleButton>,
+    );
+
+    expect(getByText('Option').getAttribute('role')).to.not.exist;
+  });
+});