Ho to add alt attribute for the React coreUI CAvatar img?
We have the below code to display the image as an avatar in our application, but while doing the web accessibility test we get a Missing alternative text error for this image.
<CAvatar style={{backgroundColor:"#71c6a2"}} src='/assets/img/avatars/power.jpg' size="lg" />
So I tried to add alt text like below
<CAvatar style={{backgroundColor:"#71c6a2"}} src='/assets/img/avatars/power.jpg' size="lg" alt="power" />
but the alt text is applied for the outside div of the avatar.
How to add alt text for img attribute when using CAvatar?
here is the generated HTML for ref: <div class="avatar avatar-lg" alt="Yet-to-Start" style="background-color: rgb(113, 198, 162);"><img src="/assets/img/avatars/power.jpg" class="avatar-img"></div>
Related
I have the following page (the first icon comes from a list that display the items I have, and the second is from a form to add new items to the list):
When I select another svg to be added (click on the second icon), the first icon automatically changes to :
I am using chrome , and this only happens when using a mac, not in windows
The code to display the first and second icon is:
<p
dangerouslySetInnerHTML={{
__html: image,
}}
/>
And the code of the icon picker (second icon) (to display I also use the previous code)
<input
onChange={event => handleImageChange(event, item)}
accept="image/*"
className={classes.hidden}
id={`raised-button-file-update-${id}`}
type="file"
/>
Any thoughts about why is this happening only in IOS?
I'm using material-ui as my css framework and I want to select button that contains a specific text.
My current code:
cy.get('button').contains('Edit Claim').should('be.disabled');
It fails because the button component of material ui outputs the text inside a div so cypress is asserting the disabled attr to the div. I want it to assert to the button.
Edit:
I solved it using cy.contains('button', 'Edit Claim').should('be.disabled');
On the Material-UI demo page the label is in a child <span> (not <div>),
<button class="MuiButtonBase-root MuiButton-root MuiButton-contained Mui-disabled Mui-disabled" tabindex="-1" type="button" disabled="">
<span class="MuiButton-label">Disabled</span>
</button>
but there may be variations - in any case, you can reference the button by adding .parent() to the test
cy.visit('https://material-ui.com/components/buttons/');
cy.get('button')
.contains('Disabled') // span is the subject
.parent() // move up to the button
.should('be.disabled');
Is there a way to show the react-bootstrap modal inside a specific div and not the entire screen?
The code looks like this:
<div>
<textarea />
<Modal>....</Modal>
</div>
I want to show the modal on top of textarea. Any help?
PS Got the solution. Had to create a wrapper for modal and adjust styling.
I would like to build a salesforce component where user will provide image link & the component will display the image. So I tried following code
lightning component
<aura:component implements="flexipage:availableForAllPageTypes" access="global"
controller="MyController" >
<lightning:card title="Partner Information">
<Div>
<p><lightning:input aura:name="image" label ="Enter image url" type="text"/></p>
<br></br>
<img url="{!image}" />
</Div>
</lightning:card>
</aura:component>
But it's not displaying the image after inserting the image url
I also tried with the option
<img url="{!v.image}" />
but I got the error message Access Check Failed! AttributeSet.get(): attribute 'image' of component
Can you guide me to display the image?
So the proper way to handle this would be by using the aura:html component. There are a few parameters you would set for this:
aura:id- String- your id to locate the elements within JS
tag- String- the html tag
HTMLAttributes- Map- No need to set this explicitly on the .cmp, we'll use Js
<!--YourComponent.cmp-->
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable" access="global" >
<!--Remember to define your binding attribute-->
<aura:attribute name="image" type="String"/>
<lightning:card title="Partner Information">
<div class="slds-p-around_medium">
<p>
<!--Set you attribute as the value of the lightning:input component-->
<lightning:input aura:name="image"
label ="Enter image url"
value="{!v.image}"
type="text"
onchange="{!c.handleUrlChange}"/>
</p>
<br/>
<!--Set the aura:id so you can access it in js, use component.find to locate-->
<aura:html aura:id="imgDiv" tag="img"/>
</div>
</lightning:card>
</aura:component>
//YourComponentController.js
({
handleUrlChange : function(component, event, helper) {
//Grab the value from the attribute or you can use event.getParam("value");
var imageUrl = component.get("v.image");
//Define the map, find the img tag generated by aura:html,
//and set the HTMLAttributes to your map
var newMapAttributes = {"src": imageUrl};
component.find("imgDiv").set("v.HTMLAttributes",newMapAttributes);
}
})
You are also using the url attribute on your image tag instead of the src attribute. You may be able to directly bind to the img element, but aura:html works really well. Hope that answers your question!
I am using a set if images in a row. There is a text box input above these images and based on the input i need to enable/disable images?
How to do this in React.
I tried adding "disable" to image tag and disabled=true but both didn't work.
const IBox = props =>
<div style={props.styles.imageContainer} >
<img id="image1" src={require('../../../public/images/image1.jpg')} alt = "Image1" /><span > </span>
<img id="image2" src={require('../../../public/images/image2.jpg')} alt ="Image2" /><span> </span>
<img id="image3" src={require('../../../public/images/image3.jpg')} alt ="Image3" /><span> </span>
<img id="image4" src={require('../../../public/images/image4.jpg')} alt ="Image4"/>
</div>
export default IBox;
There is no such thing as "disabling" images. You can only disable form elements, as they are the only interactive html elements. See w3c specification to see which items can be disabled exactly.
That is unless you write your own custom definition for disabling images. For example, you could add a class disabled to the image, and style that class to be greyed out, using CSS.
You could also combine CSS with WebComponents to have an element that with a disabled attribute. You could style its disabled style.
See also docs for the <img /> tag.
If you mean hide/show.. you simply may use state to disable your image i.e.
{this.state.img1 && <img id="image1" src={require('../../../public/images/image1.jpg')} alt = "Image1" />}
if by disable you mean to make it like grey, low opacity,etc... you may use an state :
style= this.state.disable? {{style_disable}}: {{style_enable}}
Use <input /> instead of <img /> as in this example.
You can provide the same functionality with the type="image" attribute. This way you can use the disabled attribute.
<input
type="image"
disabled={disabled}
/>