2023-12-27 Release

.github/workflows/codeql-analysis.yml

@@ -42,7 +42,7 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v2
+        uses: github/codeql-action/init@v3
         with:
           languages: ${{ matrix.language }}
           # If you wish to specify custom queries, you can do so here or in a config file.
@@ -55,7 +55,7 @@ jobs:
       # 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
+        uses: github/codeql-action/autobuild@v3
 
       # ℹ️ 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
@@ -68,4 +68,4 @@ jobs:
       #   ./location_of_script_within_repo/buildscript.sh
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v2
+        uses: github/codeql-action/analyze@v3

package.json

@@ -65,9 +65,9 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.0.4",
-    "@vueuse/components": "^9.4.0",
-    "@vueuse/core": "^9.4.0",
-    "@vueuse/integrations": "^9.4.0",
+    "@vueuse/components": "^10.7.0",
+    "@vueuse/core": "^10.7.0",
+    "@vueuse/integrations": "^10.7.0",
     "date-fns": "^2.28.0",
     "fast-sort": "^3.1.3",
     "focus-trap": "^7.0.0",
@@ -79,8 +79,6 @@
     "@commitlint/cli": "^17.0.2",
     "@commitlint/config-conventional": "^17.0.2",
     "@cypress/code-coverage": "^3.9.12",
-    "@cypress/vite-dev-server": "^2.2.0",
-    "@cypress/vue": "^4.0.0",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/git": "^10.0.1",
     "@storybook/addon-actions": "^6.4.0",
@@ -96,8 +94,8 @@
     "babel-loader": "^8.2.3",
     "commitizen": "^4.2.4",
     "cross-env": "^7.0.3",
-    "cypress": "^13.6.1",
-    "cypress-real-events": "^1.5.1",
+    "cypress": "^13.6.2",
+    "cypress-real-events": "^1.11.0",
     "cz-customizable": "^6.3.0",
     "eslint": "^8.1.0",
     "eslint-config-prettier": "^8.3.0",
@@ -107,11 +105,11 @@
     "eslint-plugin-vue": "^9.1.1",
     "husky": "^8.0.1",
     "hygen": "^6.1.0",
-    "lint-staged": "^13.0.2",
-    "prettier": "^2.4.1",
+    "lint-staged": "^15.2.0",
+    "prettier": "^2.8.8",
     "semantic-release": "^19.0.5",
     "vite": "^4.0.0",
-    "vite-plugin-istanbul": "^2.5.1",
+    "vite-plugin-istanbul": "^5.0.0",
     "vue": "^3.2.33",
     "vue-loader": "^17.0.0",
     "vue-router": "^4.0.12"

playground/tree-shaking/src/components/HelloWorld.vue

@@ -1,9 +1,11 @@
 <script setup>
