fix nested interactive element (#14314)

* move onclick from div to each button

* remove old test workaround and outdated comment

app/javascript/chat/__tests__/content.test.jsx

@@ -35,17 +35,11 @@ const getLoadingUserData = () => ({
 describe('<Content />', () => {
   describe('as loading-user', () => {
     it('should have no a11y violations', async () => {
-      // TODO: The axe custom rules here should be removed when the below issue is fixed
-      // https://github.com/forem/forem/issues/14101
-      const customAxeRules = {
-        'nested-interactive': { enabled: false },
-      };
-
       const channelRequestResource = getChannelRequestData();
       const { container } = render(
         <Content resource={channelRequestResource} />,
       );
-      const results = await axe(container, { rules: customAxeRules });
+      const results = await axe(container);
 
       expect(results).toHaveNoViolations();
     });
@@ -72,15 +66,9 @@ describe('<Content />', () => {
 
   describe('as channel-request', () => {
     it('should have no a11y violations', async () => {
-      // TODO: The axe custom rules here should be removed when the below issue is fixed
-      // https://github.com/forem/forem/issues/14101
-      const customAxeRules = {
-        'nested-interactive': { enabled: false },
-      };
-
       const loadinUserResource = getLoadingUserData();
       const { container } = render(<Content resource={loadinUserResource} />);
-      const results = await axe(container, { rules: customAxeRules });
+      const results = await axe(container);
 
       expect(results).toHaveNoViolations();
     });

app/javascript/chat/content.jsx

@@ -44,23 +44,17 @@ export class Content extends Component {
     if (!resource) {
       return '';
     }
-
     return (
-      // TODO: A button (role="button") cannot contain other interactive elements, i.e. buttons.
-      // TODO: These should have key click events as well.
-      // eslint-disable-next-line jsx-a11y/click-events-have-key-events
       <div
         className="activechatchannel__activecontent activechatchannel__activecontent--sidecar"
         id="chat_activecontent"
-        onClick={onTriggerContent}
-        role="button"
-        tabIndex="0"
       >
         <button
           type="button"
           className="activechatchannel__activecontentexitbutton crayons-btn crayons-btn--secondary"
           data-content="exit"
           title="exit"
+          onClick={onTriggerContent}
         >
           {smartSvgIcon(
             'exit',
@@ -73,6 +67,7 @@ export class Content extends Component {
           data-content="fullscreen"
           style={{ left: '-80px', marginLeft: '0px' }}
           title="fullscreen"
+          onClick={onTriggerContent}
         >
           {' '}
           {fullscreen