[bugfix][a11y] Label side pane tab header currently active tab as aria-label (#3345)

* Add selected state to side pane tabheader tabs

Author: edwardlee-msft

change-beta/@azure-communication-react-9b8b7480-1f89-4b2f-9d4d-636518fcf0db.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add selected state aria label to active tab header",
+  "packageName": "@azure/communication-react",
+  "email": "edwardlee@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-9b8b7480-1f89-4b2f-9d4d-636518fcf0db.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add selected state aria label to active tab header",
+  "packageName": "@azure/communication-react",
+  "email": "edwardlee@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-composites/src/composites/common/TabHeader.tsx

@@ -79,6 +79,7 @@ export const PeopleAndChatHeader = (props: PeopleAndChatHeaderProps): JSX.Elemen
             onClick={onChatButtonClicked}
             styles={mobilePaneButtonStylesThemed}
             checked={activeTab === 'chat'}
+            aria-selected={activeTab === 'chat'}
             role={'tab'}
             disabled={props.disableChatButton}
           >
@@ -92,6 +93,7 @@ export const PeopleAndChatHeader = (props: PeopleAndChatHeaderProps): JSX.Elemen
             onClick={onPeopleButtonClicked}
             styles={mobilePaneButtonStylesThemed}
             checked={activeTab === 'people'}
+            aria-selected={activeTab === 'people'}
             role={'tab'}
             disabled={props.disablePeopleButton}
           >