fix(Tab): hoist tab role to upper element (#5173)

This change hoists `tab` role and its associated ARIA attributes from
`<a>` to `<li>`, given putting `tab` role to `<a>` makes VoiceOver
think it's a single tab in a container.

No new DAP error is observed by this change.

Fixes #5083.

Author: asudoh

packages/react/src/components/Tab/Tab-test.js

@@ -27,12 +27,8 @@ describe('Tab', () => {
       );
     });
 
-    it('renders <li> with [role="presentation"]', () => {
-      expect(wrapper.props().role).toEqual('presentation');
-    });
-
-    it('renders <a> with [role="tab"]', () => {
-      expect(wrapper.find('a').props().role).toEqual('tab');
+    it('renders <li> with [role="tab"]', () => {
+      expect(wrapper.props().role).toEqual('tab');
     });
 
     it('renders <a> with tabindex set to 0', () => {

packages/react/src/components/Tab/Tab.js

@@ -135,11 +135,7 @@ export default class Tab extends React.Component {
       id,
       className: `${prefix}--tabs__nav-link`,
       href,
-      role: 'tab',
       tabIndex: !disabled ? tabIndex : -1,
-      ['aria-selected']: selected,
-      ['aria-disabled']: disabled,
-      ['aria-controls']: id && `${id}__panel`,
       ref: e => {
         this.tabAnchor = e;
       },
@@ -164,8 +160,10 @@ export default class Tab extends React.Component {
           handleTabKeyDown(index, evt);
           onKeyDown(evt);
         }}
-        role="presentation"
-        selected={selected}>
+        role="tab"
+        aria-selected={selected}
+        aria-disabled={disabled}
+        aria-controls={`${id}__panel`}>
         {renderAnchor ? (
           renderAnchor(anchorProps)
         ) : (