From 672007f8a184bf19bd782efbb14ed59a3baf2805 Mon Sep 17 00:00:00 2001 From: Ian Clanton-Thuon Date: Wed, 27 Mar 2024 17:24:41 -0400 Subject: [PATCH 1/5] Fix an issue where the selected tab isn't selectable via keyboard navigation (https://github.com/microsoft/rushstack-websites/issues/171) --- playground/src/TabPane.tsx | 58 ++++++++++++++++++-------------------- 1 file changed, 27 insertions(+), 31 deletions(-) diff --git a/playground/src/TabPane.tsx b/playground/src/TabPane.tsx index ff01aca7..fde61ff3 100644 --- a/playground/src/TabPane.tsx +++ b/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 { // Saved bindings of _onClickTab() with a tabIndex parameter, to avoid the react/jsx-no-bind issue private _onClickTabBindings: React.MouseEventHandler[] = []; @@ -38,17 +44,12 @@ export class TabPane extends React.Component { 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 tabStyleToUse: React.CSSProperties; if (i === this.state.selectedTabIndex) { selectedTabDefinition = tabDefinition; - const activeTabStyle: React.CSSProperties = { - ...style, + tabStyleToUse = { + ...TAB_STYLE, borderStyle: 'solid', borderWidth: '2px', borderColor: '#c0c0c0', @@ -56,31 +57,26 @@ export class TabPane extends React.Component { borderTopLeftRadius: '4px', borderTopRightRadius: '4px' }; - - buttons.push( -
- {tabDefinition.title} -
- ); } else { - if (!this._onClickTabBindings[i]) { - // Bind _onClickTab() with i as the tabIndex parameter - this._onClickTabBindings[i] = this._onClickTab.bind(this, i); - } - - buttons.push( - - ); + 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( + + ); } const contentDivStyle: React.CSSProperties = { From d1d828dab92fb6a43c2ebee2cfeba1420aefc2c4 Mon Sep 17 00:00:00 2001 From: Ian Clanton-Thuon Date: Wed, 27 Mar 2024 17:35:28 -0400 Subject: [PATCH 2/5] Add the missing 'aria-selected' attribute --- playground/src/TabPane.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/playground/src/TabPane.tsx b/playground/src/TabPane.tsx index fde61ff3..ef5ed579 100644 --- a/playground/src/TabPane.tsx +++ b/playground/src/TabPane.tsx @@ -44,9 +44,11 @@ export class TabPane extends React.Component { for (let i: number = 0; i < this.props.tabs.length; ++i) { const tabDefinition: ITabDefinition = this.props.tabs[i]; + let ariaSelected: boolean = false; let tabStyleToUse: React.CSSProperties; if (i === this.state.selectedTabIndex) { selectedTabDefinition = tabDefinition; + ariaSelected = true; tabStyleToUse = { ...TAB_STYLE, @@ -72,6 +74,7 @@ export class TabPane extends React.Component { style={{ textDecorationLine: 'none', color: '#000000' }} onClick={this._onClickTabBindings[i]} role="tab" + aria-selected={ariaSelected} > {tabDefinition.title} From 38bae6d8be6ca731a33f40945f72df9730f69fe3 Mon Sep 17 00:00:00 2001 From: Ian Clanton-Thuon Date: Wed, 27 Mar 2024 18:18:42 -0400 Subject: [PATCH 3/5] Update CODEOWNERS --- .github/CODEOWNERS | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 8db4e4d8..91955661 100644 --- a/.github/CODEOWNERS +++ b/.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 \ No newline at end of file +**/* @iclanton @octogonz @apostolisms @D4N14L @dmichon-msft @patmill From bc164976fbec4452c06cb6a5a8993c4b273d7dd6 Mon Sep 17 00:00:00 2001 From: Ian Clanton-Thuon Date: Wed, 27 Mar 2024 18:19:32 -0400 Subject: [PATCH 4/5] Drop Node 14 and use Node 18 in publishing. --- common/config/azure-pipelines/ci-build.yaml | 3 --- common/config/azure-pipelines/npm-publish.yaml | 2 +- common/config/azure-pipelines/npm-republish.yaml | 2 +- common/config/azure-pipelines/playground-build.yaml | 2 +- 4 files changed, 3 insertions(+), 6 deletions(-) diff --git a/common/config/azure-pipelines/ci-build.yaml b/common/config/azure-pipelines/ci-build.yaml index 1195461c..6ffd79d3 100644 --- a/common/config/azure-pipelines/ci-build.yaml +++ b/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': diff --git a/common/config/azure-pipelines/npm-publish.yaml b/common/config/azure-pipelines/npm-publish.yaml index d3fd08df..da78963d 100644 --- a/common/config/azure-pipelines/npm-publish.yaml +++ b/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 diff --git a/common/config/azure-pipelines/npm-republish.yaml b/common/config/azure-pipelines/npm-republish.yaml index dcc5626a..bb2a2078 100644 --- a/common/config/azure-pipelines/npm-republish.yaml +++ b/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 diff --git a/common/config/azure-pipelines/playground-build.yaml b/common/config/azure-pipelines/playground-build.yaml index ec40ae31..df838544 100644 --- a/common/config/azure-pipelines/playground-build.yaml +++ b/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 From 87c62f7d4d5c71571ba7d514703b9b21b2104d52 Mon Sep 17 00:00:00 2001 From: Ian Clanton-Thuon Date: Wed, 27 Mar 2024 18:29:40 -0400 Subject: [PATCH 5/5] Add BROWSERSLIST_IGNORE_OLD_DATA env var during build. --- common/config/azure-pipelines/templates/build.yaml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/common/config/azure-pipelines/templates/build.yaml b/common/config/azure-pipelines/templates/build.yaml index d6783593..87c2da42 100644 --- a/common/config/azure-pipelines/templates/build.yaml +++ b/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