Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

issue: #4427; Added the Alternate text to image tags #4429

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

issue: #4427; Added the Alternate text to image tags #4429

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5f73234
issue: #4427; Added the Alternate text to image tags because alt text…
sathiyaIbe May 24, 2023
4400b7f
Cleared the error of testin in #4427
sathiyaIbe May 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -317,7 +317,7 @@ Sometimes it is convenient to use props to generate markup. Example, the [Label

```html
<a class="ui image label">
<img src="veronika.jpg">
<img src="veronika.jpg">
Veronika
<div class="detail">Friend</div>
</a>
Expand Down
10 changes: 5 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!-- Logo -->
<p align="center">
<a href="https://react.semantic-ui.com">
<img height="128" width="128" src="https://github.com/Semantic-Org/Semantic-UI-React/raw/master/docs/public/logo.png">
<img alt="Logo" height="128" width="128" src="https://github.com/Semantic-Org/Semantic-UI-React/raw/master/docs/public/logo.png">
</a>
</p>

Expand Down Expand Up @@ -36,9 +36,9 @@ See the [**Documentation**][2] for an introduction, usage information, and examp
## Built With

<p align="center">
<img height="50" src="https://github.com/Semantic-Org/Semantic-UI-React/raw/master/docs/public/amazon-logo.png" />
<img height="50" src="https://github.com/Semantic-Org/Semantic-UI-React/raw/master/docs/public/netflix-logo.png" />
<img height="50" src="https://github.com/Semantic-Org/Semantic-UI-React/raw/master/docs/public/microsoft-logo.png" />
<img alt="Amazon" height="50" src="https://github.com/Semantic-Org/Semantic-UI-React/raw/master/docs/public/amazon-logo.png" />
<img height="50" alt="Netflix" src="https://github.com/Semantic-Org/Semantic-UI-React/raw/master/docs/public/netflix-logo.png" />
<img height="50" alt="Microsoft" src="https://github.com/Semantic-Org/Semantic-UI-React/raw/master/docs/public/microsoft-logo.png" />
</p>

- Amazon Publishing — the full-service publisher of Amazon — [APub.com](https://amazonpublishing.amazon.com)
Expand Down Expand Up @@ -122,7 +122,7 @@ Created by [@levithomason][26] and an amazing community of [contributors][20].

Made possible only by [@jlukic][32] authoring [Semantic UI][5].

Blazing deployments by <a href="https://vercel.com/?utm_source=semantic-ui-react"><img height="12" width="14" src="https://github.com/Semantic-Org/Semantic-UI-React/raw/master/docs/public/vercel-logo.svg" /> Vercel</a>.
Blazing deployments by <a href="https://vercel.com/?utm_source=semantic-ui-react"><img alt="Logo" height="12" width="14" src="https://github.com/Semantic-Org/Semantic-UI-React/raw/master/docs/public/vercel-logo.svg" /> Vercel</a>.

[1]: https://github.com/Semantic-Org/Semantic-UI-React/blob/master/.github/CONTRIBUTING.md
[2]: https://react.semantic-ui.com/
Expand Down
7 changes: 4 additions & 3 deletions docs/src/components/CarbonAd/CarbonAdNative.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ class CarbonAdNative extends PureComponent {

return (
<a id={id} href={ad.statlink} target='_blank' rel='noopener noreferrer'>
<img src={ad.image} />
<img src={ad.image} alt="Ad" />
<span>{ad.company}</span>
{' — '}
<span>{ad.description}</span>
Expand All @@ -125,14 +125,15 @@ class CarbonAdNative extends PureComponent {
/>

{/* Impression */}
<img src={`${ad.statimp}`} style={{ display: 'none' }} />
<img alt="Ad" src={`${ad.statimp}`} style={{ display: 'none' }} />

{/* Pixel */}
{ad.pixel &&
ad.pixel
.split('||')
.map((pixel, i) => (
<img
<img
alt="Ad"
key={i}
src={`${pixel.replace('[timestamp]', ad.timestamp)}`}
style={{ display: 'none' }}
Expand Down
2 changes: 1 addition & 1 deletion docs/src/components/DocsLayout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ class DocsLayout extends Component {
<Grid.Column {...bottomColumnWidth} textAlign='center'>
Blazing deployments by{' '}
<a href='https://vercel.com/?utm_source=semantic-ui-react'>
<img height='12' width='14' src='/vercel-logo.svg' /> Vercel
<img height='12' width='14' alt="Vercel-Logo" src='/vercel-logo.svg' /> Vercel
</a>
.
</Grid.Column>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/examples/collections/Menu/Types/MenuExampleAttached.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const MenuExampleAttached = () => (
</Menu>

<Segment attached='bottom'>
<img src='/images/wireframe/paragraph.png' />
<img alt="WireFrame" src='/images/wireframe/paragraph.png' />
</Segment>
</div>
)
Expand Down
2 changes: 1 addition & 1 deletion docs/src/examples/collections/Menu/Types/MenuExamplePointing.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export default class MenuExamplePointing extends Component {
</Menu>

<Segment>
<img src='/images/wireframe/paragraph.png' />
<img alt="Wireframe" src='/images/wireframe/paragraph.png' />
</Segment>
</div>
)
Expand Down
2 changes: 1 addition & 1 deletion docs/src/examples/collections/Menu/Types/MenuExampleSecondaryPointing.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export default class MenuExampleSecondaryPointing extends Component {
</Menu>

<Segment>
<img src='/images/wireframe/media-paragraph.png' />
<img alt="Wireframe" src='/images/wireframe/media-paragraph.png' />
</Segment>
</div>
)
Expand Down
2 changes: 1 addition & 1 deletion docs/src/examples/collections/Menu/Types/MenuExampleTabularOnTop.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default class MenuExampleTabularOnTop extends Component {
</Menu>

<Segment attached='bottom'>
<img src='/images/wireframe/paragraph.png' />
<img alt="Wireframe" src='/images/wireframe/paragraph.png' />
</Segment>
</div>
)
Expand Down
2 changes: 1 addition & 1 deletion docs/src/examples/elements/Button/Variations/ButtonExampleVerticallyAttached.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const ButtonExampleVerticallyAttached = () => (
<div>
<Button attached='top'>Top</Button>
<Segment attached>
<img src='/images/wireframe/paragraph.png' />
<img alt="Wireframe" src='/images/wireframe/paragraph.png' />
</Segment>
<Button attached='bottom'>Bottom</Button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/examples/elements/Button/Variations/ButtonExampleVerticallyAttachedGroup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const ButtonExampleVerticallyAttachedGroup = () => (
<Button>Two</Button>
</Button.Group>
<Segment attached>
<img src='/images/wireframe/paragraph.png' />
<img alt="Wireframe" src='/images/wireframe/paragraph.png' />
</Segment>
<Button.Group attached='bottom'>
<Button>One</Button>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/examples/elements/Label/Content/LabelExampleImage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const LabelExampleImage = () => (
Elliot
</Label>
<Label as='a'>
<img src='/images/avatar/small/stevie.jpg' />
<img alt="avatar" src='/images/avatar/small/stevie.jpg' />
Stevie
</Label>
</div>
Expand Down
6 changes: 3 additions & 3 deletions docs/src/examples/elements/Label/Types/LabelExampleIcon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@ import { Icon, Label } from 'semantic-ui-react'
const LabelExampleIcon = () => (
<div>
<Label image>
<img src='/images/avatar/small/ade.jpg' />
<img alt="avatar" src='/images/avatar/small/ade.jpg' />
Adrienne
<Icon name='delete' />
</Label>
<Label image>
<img src='/images/avatar/small/zoe.jpg' />
<img alt="avatar" src='/images/avatar/small/zoe.jpg' />
Zoe
<Icon name='delete' />
</Label>
<Label image>
<img src='/images/avatar/small/nan.jpg' />
<img alt="avatar" src='/images/avatar/small/nan.jpg' />
Nan
<Icon name='delete' />
</Label>
Expand Down
6 changes: 3 additions & 3 deletions docs/src/examples/elements/Label/Types/LabelExampleImage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ import { Label } from 'semantic-ui-react'
const LabelExampleImage = () => (
<div>
<Label as='a' image>
<img src='/images/avatar/small/joe.jpg' />
<img alt="avatar" src='/images/avatar/small/joe.jpg' />
Joe
</Label>
<Label as='a' image>
<img src='/images/avatar/small/elliot.jpg' />
<img alt="avatar" src='/images/avatar/small/elliot.jpg' />
Elliot
</Label>
<Label as='a' image>
<img src='/images/avatar/small/stevie.jpg' />
<img alt="avatar" src='/images/avatar/small/stevie.jpg' />
Stevie
</Label>
</div>
Expand Down
6 changes: 3 additions & 3 deletions docs/src/examples/elements/Label/Types/LabelExampleImageColored.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@ import { Label } from 'semantic-ui-react'
const LabelExampleImage = () => (
<div>
<Label as='a' color='blue' image>
<img src='/images/avatar/small/veronika.jpg' />
<img alt="avatar" src='/images/avatar/small/veronika.jpg' />
Veronika
<Label.Detail>Friend</Label.Detail>
</Label>
<Label as='a' color='teal' image>
<img src='/images/avatar/small/jenny.jpg' />
<img alt="avatar" src='/images/avatar/small/jenny.jpg' />
Jenny
<Label.Detail>Friend</Label.Detail>
</Label>
<Label as='a' color='yellow' image>
<img src='/images/avatar/small/christian.jpg' />
<img alt="avatar" src='/images/avatar/small/christian.jpg' />
Christian
<Label.Detail>Co-worker</Label.Detail>
</Label>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/examples/elements/Label/Variations/LabelExampleBasic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const LabelExampleBasic = () => (
Pointing
</Label>
<Label as='a' basic image>
<img src='/images/avatar/small/elliot.jpg' />
<img alt="avatar" src='/images/avatar/small/elliot.jpg' />
Elliot
</Label>
<Label as='a' basic color='red' pointing>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/examples/views/Advertisement/Types/AdvertisementExampleAdvertisement.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Advertisement } from 'semantic-ui-react'

const AdvertisementExampleAdvertisement = () => (
<Advertisement unit='medium rectangle'>
<img src='/images/wireframe/image.png' />
<img alt="avatar" src='/images/wireframe/image.png' />
</Advertisement>
)

Expand Down
4 changes: 2 additions & 2 deletions docs/src/examples/views/Feed/Content/FeedExampleExtraImages.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@ const FeedExampleAdditionalInformation = () => (
</Feed.Summary>
<Feed.Extra images>
<a>
<img src='/images/wireframe/image.png' />
<img alt="avatar" src='/images/wireframe/image.png' />
</a>
<a>
<img src='/images/wireframe/image.png' />
<img alt="avatar" src='/images/wireframe/image.png' />
</a>
</Feed.Extra>
</Feed.Content>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/examples/views/Feed/Content/FeedExampleImageLabel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const FeedExampleImageLabel = () => (
<Feed>
<Feed.Event>
<Feed.Label>
<img src='/images/avatar/small/elliot.jpg' />
<img alt="avatar" src='/images/avatar/small/elliot.jpg' />
</Feed.Label>
<Feed.Content>
You added Elliot Fu to the group <a>Coworkers</a>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/examples/views/Feed/Content/FeedExampleSummaryDate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const FeedExampleSummaryDate = () => (
<Feed>
<Feed.Event>
<Feed.Label>
<img src='/images/avatar/small/jenny.jpg' />
<img alt="avatar" src='/images/avatar/small/jenny.jpg' />
</Feed.Label>
<Feed.Content>
<Feed.Summary>
Expand Down
10 changes: 5 additions & 5 deletions docs/src/examples/views/Feed/Types/FeedExampleBasic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const FeedExampleBasic = () => (
<Feed>
<Feed.Event>
<Feed.Label>
<img src='/images/avatar/small/elliot.jpg' />
<img alt="avatar" src='/images/avatar/small/elliot.jpg' />
</Feed.Label>
<Feed.Content>
<Feed.Summary>
Expand All @@ -29,10 +29,10 @@ const FeedExampleBasic = () => (
</Feed.Summary>
<Feed.Extra images>
<a>
<img src='/images/wireframe/image.png' />
<img alt="WireFrame" src='/images/wireframe/image.png' />
</a>
<a>
<img src='/images/wireframe/image.png' />
<img alt="Wireframe" src='/images/wireframe/image.png' />
</a>
</Feed.Extra>
<Feed.Meta>
Expand Down Expand Up @@ -89,10 +89,10 @@ const FeedExampleBasic = () => (
</Feed.Summary>
<Feed.Extra images>
<a>
<img src='/images/wireframe/image.png' />
<img alt="Wireframe" src='/images/wireframe/image.png' />
</a>
<a>
<img src='/images/wireframe/image.png' />
<img alt="Wireframe" src='/images/wireframe/image.png' />
</a>
</Feed.Extra>
<Feed.Meta>
Expand Down
4 changes: 2 additions & 2 deletions docs/src/examples/views/Feed/Variations/FeedExampleSizeLarge.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,10 @@ const FeedExampleSizeLarge = () => (

<Feed.Extra images>
<a>
<img src='/images/wireframe/image.png' />
<img alt="Wireframe" src='/images/wireframe/image.png' />
</a>
<a>
<img src='/images/wireframe/image.png' />
<img alt="Wireframe" src='/images/wireframe/image.png' />
</a>
</Feed.Extra>

Expand Down
10 changes: 5 additions & 5 deletions docs/src/layouts/ResponsiveLayout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -535,7 +535,7 @@ const ResponsiveLayout = () => (
<Container>
<Menu stackable>
<Menu.Item>
<img src='/logo.png' />
<img alt="logo" src='/logo.png' />
</Menu.Item>
<Menu.Item>Features</Menu.Item>
<Menu.Item>Testimonials</Menu.Item>
Expand All @@ -547,7 +547,7 @@ const ResponsiveLayout = () => (
<Container>
<Item.Group divided>
<Item>
<Item.Image src='/images/wireframe/image.png' />
<Item.Image alt="Wireframe" src='/images/wireframe/image.png' />
<Item.Content>
<Item.Header as='a'>Content Header</Item.Header>
<Item.Meta>
Expand All @@ -558,14 +558,14 @@ const ResponsiveLayout = () => (
A description which may flow for several lines and give context to the content.
</Item.Description>
<Item.Extra>
<Image avatar circular src='/images/wireframe/square-image.png' />
<Image avatar circular alt="Wireframe" src='/images/wireframe/square-image.png' />
Username
</Item.Extra>
</Item.Content>
</Item>

<Item>
<Item.Image src='/images/wireframe/image.png' />
<Item.Image alt="Wireframe" src='/images/wireframe/image.png' />
<Item.Content>
<Item.Header as='a'>Content Header</Item.Header>
<Item.Meta>
Expand All @@ -585,7 +585,7 @@ const ResponsiveLayout = () => (
</Item.Content>
</Item>
<Item>
<Item.Image src='/images/wireframe/image.png' />
<Item.Image alt="Wireframe" src='/images/wireframe/image.png' />
<Item.Content>
<Item.Header as='a'>Content Header</Item.Header>
<Item.Meta>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/Introduction.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const ButtonHTML = `<button class="ui small green button">
</button>`
const LabelJSX = "<Label image='veronika.jpg' />"
const LabelHTML = `<div class="ui image label">
<img src="veronika.jpg">
<img src="veronika.jpg">
</div>`
const RatingJSX = '<Rating rating={1} maxRating={5} />'
const RatingHTML = `<div
Expand Down
2 changes: 1 addition & 1 deletion src/modules/Embed/Embed.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ const Embed = React.forwardRef(function (props, ref) {
return (
<ElementType {...rest} className={classes} onClick={handleClick} ref={ref}>
{Icon.create(iconShorthand, { autoGenerateKey: false })}
{placeholder && <img className='placeholder' src={placeholder} />}
{placeholder && <img alt="Placeholder" className='placeholder' src={placeholder} />}
{renderEmbed()}
</ElementType>
)
Expand Down
2 changes: 1 addition & 1 deletion test/specs/modules/Embed/Embed-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ describe('Embed', () => {
it('renders img when defined', () => {
const url = '/images/wireframe/image.png'

shallow(<Embed placeholder={url} />).should.contain(<img className='placeholder' src={url} />)
shallow(<Embed placeholder={url} />).should.contain(<img alt="Placeholder" className='placeholder' src={url} />)
})
})

Expand Down
4 changes: 2 additions & 2 deletions test/specs/views/Feed/FeedLabel-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,15 @@ describe('FeedLabel', () => {
describe('image prop', () => {
it('renders <img> with string', () => {
const src = faker.image.imageUrl()
const wrapper = shallow(<FeedLabel image={src} />)
const wrapper = shallow(<FeedLabel alt="faker" image={src} />)

wrapper.should.have.descendants('img')
wrapper.find('img').should.have.prop('src', src)
})

it('renders node', () => {
const src = faker.image.imageUrl()
const img = <img src={src} />
const img = <img alt="faker" src={src} />
const wrapper = shallow(<FeedLabel image={img} />)

wrapper.should.have.descendants('img')
Expand Down