Merge pull request #373 from iclanton/fix-playground-accessability-issues

Fix an issue where the selected tab isn't selectable via keyboard navigation.

Author: iclanton

.github/CODEOWNERS

@@ -1,4 +1,4 @@
-.github/CODEOWNERS @iclanton @nickpape-msft @octogonz
-common/config/**/* @iclanton @nickpape-msft @octogonz
+.github/CODEOWNERS @iclanton @octogonz @apostolisms @D4N14L @dmichon-msft @patmill
+common/config/**/* @iclanton @octogonz @apostolisms @D4N14L @dmichon-msft @patmill
 
-**/* @iclanton @nickpape-msft @octogonz
+**/* @iclanton @octogonz @apostolisms @D4N14L @dmichon-msft @patmill

common/config/azure-pipelines/ci-build.yaml

@@ -4,10 +4,7 @@ jobs:
   - job: PRBuild
     condition: succeeded()
     strategy:
-      maxParallel: 3
       matrix:
-        'NodeJs 14':
-          NodeVersion: 14
         'NodeJs 16':
           NodeVersion: 16
         'NodeJs 18':

common/config/azure-pipelines/npm-publish.yaml

@@ -1,7 +1,7 @@
 pool:
   vmImage: 'ubuntu-latest'
 variables:
-  NodeVersion: 16
+  NodeVersion: 18
   FORCE_COLOR: 1
 steps:
   - checkout: self

common/config/azure-pipelines/npm-republish.yaml

@@ -1,7 +1,7 @@
 pool:
   vmImage: 'ubuntu-latest'
 variables:
-  NodeVersion: 16
+  NodeVersion: 18
   FORCE_COLOR: 1
 steps:
   - checkout: self

common/config/azure-pipelines/playground-build.yaml

@@ -9,7 +9,7 @@ resources:
       ref: refs/heads/gh-pages
       trigger: none
 variables:
-  NodeVersion: 16
+  NodeVersion: 18
   FORCE_COLOR: 1
 jobs:
   - job: build

common/config/azure-pipelines/templates/build.yaml

@@ -13,3 +13,7 @@ steps:
     displayName: 'Rush Install'
   - script: 'node common/scripts/install-run-rush.js rebuild --verbose --production'
     displayName: 'Rush Rebuild'
+    env:
+      # Prevent time-based browserslist update warning
+      # See https://github.com/microsoft/rushstack/issues/2981
+      BROWSERSLIST_IGNORE_OLD_DATA: 1

playground/src/TabPane.tsx

@@ -17,6 +17,12 @@ export interface ITabPaneState {
   selectedTabIndex: number;
 }
 
+const TAB_STYLE: React.CSSProperties = {
+  padding: '8px',
+  marginLeft: '1px',
+  marginRight: '1px'
+};
+
 export class TabPane extends React.Component<ITabPaneProps, ITabPaneState> {
   // Saved bindings of _onClickTab() with a tabIndex parameter, to avoid the react/jsx-no-bind issue
   private _onClickTabBindings: React.MouseEventHandler<HTMLAnchorElement>[] = [];
@@ -38,49 +44,42 @@ export class TabPane extends React.Component<ITabPaneProps, ITabPaneState> {
     for (let i: number = 0; i < this.props.tabs.length; ++i) {
       const tabDefinition: ITabDefinition = this.props.tabs[i];
 
-      const style: React.CSSProperties = {
-        padding: '8px',
-        marginLeft: '1px',
-        marginRight: '1px'
-      };
-
+      let ariaSelected: boolean = false;
+      let tabStyleToUse: React.CSSProperties;
       if (i === this.state.selectedTabIndex) {
         selectedTabDefinition = tabDefinition;
+        ariaSelected = true;
 
-        const activeTabStyle: React.CSSProperties = {
-          ...style,
+        tabStyleToUse = {
+          ...TAB_STYLE,
           borderStyle: 'solid',
           borderWidth: '2px',
           borderColor: '#c0c0c0',
           borderBottomStyle: 'none',
           borderTopLeftRadius: '4px',
           borderTopRightRadius: '4px'
         };
-
-        buttons.push(
-          <div key={`tab_${i}`} className="playground-tab-pane-active-tab" style={activeTabStyle} role="tab">
-            {tabDefinition.title}
-          </div>
-        );
       } else {
-        if (!this._onClickTabBindings[i]) {
-          // Bind _onClickTab() with i as the tabIndex parameter
-          this._onClickTabBindings[i] = this._onClickTab.bind(this, i);
-        }
-
-        buttons.push(
-          <div key={`tab_${i}`} className="playground-tab-pane-inactive-tab" style={style}>
-            <a
-              href="#"
-              style={{ textDecorationLine: 'none', color: '#000000' }}
-              onClick={this._onClickTabBindings[i]}
-              role="tab"
-            >
-              {tabDefinition.title}
-            </a>
-          </div>
-        );
+        tabStyleToUse = TAB_STYLE;
       }
+
+      if (!this._onClickTabBindings[i]) {
+        // Bind _onClickTab() with i as the tabIndex parameter
+        this._onClickTabBindings[i] = this._onClickTab.bind(this, i);
+      }
+      buttons.push(
+        <div key={`tab_${i}`} className="playground-tab-pane-inactive-tab" style={tabStyleToUse}>
+          <a
+            href="#"
+            style={{ textDecorationLine: 'none', color: '#000000' }}
+            onClick={this._onClickTabBindings[i]}
+            role="tab"
+            aria-selected={ariaSelected}
+          >
+            {tabDefinition.title}
+          </a>
+        </div>
+      );
     }
 
     const contentDivStyle: React.CSSProperties = {