-defineProps({
+// Un-used `props` variable needed for code coverage to be instrumented.
+// eslint-disable-next-line no-unused-vars
+const props = defineProps({
   msg: {
     type: String,
-    required: true
-  }
+    required: true,
+  },
 })
 </script>
 

src/components/BaseHeading/BaseHeading.vue

@@ -1,5 +1,7 @@
 <script setup>
-defineProps({
+// Un-used `props` variable needed for code coverage to be instrumented.
+// eslint-disable-next-line no-unused-vars
+const props = defineProps({
   tag: {
     type: String,
     default: 'h2',

src/components/UsaChecklist/UsaChecklist.vue

@@ -1,7 +1,9 @@
 <script setup>
 import UsaChecklistItem from '@/components/UsaChecklistItem'
 
-defineProps({
+// Un-used `props` variable needed for code coverage to be instrumented.
+// eslint-disable-next-line no-unused-vars
+const props = defineProps({
   items: {
     type: Array,
     default: () => [],

src/components/UsaCollectionHeading/UsaCollectionHeading.vue

@@ -2,7 +2,9 @@
 import BaseHeading from '@/components/BaseHeading'
 import BaseLink from '@/components/BaseLink'
 
-defineProps({
+// Un-used `props` variable needed for code coverage to be instrumented.
+// eslint-disable-next-line no-unused-vars
+const props = defineProps({
   href: {
     type: String,
     default: '',

src/components/UsaCollectionItem/UsaCollectionItem.vue

@@ -1,7 +1,9 @@
 <script setup>
 import UsaCollectionHeading from '@/components/UsaCollectionHeading'
 
-defineProps({
+// Un-used `props` variable needed for code coverage to be instrumented.
+// eslint-disable-next-line no-unused-vars
+const props = defineProps({
   heading: {
     type: String,
     default: '',

src/components/UsaCollectionMeta/UsaCollectionMeta.vue

@@ -1,5 +1,7 @@
 <script setup>
-defineProps({
+// Un-used `props` variable needed for code coverage to be instrumented.
+// eslint-disable-next-line no-unused-vars
+const props = defineProps({
   ariaLabel: {
     type: String,
     required: true,

src/components/UsaDatePicker/UsaDatePicker.test.js

@@ -51,11 +51,11 @@ describe('UsaDatePicker', () => {
 
     cy.get('div.usa-date-picker__calendar')
       .as('calendar')
-      .should('have.attr', 'role', 'dialog')
-      .and('have.attr', 'aria-modal', 'true')
+      .should('have.attr', 'role', 'application')
       .and('have.attr', 'data-value', '')
       .and('have.attr', 'hidden', 'hidden')
       .and('have.attr', 'style')
+    cy.get('@calendar').should('not.have.attr', 'aria-modal')
 
     cy.get('div.usa-date-picker__status')
       .as('status')

src/components/UsaDatePicker/UsaDatePicker.vue

@@ -179,11 +179,11 @@ const props = defineProps({
   },
   yearSelectionButtonLabel: {
     type: String,
-    default: '%s. Click to select year',
+    default: '%s. Select year',
   },
   monthSelectionButtonLabel: {
     type: String,
-    default: '%s. Click to select month',
+    default: '%s. Select month',
   },
   previousYearsButtonLabel: {
     type: String,

src/components/UsaDatePickerCalendar/UsaDatePickerCalendar.test.js

@@ -69,7 +69,7 @@ describe('UsaDatePickerCalendar', () => {
       .as('wrapper')
 
     cy.get('.usa-date-picker__calendar')
-      .should('have.attr', 'role', 'dialog')
+      .should('have.attr', 'role', 'application')
       .and('have.attr', 'data-value', '2022-07-13')
       .and('not.have.attr', 'hidden', 'true')
 

src/components/UsaDatePickerCalendar/UsaDatePickerCalendar.vue

@@ -205,8 +205,7 @@ onMounted(() => {
   <div
     ref="calendarPickerRef"
     class="usa-date-picker__calendar"
-    role="dialog"
-    aria-modal="true"
+    role="application"
     :data-value="highlightedDate"
     :hidden="!open"
   >

src/components/UsaDatePickerCalendarDay/UsaDatePickerCalendarDay.test.js

@@ -151,16 +151,15 @@ describe('UsaDatePickerCalendarDay', () => {
       .and('be.empty')
 
     cy.get('table.usa-date-picker__calendar__table').should(
-      'have.attr',
-      'role',
-      'presentation'
+      'not.have.attr',
+      'role'
     )
 
     cy.get('.usa-date-picker__calendar__table > thead > tr')
       .children()
       .should('have.length', 7)
       .and('have.class', 'usa-date-picker__calendar__day-of-week')
-      .and('have.attr', 'scope', 'presentation')
+      .and('have.attr', 'scope', 'col')
 
     cy.get('.usa-date-picker__calendar__table th:nth-of-type(1)')
       .should('have.attr', 'aria-label', 'Sunday')
@@ -1710,18 +1709,18 @@ describe('UsaDatePickerCalendarDay', () => {
     })
 
     // Make sure the next tab element has been initially rendered.
-    // cy.get('.usa-date-picker__calendar__previous-year').should('not.have.focus')
-    // cy.get('.usa-date-picker__calendar__previous-month').should(
-    //   'not.have.focus'
-    // )
-    // cy.get('.usa-date-picker__calendar__month-selection').should(
-    //   'not.have.focus'
-    // )
-    // cy.get('.usa-date-picker__calendar__year-selection').should(
-    //   'not.have.focus'
-    // )
-    // cy.get('.usa-date-picker__calendar__next-month').should('not.have.focus')
-    // cy.get('.usa-date-picker__calendar__next-year').should('not.have.focus')
+    cy.get('.usa-date-picker__calendar__previous-year').should('not.have.focus')
+    cy.get('.usa-date-picker__calendar__previous-month').should(
+      'not.have.focus'
+    )
+    cy.get('.usa-date-picker__calendar__month-selection').should(
+      'not.have.focus'
+    )
+    cy.get('.usa-date-picker__calendar__year-selection').should(
+      'not.have.focus'
+    )
+    cy.get('.usa-date-picker__calendar__next-month').should('not.have.focus')
+    cy.get('.usa-date-picker__calendar__next-year').should('not.have.focus')
 
     // Should start on selected date: 2022-07-13.
     cy.get('button[data-value="2022-07-13"]')

src/components/UsaDatePickerCalendarDay/UsaDatePickerCalendarDay.vue

@@ -495,14 +495,14 @@ onBeforeUnmount(() => {
       </div>
     </div>
 
-    <table class="usa-date-picker__calendar__table" role="presentation">
+    <table class="usa-date-picker__calendar__table">
       <thead>
         <tr>
           <th
             v-for="(dayLabel, index) in dayOfWeekLabels"
             :key="dayLabel"
             class="usa-date-picker__calendar__day-of-week"
-            scope="presentation"
+            scope="col"
             :aria-label="dayLabel"
             >{{ dayOfWeekAbbreviationLabels[index] }}
           </th>

src/components/UsaDatePickerCalendarYear/UsaDatePickerCalendarYear.test.js

@@ -42,9 +42,15 @@ describe('UsaDatePickerCalendarYear', () => {
       '-1'
     )
 
-    cy.get('.usa-date-picker__calendar__year-picker > table')
-      .should('have.attr', 'role', 'presentation')
-      .and('have.class', 'usa-date-picker__calendar__table')
+    cy.get('.usa-date-picker__calendar__year-picker > table').should(
+      'have.class',
+      'usa-date-picker__calendar__table'
+    )
+
+    cy.get('.usa-date-picker__calendar__year-picker > table').should(
+      'not.have.attr',
+      'role'
+    )
 
     cy.get('.usa-date-picker__calendar__year-picker > table > tbody').should(
       'exist'

src/components/UsaDatePickerCalendarYear/UsaDatePickerCalendarYear.vue

@@ -254,7 +254,7 @@ onBeforeUnmount(() => {
     tabindex="-1"
     class="usa-date-picker__calendar__year-picker"
   >
-    <table role="presentation" class="usa-date-picker__calendar__table">
+    <table class="usa-date-picker__calendar__table">
       <tbody>
         <tr>
           <td>