Skip to content
This repository was archived by the owner on Feb 5, 2022. It is now read-only.

Commit 4758291

Browse files
WholloranWholloran
authored
Merge pull request #337 from openforge/accesibility-fixes
Best practices & Accesibility fixes
2 parents 7f0e241 + b30c16e commit 4758291

File tree

8 files changed

+762
-553
lines changed

8 files changed

+762
-553
lines changed

‎src/components.d.ts‎

Lines changed: 2 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -36,18 +36,13 @@ declare global {
3636
}
3737

3838
interface AppCta {
39-
'hideButton': boolean;
40-
'linkUrl': string;
39+
4140
}
4241

4342
interface AppFooter {
4443

4544
}
4645

47-
interface AppHeroHome {
48-
'textNoWrap': boolean;
49-
}
50-
5146
interface AppImg {
5247
'alt': string;
5348
'fit': boolean;
@@ -190,14 +185,6 @@ declare global {
190185
};
191186

192187

193-
interface HTMLAppHeroHomeElement extends StencilComponents.AppHeroHome, HTMLStencilElement {}
194-
195-
var HTMLAppHeroHomeElement: {
196-
prototype: HTMLAppHeroHomeElement;
197-
new (): HTMLAppHeroHomeElement;
198-
};
199-
200-
201188
interface HTMLAppImgElement extends StencilComponents.AppImg, HTMLStencilElement {}
202189

203190
var HTMLAppImgElement: {
@@ -380,7 +367,6 @@ declare global {
380367
'app-carousel-indicators': JSXElements.AppCarouselIndicatorsAttributes;
381368
'app-cta': JSXElements.AppCtaAttributes;
382369
'app-footer': JSXElements.AppFooterAttributes;
383-
'app-hero-home': JSXElements.AppHeroHomeAttributes;
384370
'app-img': JSXElements.AppImgAttributes;
385371
'app-input': JSXElements.AppInputAttributes;
386372
'app-members': JSXElements.AppMembersAttributes;
@@ -413,18 +399,13 @@ declare global {
413399
}
414400

415401
export interface AppCtaAttributes extends HTMLAttributes {
416-
'hideButton'?: boolean;
417-
'linkUrl'?: string;
402+
418403
}
419404

420405
export interface AppFooterAttributes extends HTMLAttributes {
421406

422407
}
423408

424-
export interface AppHeroHomeAttributes extends HTMLAttributes {
425-
'textNoWrap'?: boolean;
426-
}
427-
428409
export interface AppImgAttributes extends HTMLAttributes {
429410
'alt'?: string;
430411
'fit'?: boolean;
@@ -550,7 +531,6 @@ declare global {
550531
'app-carousel-indicators': HTMLAppCarouselIndicatorsElement
551532
'app-cta': HTMLAppCtaElement
552533
'app-footer': HTMLAppFooterElement
553-
'app-hero-home': HTMLAppHeroHomeElement
554534
'app-img': HTMLAppImgElement
555535
'app-input': HTMLAppInputElement
556536
'app-members': HTMLAppMembersElement
@@ -579,7 +559,6 @@ declare global {
579559
'app-carousel-indicators': HTMLAppCarouselIndicatorsElement;
580560
'app-cta': HTMLAppCtaElement;
581561
'app-footer': HTMLAppFooterElement;
582-
'app-hero-home': HTMLAppHeroHomeElement;
583562
'app-img': HTMLAppImgElement;
584563
'app-input': HTMLAppInputElement;
585564
'app-members': HTMLAppMembersElement;

‎src/components/app-nav-header/app-nav-header.tsx‎

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -77,59 +77,59 @@ export class AppNavHeader {
7777
{translate('nav.links.home')}
7878
</stencil-route-link>
7979
</li>
80-
<li
81-
class="nav-item dropdown"
82-
data-target="#navbarSupportedContent"
80+
<li
81+
class="nav-item dropdown"
82+
data-target="#navbarSupportedContent"
83+
>
84+
<a
85+
class="nav-link dropdown-toggle"
86+
id="navbarDropdown"
87+
role="button"
88+
data-toggle="dropdown"
89+
aria-haspopup="true"
90+
aria-expanded="false"
8391
>
84-
<a
85-
class="nav-link dropdown-toggle"
86-
id="navbarDropdown"
87-
role="button"
88-
data-toggle="dropdown"
89-
aria-haspopup="true"
90-
aria-expanded="false"
92+
Services
93+
</a>
94+
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
95+
<stencil-route-link
96+
url="/services/app-developer"
97+
anchorClass="nav-link dropdown-item"
98+
activeClass="active"
9199
>
92-
Services
93-
</a>
94-
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
95-
<stencil-route-link
96-
url="/services/app-developer"
97-
anchorClass="nav-link dropdown-item"
98-
activeClass="active"
99-
>
100-
Development
101-
</stencil-route-link>
102-
<stencil-route-link
103-
url="/services/app-designer"
104-
anchorClass="nav-link dropdown-item"
105-
activeClass="active"
106-
>
107-
UX/UI Design
108-
</stencil-route-link>
109-
<stencil-route-link
110-
url="/services/startup-consulting"
111-
anchorClass="nav-link dropdown-item"
112-
activeClass="active"
113-
>
114-
Consulting
115-
</stencil-route-link>
116-
</div>
117-
</li>
100+
Development
101+
</stencil-route-link>
102+
<stencil-route-link
103+
url="/services/app-designer"
104+
anchorClass="nav-link dropdown-item"
105+
activeClass="active"
106+
>
107+
UX/UI Design
108+
</stencil-route-link>
109+
<stencil-route-link
110+
url="/services/startup-consulting"
111+
anchorClass="nav-link dropdown-item"
112+
activeClass="active"
113+
>
114+
Consulting
115+
</stencil-route-link>
116+
</div>
117+
</li>
118118
<li
119119
class="nav-item dropdown"
120120
data-target="#navbarSupportedContent"
121121
>
122122
<a
123123
class="nav-link dropdown-toggle"
124-
id="navbarDropdown"
124+
id="navbarDropdown1"
125125
role="button"
126126
data-toggle="dropdown"
127127
aria-haspopup="true"
128128
aria-expanded="false"
129129
>
130130
{translate('nav.links.about')}
131131
</a>
132-
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
132+
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
133133
<stencil-route-link
134134
url="/about"
135135
anchorClass="nav-link dropdown-item"

‎src/pages/app-case-study/app-case-study.tsx‎

Lines changed: 11 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,7 @@ export class AppCaseStudy {
2222
);
2323
document
2424
.querySelector("meta[property='og:url']")
25-
.setAttribute(
26-
'content',
27-
'https://openforge.io/juntoscope/'
28-
);
25+
.setAttribute('content', 'https://openforge.io/juntoscope/');
2926
document
3027
.querySelector("meta[property='og:image']")
3128
.setAttribute(
@@ -74,9 +71,9 @@ export class AppCaseStudy {
7471
</section>
7572
<section class="container product-section">
7673
<app-img
77-
class=""
78-
src="/assets/work-example-juntoscope-mobile.png"
79-
alt="juntoscope mobile view"
74+
class=""
75+
src="/assets/work-example-juntoscope-mobile.png"
76+
alt="juntoscope mobile view"
8077
/>
8178
<div class="text-container">
8279
<h2>The Product</h2>
@@ -89,6 +86,7 @@ export class AppCaseStudy {
8986
<a
9087
href="https://www.teamwork.com/partner/gqfq4mb55o"
9188
target="_blank"
89+
rel="noopener"
9290
>
9391
Teamwork.com
9492
</a>
@@ -213,21 +211,15 @@ export class AppCaseStudy {
213211
<h3>Design</h3>
214212
<p>
215213
We began the{' '}
216-
<stencil-route-link
217-
url="/services/app-designer"
218-
>
214+
<stencil-route-link url="/services/app-designer">
219215
design process
220216
</stencil-route-link>{' '}
221217
by researching similar apps on the marketplace and identifying
222218
features we liked and did not like about them. We then set up user
223219
flows and wireframing each identified screen. This process, along
224220
with the design and styling phase, occurs in{' '}
225-
<stencil-route-link
226-
url="/toolbox"
227-
>
228-
Sketch
229-
</stencil-route-link>
230-
. After completing the full skeleton, we reviewed each user flow and
221+
<stencil-route-link url="/toolbox">Sketch</stencil-route-link>.
222+
After completing the full skeleton, we reviewed each user flow and
231223
tried to identify any gaps or weaknesses in the user flow. From
232224
there, we made modifications and began identifying styles and colors
233225
for the app. We created a logo and a splash screen and applied the
@@ -238,9 +230,7 @@ export class AppCaseStudy {
238230
<h3>Development</h3>
239231
<p>
240232
We began the{' '}
241-
<stencil-route-link
242-
url="/services/app-developer"
243-
>
233+
<stencil-route-link url="/services/app-developer">
244234
development process
245235
</stencil-route-link>{' '}
246236
with a full design review. Our team worked closely with the
@@ -262,9 +252,7 @@ export class AppCaseStudy {
262252
<h3>What we learned</h3>
263253
<p>
264254
Throughout the process of developing JuntoScope,{' '}
265-
<stencil-route-link url="/about">
266-
our team
267-
</stencil-route-link>{' '}
255+
<stencil-route-link url="/about">our team</stencil-route-link>{' '}
268256
learned the importance of establishing a process that is fully
269257
understood by each and every member. Our company was going through a
270258
transitional phase early on in the development of JuntoScope
@@ -283,7 +271,7 @@ export class AppCaseStudy {
283271
<br />
284272
<br />
285273
As our team came close to launching{' '}
286-
<a href="http://try.juntoscope.com" target="_blank">
274+
<a href="http://try.juntoscope.com" target="_blank" rel="noopener">
287275
JuntoScope
288276
</a>
289277
, we learned from Teamwork.com that they were changing the way their

0 commit comments

Comments
 (0)