From 78dc8134b1d38c6826766f2f85ae943e8b1a8088 Mon Sep 17 00:00:00 2001 From: Owen Niblock Date: Tue, 21 Jun 2022 11:34:39 +0100 Subject: [PATCH 1/2] Enforce correct semantics for TabNav (#2125) * Swaps nav and div and adds semantically correct roles * Fix tests, add body div and move sx * Adds changeset * Fixing TabNavProps export Co-authored-by: Siddharth Kshetrapal --- .changeset/poor-wombats-lick.md | 5 +++++ src/TabNav.tsx | 16 +++++++++----- .../__snapshots__/TabNav.test.tsx.snap | 22 ++++++++++++------- 3 files changed, 30 insertions(+), 13 deletions(-) create mode 100644 .changeset/poor-wombats-lick.md diff --git a/.changeset/poor-wombats-lick.md b/.changeset/poor-wombats-lick.md new file mode 100644 index 00000000000..d244a2d551b --- /dev/null +++ b/.changeset/poor-wombats-lick.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Adds roles of tablist and tab to the TabNav component, required rearranging the HTML elements to be semantically correct diff --git a/src/TabNav.tsx b/src/TabNav.tsx index dc7ff810571..fc6cd810a83 100644 --- a/src/TabNav.tsx +++ b/src/TabNav.tsx @@ -11,23 +11,28 @@ const ITEM_CLASS = 'TabNav-item' const SELECTED_CLASS = 'selected' const TabNavBase = styled.div` - margin-top: 0; - border-bottom: 1px solid ${get('colors.border.default')}; ${sx} ` -const TabNavBody = styled.nav` +const TabNavTabList = styled.div` display: flex; margin-bottom: -1px; overflow: auto; ` +const TabNavNav = styled.nav` + margin-top: 0; + border-bottom: 1px solid ${get('colors.border.default')}; +` + export type TabNavProps = ComponentProps function TabNav({children, 'aria-label': ariaLabel, ...rest}: TabNavProps) { return ( - {children} + + {children} + ) } @@ -39,7 +44,8 @@ type StyledTabNavLinkProps = { const TabNavLink = styled.a.attrs(props => ({ activeClassName: typeof props.to === 'string' ? 'selected' : '', - className: classnames(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className) + className: classnames(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className), + role: 'tab' }))` padding: 8px 12px; font-size: ${get('fontSizes.1')}; diff --git a/src/__tests__/__snapshots__/TabNav.test.tsx.snap b/src/__tests__/__snapshots__/TabNav.test.tsx.snap index b912c785a1a..edcc428b949 100644 --- a/src/__tests__/__snapshots__/TabNav.test.tsx.snap +++ b/src/__tests__/__snapshots__/TabNav.test.tsx.snap @@ -46,15 +46,11 @@ exports[`TabNav TabNav.Link renders consistently 1`] = ` `; exports[`TabNav renders consistently 1`] = ` -.c0 { - margin-top: 0; - border-bottom: 1px solid #d0d7de; -} - .c1 { display: -webkit-box; display: -webkit-flex; @@ -64,11 +60,21 @@ exports[`TabNav renders consistently 1`] = ` overflow: auto; } +.c0 { + margin-top: 0; + border-bottom: 1px solid #d0d7de; +} +
`; From c7abeb3a6bde7ac13983d1518b78831d35718a41 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 21 Jun 2022 04:15:10 -0700 Subject: [PATCH 2/2] Adding codeql scanning (#2134) https://github.com/github/primer/issues/937 --- .github/workflows/codeql.yml | 72 ++++++++++++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 .github/workflows/codeql.yml diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml new file mode 100644 index 00000000000..d935db63df7 --- /dev/null +++ b/.github/workflows/codeql.yml @@ -0,0 +1,72 @@ +# For most projects, this workflow file will not need changing; you simply need +# to commit it to your repository. +# +# You may wish to alter this file to override the set of languages analyzed, +# or to provide custom queries or build logic. +# +# ******** NOTE ******** +# We have attempted to detect the languages in your repository. Please check +# the `language` matrix defined below to confirm you have the correct set of +# supported CodeQL languages. +# +name: "CodeQL" + +on: + push: + branches: [ "main" ] + pull_request: + # The branches below must be a subset of the branches above + branches: [ "main" ] + schedule: + - cron: '18 23 * * 5' + +jobs: + analyze: + name: Analyze + runs-on: ubuntu-latest + permissions: + actions: read + contents: read + security-events: write + + strategy: + fail-fast: false + matrix: + language: [ 'javascript', 'ruby' ] + # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ] + # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support + + steps: + - name: Checkout repository + uses: actions/checkout@v3 + + # Initializes the CodeQL tools for scanning. + - name: Initialize CodeQL + uses: github/codeql-action/init@v2 + with: + languages: ${{ matrix.language }} + # If you wish to specify custom queries, you can do so here or in a config file. + # By default, queries listed here will override any specified in a config file. + # Prefix the list here with "+" to use these queries and those in the config file. + + # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs + # queries: security-extended,security-and-quality + + + # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). + # If this step fails, then you should remove it and run the build manually (see below) + - name: Autobuild + uses: github/codeql-action/autobuild@v2 + + # ℹī¸ Command-line programs to run using the OS shell. + # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun + + # If the Autobuild fails above, remove it and uncomment the following three lines. + # modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance. + + # - run: | + # echo "Run, Build Application using script" + # ./location_of_script_within_repo/buildscript.sh + + - name: Perform CodeQL Analysis + uses: github/codeql-action/analyze@v2