Skip to content

Commit

Permalink
fix(arpa_reporting): add main and h1 elements - axe-dev finding (#3753)
Browse files Browse the repository at this point in the history
* fix(arpa_reporting): add main and h1 elements - axe-dev finding

* fix(arpa reporter): update colors to fix color contrast

* fix(arpa reporter): update colors
  • Loading branch information
lsr-explore authored Nov 25, 2024
1 parent dc8dfc2 commit 8003e47
Show file tree
Hide file tree
Showing 17 changed files with 431 additions and 112 deletions.
175 changes: 88 additions & 87 deletions packages/client/src/arpa_reporter/components/PageNavigation.vue
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

<span
v-if="viewPeriod"
class="navbar-text"
class="usdr-navbar-text"
>Reporting Period Ending:</span>

<div
Expand Down Expand Up @@ -54,7 +54,7 @@
</li>
</ul>

<span class="navbar-text">{{ email }}</span>
<span class="usdr-navbar-text">{{ email }}</span>

<ul class="navbar-nav">
<li
Expand All @@ -63,105 +63,106 @@
>
<a
href="#"
class="nav-link"
class="usdr-nav-link"
@click="logout"
>Logout</a>
</li>
</ul>
</div>
</nav>

<ul
v-if="loggedIn"
class="row nav nav-tabs mb-2"
>
<li class="nav-item">
<router-link
:class="navLinkClass('/')"
to="/"
>
Dashboard
</router-link>
</li>

<li class="nav-item">
<router-link
:class="navLinkClass('/uploads')"
to="/uploads"
>
Uploads
</router-link>
</li>

<li
v-if="role === 'admin'"
class="nav-item"
<main>
<ul
v-if="loggedIn"
class="row nav nav-tabs mb-2"
>
<router-link
:class="navLinkClass('/agencies')"
to="/agencies"
<li class="nav-item">
<router-link
:class="navLinkClass('/')"
to="/"
>
Dashboard
</router-link>
</li>

<li class="nav-item">
<router-link
:class="navLinkClass('/uploads')"
to="/uploads"
>
Uploads
</router-link>
</li>

<li
v-if="role === 'admin'"
class="nav-item"
>
Agencies
</router-link>
</li>
<router-link
:class="navLinkClass('/agencies')"
to="/agencies"
>
Agencies
</router-link>
</li>

<li
v-if="role === 'admin'"
class="nav-item"
>
<router-link
:class="navLinkClass('/subrecipients')"
to="/subrecipients"
<li
v-if="role === 'admin'"
class="nav-item"
>
Subrecipients
</router-link>
</li>
<router-link
:class="navLinkClass('/subrecipients')"
to="/subrecipients"
>
Subrecipients
</router-link>
</li>

<li
v-if="role === 'admin'"
class="nav-item"
>
<router-link
:class="navLinkClass('/users')"
to="/users"
<li
v-if="role === 'admin'"
class="nav-item"
>
Users
</router-link>
</li>
<router-link
:class="navLinkClass('/users')"
to="/users"
>
Users
</router-link>
</li>

<li
v-if="role === 'admin'"
class="nav-item"
>
<router-link
:class="navLinkClass('/reporting_periods')"
to="/reporting_periods"
<li
v-if="role === 'admin'"
class="nav-item"
>
Reporting Periods
</router-link>
</li>
<router-link
:class="navLinkClass('/reporting_periods')"
to="/reporting_periods"
>
Reporting Periods
</router-link>
</li>

<li
v-if="role === 'admin'"
class="nav-item"
>
<router-link
:class="navLinkClass('/validation')"
to="/validation"
<li
v-if="role === 'admin'"
class="nav-item"
>
Validation
</router-link>
</li>
</ul>

<AlertBox
v-for="(alert, alertId) in alerts"
v-bind="alert"
:key="alertId"
@dismiss="dismissAlert(alertId)"
/>

<router-view />
<router-link
:class="navLinkClass('/validation')"
to="/validation"
>
Validation
</router-link>
</li>
</ul>

<AlertBox
v-for="(alert, alertId) in alerts"
v-bind="alert"
:key="alertId"
@dismiss="dismissAlert(alertId)"
/>

<router-view />
</main>
</div>
</template>

Expand Down Expand Up @@ -221,9 +222,9 @@ export default {
},
navLinkClass(to) {
if (this.$route.path === to) {
return 'nav-link active';
return 'nav-link usdr-tab-nav-link active';
}
return 'nav-link';
return 'nav-link usdr-tab-nav-link';
},
dateFormat(d) {
return moment(d)
Expand Down
77 changes: 77 additions & 0 deletions packages/client/src/arpa_reporter/scss/colors-base-tokens.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
/**
* colors-base-tokens.scss
*
* Color base token definition file, based on USDR style guide.
*
* Please refer to USDR style guide definition in Figma:
* https://www.figma.com/file/HWu4iIjcoX2txuN543qzIB/USDR-Design-System?type=design&node-id=8%3A2&mode=design&t=8mml86X91f9FzVAE-1
*/

// USDR BRAND
$usdr-brand-primary: #305CE0;
$usdr-brand-secondary: #071A51;

// BLUE
$raw-blue-50: #EAF5FE;
$raw-blue-100: #D8ECFE;
$raw-blue-200: #B3DAFF;
$raw-blue-300: #8EC5FF;
$raw-blue-400: #61A6FF;
$raw-blue-500: #3D80FB;
$raw-blue-600: #305CE0;
$raw-blue-700: #2348C2;
$raw-blue-800: #0D2F81;
$raw-blue-900: #0D2F81;

// GRAY
$raw-gray-50: #F4F7F9;
$raw-gray-100: #ECF0F3;
$raw-gray-200: #DAE0E5;
$raw-gray-300: #B1B8BE;
$raw-gray-400: #879097;
$raw-gray-500: #6D7278;
$raw-gray-600: #43464A;
$raw-gray-700: #1F2123;
$raw-gray-800: #121212;
$raw-gray-900: #0A0A0A;
$raw-black-alpha-600: rgba(0, 0, 0, 48);

// GREEN
$raw-green-50: #DAFCE4;
$raw-green-100: #C5F6D4;
$raw-green-200: #9FE6B7;
$raw-green-300: #77D498;
$raw-green-400: #43B874;
$raw-green-500: #20975A;
$raw-green-600: #107747;
$raw-green-700: #15603F;
$raw-green-800: #173D2B;
$raw-green-900: #142B20;

// YELLOW
$raw-yellow-50: #FEF5CD;
$raw-yellow-100: #FBEBA7;
$raw-yellow-200: #F2D564;
$raw-yellow-300: #E2BE3C;
$raw-yellow-400: #C69F20;
$raw-yellow-500: #A67F12;
$raw-yellow-550: #956F0D;
$raw-yellow-600: #85620B;
$raw-yellow-700: #6F4F0B;
$raw-yellow-800: #493109;
$raw-yellow-900: #362305;

// RED
$raw-red-50: #FEF0EF;
$raw-red-100: #FDE5E3;
$raw-red-200: #FCCAC7;
$raw-red-300: #F8AFA9;
$raw-red-400: #ED8780;
$raw-red-500: #DC5B56;
$raw-red-600: #C22E31;
$raw-red-700: #A8161E;
$raw-red-800: #6D1210;
$raw-red-900: #4C110B;

// WHITE
$raw-white: #FFFFFF;
75 changes: 75 additions & 0 deletions packages/client/src/arpa_reporter/scss/colors-semantic-tokens.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
/**
* colors-semantic-tokens.scss
*
* Semantic token definition for USDR style guide.
*
* Please refer to USDR style guide definition in Figma:
* https://www.figma.com/file/HWu4iIjcoX2txuN543qzIB/USDR-Design-System?type=design&node-id=8%3A2&mode=design&t=8mml86X91f9FzVAE-1
*/

@import './colors-base-tokens.scss';

// USDR BRAND
$brand-primary: $usdr-brand-primary;
$brand-hover: $raw-blue-700;
$brand-active: $raw-blue-800;
$brand-content: $raw-white;
$brand-accent: $raw-blue-100;
$brand-accentContent: $raw-gray-700;

// POSITIVE
$positive-default: $raw-green-600;
$positive-hover: $raw-green-700;
$positive-active: $raw-green-800;
$positive-content: $raw-white;
$positive-accent: $raw-green-100;
$positive-accentContent: $raw-gray-700;

// NEGATIVE
$negative-default: $raw-red-600;
$negative-hover: $raw-red-700;
$negative-active: $raw-red-800;
$negative-content: $raw-white;
$negative-accent: $raw-red-100;
$negative-accentContent: $raw-gray-700;

// WARNING
$warning-default: $raw-yellow-550;
$warning-hover: $raw-yellow-600;
$warning-active: $raw-yellow-700;
$warning-content: $raw-white;
$warning-accent: $raw-yellow-50;
$warning-accentContent: $raw-gray-700;

// INFO
$info-default: $raw-blue-600;
$info-hover: $raw-blue-700;
$info-active: $raw-blue-800;
$info-content: $raw-white;
$info-accent: $raw-blue-100;
$info-accentContent: $raw-gray-700;

// SURFACE
$surface-foreground: $raw-white;
$surface-background: $raw-white;
$surface-accent: $raw-gray-50;
$surface-canvas: $raw-gray-50;
$surface-overlay: $raw-black-alpha-600;

// BORDER
$border: $raw-gray-300;
$border-hover: $raw-gray-400;

// ICON
$icon-default: $raw-gray-600;

// INTERACTIVE
$interactive-active: $raw-blue-50;

// TEXT
$text-primary: $raw-gray-700;
$text-secondary: $raw-gray-600;
$text-placeholder: $raw-gray-500;

// LINKS
$link-back: $raw-gray-500;
Loading

0 comments on commit 8003e47

Please sign in to comment.