Skip to content

Commit 1ba1dbf

Browse files
hmillersarahhmillersarah
committed
fix accessibility issues
1 parent a4d4d10 commit 1ba1dbf

5 files changed

Lines changed: 18 additions & 66 deletions

File tree

‎ims-advocacy.html‎

Lines changed: 1 addition & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -289,37 +289,9 @@ <h5>IMS support</h5>
289289
<div id="content" class="main-content">
290290
<main id="main">
291291
<!-- =========================== Hero =========================== -->
292-
<!-- <section class="engage-bg">
293-
<div id="intro-section" class="pure-g hero">
294-
<div class="pure-u-1 pure-u-md-1-24">
295-
<img src="wp-content/icons/icon_engage.svg" alt="" class="icon">
296-
</div>
297-
<div class="pure-u-1 pure-u-md-23-24">
298-
<h6>Engage</h6>
299-
<h1>Advocates and ideas</h1>
300-
<p>Get an IMS advocate to represent you. Also, submit your ideas to enhance the IMS product.</p>
301-
<div class="button-g">
302-
<a class="button button-primary"
303-
onfocus="closeNavMenu()"
304-
target="_blank"
305-
aria-label="Request an IMS Advocate"
306-
href="mailto:deepakk@us.ibm.com"
307-
rel="noopener noreferrer">
308-
Request an IMS advocate
309-
</a>
310-
<a class="button button-secondary"
311-
aria-label="Submit ideas for enhancements"
312-
href="#ideas"
313-
rel="noopener noreferrer">
314-
Submit ideas for enhancements
315-
</a>
316-
</div>
317-
</div>
318-
</div>
319-
</section> -->
320-
321292
<hero-section
322293
name="Advocates and ideas"
294+
image="wp-content/icons/icon_engage.svg"
323295
section="Engage"
324296
desc="Get an IMS advocate to represent you. Also, submit your ideas to enhance the IMS product."
325297
linktext="Request an IMS advocate"

‎ims-videos.html‎

Lines changed: 2 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -312,33 +312,11 @@ <h2 class="video-name"></h2>
312312
<div id="content" class="main-content">
313313
<main id="main">
314314
<!-- =========================== Hero =========================== -->
315-
<!-- <section class="learn-bg">
316-
<div id="intro-section" class="pure-g hero">
317-
<div class="pure-u-1 pure-u-md-1-24">
318-
<img src="wp-content/Icon_Managed ACBs_IMS DatabasePage.svg" alt="" class="icon icon-lg">
319-
</div>
320-
<div class="pure-u-1 pure-u-md-23-24">
321-
<h6>Learn</h6>
322-
<h1>IMS videos</h1>
323-
<p>See the latest IMS educational videos here or click <b>Visit IBM MediaCenter</b> to search for more IMS video content.</p>
324-
<div class="button-g">
325-
<a class="button button-primary"
326-
onfocus="closeNavMenu()"
327-
target="_blank"
328-
aria-label="Visit IBM MediaCenter"
329-
href="https://mediacenter.ibm.com/channel/IMS%2BEducational%2BVideos/122579632"
330-
rel="noopener noreferrer">
331-
Visit IBM MediaCenter →
332-
</a>
333-
</div>
334-
</div>
335-
</div>
336-
</section> -->
337-
338315
<hero-section
339316
name="IMS videos"
317+
image="wp-content/Icon_Managed ACBs_IMS DatabasePage.svg"
340318
section="Learn"
341-
desc="<p>See the latest IMS educational videos here or click <b>Visit IBM MediaCenter</b> to search for more IMS video content.</p>"
319+
desc="<span>See the latest IMS educational videos here or click <b>Visit IBM MediaCenter</b> to search for more IMS video content.</span>"
342320
linktext="Visit IBM MediaCenter →"
343321
link="https://mediacenter.ibm.com/channel/IMS%2BEducational%2BVideos/122579632"
344322
></hero-section>

‎web-components/hero-section/hero-section.css‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,15 @@ img {
3434
width: 2em;
3535
}
3636

37+
h2, h6, p {
38+
padding: 0em;
39+
margin: 0em;
40+
}
41+
3742
.section {
3843
grid-column: 2;
3944
grid-row: 1;
45+
font-size: 1em;
4046
font-weight: bold;
4147
}
4248

@@ -92,6 +98,5 @@ img {
9298
flex-flow: column wrap;
9399
align-items: flex-start;
94100
gap: 1em;
95-
padding: 3em;
96101
}
97102
}

‎web-components/hero-section/hero-section.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<link href="web-components/hero-section/hero-section.css" rel="stylesheet">
22
<section class="hero">
33
<img src="" alt="" class="image">
4-
<span class="section"></span>
5-
<span class="name"></span>
6-
<span class="desc"></span>
4+
<h6 class="section"></h6>
5+
<h2 class="name"></h2>
6+
<p class="desc"></p>
77
<div class="links">
88
<a onfocus="closeNavMenu()"
99
rel="noopener noreferrer"

‎web-components/hero-section/hero-section.js‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,10 @@ function createComponent(html) {
99
// Set text content
1010
function setContent(cssSelector, content, shadow) {
1111
const selector = shadow.querySelector(cssSelector);
12-
// Check if p tag is used in desc
13-
if (content.includes('<p>')) {
14-
// Create paragraph element and add it to the document
15-
let paragraph = document.createElement('p');
16-
paragraph.innerHTML = content;
17-
selector.appendChild(paragraph);
12+
// Check if span tag is used in desc
13+
if (content.includes('<span>')) {
14+
// Update HTML
15+
selector.innerHTML = content;
1816
} else {
1917
// Update the text
2018
selector.textContent = content;
@@ -49,7 +47,7 @@ function createComponent(html) {
4947

5048
// Return array of properties to observe
5149
static get observedAttributes() {
52-
return ['name', 'section', 'desc', 'desc2', 'linktext', 'link', 'linktext2', 'link2'];
50+
return ['name', 'image', 'section', 'desc', 'desc2', 'linktext', 'link', 'linktext2', 'link2'];
5351
}
5452

5553
// Called when an attribute is defined or changed
@@ -65,6 +63,7 @@ function createComponent(html) {
6563
shadow.innerHTML = html;
6664

6765
// Set content
66+
setImage('.image', this.image, shadow);
6867
setContent('.section', this.section, shadow);
6968
setContent('.name', this.name, shadow);
7069
setContent('.desc', this.desc, shadow);
@@ -86,11 +85,9 @@ function createComponent(html) {
8685
switch(this.section) {
8786
case 'Engage':
8887
heroSection.classList.add('engage-bg');
89-
setImage('.image', 'wp-content/icons/icon_engage.svg', shadow);
9088
break;
9189
case 'Learn':
9290
heroSection.classList.add('learn-bg');
93-
setImage('.image', 'wp-content/Icon_Managed ACBs_IMS DatabasePage.svg', shadow);
9491
break;
9592
}
9693
}

0 commit comments

Comments
 (0)