I have a dynamically updated notification section on my website inside my div class='notification'(the parent div is always there). when the success message appears, the NVDA screen reader in windows 10 edge does not read it. How can I make it read the message?
<div class="notification">
<h6 tabindex="0" role="alert" aria-live="polite" aria-busy="true">Changes saved successfully.</h6>
<button tabindex="1" type="button" data-testid="dismiss-button" aria-label="Dismiss">
<span class="MuiIconButton-label"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg>
</span>
</button>
</div>
Try to do something like this:
<div class="notification" aria-labelledby="my-message">
<h6 id="my-message" tabindex="0" role="alert" aria-live="polite" aria-busy="true">Changes saved successfully.</h6>
<button tabindex="1" type="button" data-testid="dismiss-button" aria-label="Dismiss">
<span class="MuiIconButton-label"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg>
</span>
</button>
</div>
Related
I need to change plus to minus (contrary too) while collapsing accordeon tab which is written with svg.
When I click on tab, tab collapses, but plus not changing to minus, and minus to plus.
Here is html code:
<div class="accordion pt-2 w-100" id="myAccordion">
<div class="accordion-item">
<div class="accordion-header" id="headingOne">
<button type="button" class="accordion-btn collapsed btn text-left p-2 btn-light btn-block" data-bs-toggle="collapse" data-bs-target="#collapseOne"
aria-expanded="false" aria-controls="accordion-1" style="overflow-anchor: none;">
<svg viewBox="0 0 16 16" width="1em" height="1em" focusable="false" role="img" aria-label="plus square" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus-square text-dark b-icon bi">
<g transform="translate(8 8) scale(0.8 0.8) translate(-8 -8)">
<path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"></path>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"></path>
</g>
</svg>
<span class="ml-1 h4 text-dark">Tab1</span>
</button>
</div>
<div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
<div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit
</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" id="headingOne">
<button type="button" class="accordion-btn collapsed btn text-left p-2 btn-light btn-block collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo"
aria-expanded="false" aria-controls="accordion-1" style="overflow-anchor: none;">
<svg viewBox="0 0 16 16" width="1em" height="1em" focusable="false" role="img" aria-label="plus square" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus-square text-dark b-icon bi">
<g transform="translate(8 8) scale(0.8 0.8) translate(-8 -8)">
<path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"></path>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"></path>
</g>
</svg>
<span class="ml-1 h4 text-dark">Tab2</span>
</button>
</div>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
<div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit
</p>
</div>
</div>
</div>
</div>
Also here I have css code for accordeon:
.accordion-btn {
font-size: 24px;
}
.accordion-button::after {
position: absolute;
left: 0;
}
Thanks!
So from Figma, I exported icon as SVG and put it in my code.
my UI Designer mentioned it looks different in Chrome on Mac, somehow it slides from the center
I tried to check it but it seems fine on my computer (Chrome on Windows),
I tried to overlay Figma box and SVG box.
This is the detailed version with grid and 1px border.
my UI Designer tried to put on grid and it shows that it slides half a pixel.
I only put styling : vertical-align: middle; and didn't try flex center or anything bcs other icons seem fine.
here's the SVG snippet
<svg xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
preserveAspectRatio="xMidYMid meet"
width="18"
height="18"
viewBox="0 0 18 18"
style="vertical-align: middle;">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.55 10.05H4.45001C3.86971 10.05 3.40001 9.57958 3.40001 8.99998C3.40001 8.42038 3.86971 7.94998 4.45001 7.94998H13.55C14.1303 7.94998 14.6 8.42038 14.6 8.99998C14.6 9.57958 14.1303 10.05 13.55 10.05ZM9 2C5.1339 2 2 5.1346 2 9C2 12.8654 5.1339 16 9 16C12.8661 16 16 12.8654 16 9C16 5.1346 12.8661 2 9 2Z"/>
</svg>
My friend mentioned it might be because of anti-aliasing changing the SVG Path coordinates? I tried to google up but found nothing, I'm just curious if anyone knows better about this
The path itself is exactly 14x14, so in this example I moved the path to 0,0 and made the viewBox="0 0 14 14". Now without all the other attributes the SVG should fill out the parent element. Now, it is easier to control the width and the height. In some cases you might need to set the SVG to display block.
div {
margin: 1px;
}
.w100 {
width: 200px;
background-color: orange;
}
.w100 svg {
display: block;
}
.em1 {
background-color: lime;
width: 200px;
}
.em1 svg {
height: 1em;
}
<div class="w100">
<svg xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
stroke="none"
viewBox="0 0 14 14">
<path fill-rule="evenodd" clip-rule="evenodd" d="M 11.55 8.05 H 2.45 C 1.8697 8.05 1.4 7.5796 1.4 7 C 1.4 6.4204 1.8697 5.95 2.45 5.95 H 11.55 C 12.1303 5.95 12.6 6.4204 12.6 7 C 12.6 7.5796 12.1303 8.05 11.55 8.05 Z M 7 0 C 3.1339 0 0 3.1346 0 7 C 0 10.8654 3.1339 14 7 14 C 10.8661 14 14 10.8654 14 7 C 14 3.1346 10.8661 0 7 0 Z"/>
</svg>
</div>
<div class="em1">
<span>Test: </span>
<svg xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
stroke="none"
viewBox="0 0 14 14">
<path fill-rule="evenodd" clip-rule="evenodd" d="M 11.55 8.05 H 2.45 C 1.8697 8.05 1.4 7.5796 1.4 7 C 1.4 6.4204 1.8697 5.95 2.45 5.95 H 11.55 C 12.1303 5.95 12.6 6.4204 12.6 7 C 12.6 7.5796 12.1303 8.05 11.55 8.05 Z M 7 0 C 3.1339 0 0 3.1346 0 7 C 0 10.8654 3.1339 14 7 14 C 10.8661 14 14 10.8654 14 7 C 14 3.1346 10.8661 0 7 0 Z"/>
</svg>
</div>
<div class="MuiGrid-root jss62 MuiGrid-item MuiGrid-grid-xs-12"><div class="MuiGrid-root jss107" style="background: linear-gradient(to left, rgb(244, 67, 54) 40%, lightgrey 150%); box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 8px 8px; border: 1.5px solid rgba(0, 0, 0, 0.3);"><div class="MuiCardHeader-root"><div class="MuiCardHeader-avatar"><span class="material-icons MuiIcon-root jss112 MuiIcon-fontSizeLarge" aria-hidden="true">airplanemode_active</span></div><div class="MuiCardHeader-content"><span class="MuiTypography-root MuiCardHeader-title jss110 MuiTypography-body2 MuiTypography-displayBlock">Card-662</span><span class="MuiTypography-root MuiCardHeader-subheader jss111 MuiTypography-body2 MuiTypography-colorTextSecondary MuiTypography-displayBlock">09/30/2021</span></div><div class="MuiCardHeader-action"><div><button class="MuiButtonBase-root MuiIconButton-root jss112 MuiIconButton-sizeSmall" tabindex="0" type="button" aria-label="Activate"><span class="MuiIconButton-label"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"></path></svg></span><span class="MuiTouchRipple-root"></span></button><button class="MuiButtonBase-root MuiIconButton-root jss112 MuiIconButton-sizeSmall" tabindex="0" type="button" aria-label="Edit"><span class="MuiIconButton-label"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg></span><span class="MuiTouchRipple-root"></span></button><button class="MuiButtonBase-root MuiIconButton-root jss112 MuiIconButton-sizeSmall" tabindex="0" type="button" aria-label="delete"><span class="MuiIconButton-label"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path></svg></span><span class="MuiTouchRipple-root"></span></button></div></div></div><div class="MuiCardContent-root jss108"><h6 class="MuiTypography-root jss109 null MuiTypography-subtitle2">Card-661-description</h6></div></div><div class="MuiGrid-root jss107" style="background: linear-gradient(to left, rgb(244, 67, 54) 40%, lightgrey 150%);"><div class="MuiCardHeader-root"><div class="MuiCardHeader-avatar"><span class="material-icons MuiIcon-root jss112 MuiIcon-fontSizeLarge" aria-hidden="true">airplanemode_active</span></div><div class="MuiCardHeader-content"><span class="MuiTypography-root MuiCardHeader-title jss110 MuiTypography-body2 MuiTypography-displayBlock">Card-661</span><span class="MuiTypography-root MuiCardHeader-subheader jss111 MuiTypography-body2 MuiTypography-colorTextSecondary MuiTypography-displayBlock">09/30/2021</span></div><div class="MuiCardHeader-action"><div><button class="MuiButtonBase-root MuiIconButton-root jss112 MuiIconButton-sizeSmall" tabindex="0" type="button" aria-label="Activate" title="Activate"><span class="MuiIconButton-label"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"></path></svg></span><span class="MuiTouchRipple-root"></span></button><button class="MuiButtonBase-root MuiIconButton-root jss112 MuiIconButton-sizeSmall" tabindex="0" type="button" aria-label="Edit" title="Edit"><span class="MuiIconButton-label"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg></span><span class="MuiTouchRipple-root"></span></button><button class="MuiButtonBase-root MuiIconButton-root jss112 MuiIconButton-sizeSmall" tabindex="0" type="button" aria-label="delete" title="Delete"><span class="MuiIconButton-label"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path></svg></span><span class="MuiTouchRipple-root"></span></button></div></div></div><div class="MuiCardContent-root jss108"><h6 class="MuiTypography-root jss109 null MuiTypography-subtitle2">Card-661-description</h6></div></div><div class="MuiGrid-root jss107" style="background: linear-gradient(to left, rgb(244, 67, 54) 40%, lightgrey 150%);"><div class="MuiCardHeader-root"><div class="MuiCardHeader-avatar"><span class="material-icons MuiIcon-root jss112 MuiIcon-fontSizeLarge" aria-hidden="true">airplanemode_active</span></div><div class="MuiCardHeader-content"><span class="MuiTypography-root MuiCardHeader-title jss110 MuiTypography-body2 MuiTypography-displayBlock">Card-64</span><span class="MuiTypography-root MuiCardHeader-subheader jss111 MuiTypography-body2 MuiTypography-colorTextSecondary MuiTypography-displayBlock">09/24/2021</span></div><div class="MuiCardHeader-action"><div><button class="MuiButtonBase-root MuiIconButton-root jss112 MuiIconButton-sizeSmall" tabindex="0" type="button" aria-label="Activate" title="Activate"><span class="MuiIconButton-label"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"></path></svg></span><span class="MuiTouchRipple-root"></span></button><button class="MuiButtonBase-root MuiIconButton-root jss112 MuiIconButton-sizeSmall" tabindex="0" type="button" aria-label="Edit" title="Edit"><span class="MuiIconButton-label"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg></span><span class="MuiTouchRipple-root"></span></button><button class="MuiButtonBase-root MuiIconButton-root jss112 MuiIconButton-sizeSmall" tabindex="0" type="button" aria-label="delete" title="Delete"><span class="MuiIconButton-label"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path></svg></span><span class="MuiTouchRipple-root"></span></button></div></div></div><div class="MuiCardContent-root jss108"><h6 class="MuiTypography-root jss109 null MuiTypography-subtitle2">Card-64-description</h6></div></div></div>
i wanted to navigate to element, where we have "Card-662"text. can anyone please help me with the xpath?
This question already has answers here:
Closing SVG tags, explicit or self closing?
(2 answers)
Closed 5 years ago.
The reason why I asked was because, everyone does it like this.
></path>
All the tutorials show /> without the </path>
Spotify:
<svg class="icon-play" viewBox="0 0 85 100"><path fill="currentColor" d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path></svg>
Google:
<svg width="100" height="100" style="background-color:pink;" viewBox="0 0 24 24">
<path fill="currentColor" style="fill:green;" d="M7.995,18.9899999 13.68046871,15.4912499 13.68046871,8.49374997 7.995,4.995 Z M13.6804687,15.4912499 19.3659374,11.99249994 19.3659374,11.99249994 13.6804687,8.49374997 Z"></path>
</svg>
Twitter:
<svg style="fill: currentcolor;color: #1DA1F2;" width="67" height="67" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10"></circle>
<path fill="white" d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path fill="green" d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" ></path>
</svg>
YouTube:
<svg width="100" height="100" version="1.1" style="background-color:black;" viewBox="0 0 36 36">
<path fill="currentColor" style="fill:#0059dd; "d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z"></path>
</svg>
Neither is correct, and neither is incorrect. Both ways are valid. Use whichever you prefer.
Obviously if the path has child elements (eg. <title> or <animate> then you need to use the closing tag. But otherwise, it doesn't matter.
How do you get an SVG Font to work in IE 8?
Here I have a single glyph defined and it displays perfectly in all browsers I've tried except for IE8 (link to source):
<html>
<head>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" id="Layer_1" enable-background="new 0 0 542 324" space="preserve" viewBox="0 0 542 324" version="1.1" y="0px" x="0px">
<defs>
<font id="PlainBlackNormal" horiz-adv-x="199">
<glyph unicode="!" horiz-adv-x="253" d="M232 798q0 -24 -8 -62t-18 -78t-19.5 -74t-12.5 -50l-5 -25q-3 -11 -5.5 -25t-4 -33t-1.5 -47q0 -33 5 -56l7 -36q2 -13 -0.5 -19t-16.5 -6q-11 0 -23.5 22.5t-24 56t-20 74t-11.5 76.5l20 170q-1 17 -5 37t-11 35t-17.5 21.5t-24.5 -4.5h-16q0 3 -2.5 5t-2.5 5 q0 5 26.5 21t62.5 42q1 0 14 10l28 23q15 13 30 23.5t21 10.5q12 0 23.5 -29t11.5 -88zM238 119q0 -12 -24.5 -37t-59.5 -70q-4 3 -18 16t-29.5 29.5t-27.5 33t-12 26.5q0 3 11.5 19t26.5 34l27 31q12 14 15 14q1 0 15.5 -13.5t31.5 -31t30.5 -33t13.5 -18.5z"></glyph>
<font-face font-family="PlainBlackNormal" units-per-em="1000" ascent="1000" descent="-200"></font-face>
</font>
</defs>
<text id="one" font-size="84.06" space="preserve" transform="matrix(1 0 0 1 47.276 67.043)" font-family="PlainBlackNormal" fill="#000" color="#000">!</text>
</svg>
</body>
What am I doing wrong that would prevent the above from working in IE8?
Since IE8 doesn't have SVG support, it also doesn't support SVG fonts.