Skip to content

Commit

Permalink
issue: Semantic-Org#4427; Added the Alternate text to image tags beca…
Browse files Browse the repository at this point in the history 
…use alt text is important to understand the image
  • Loading branch information
@sathiyaIbe
sathiyaIbe committed May 24, 2023
1 parent 038b306 commit 5f73234
Show file tree
Hide file tree
Showing 26 changed files with 49 additions and 49 deletions.
2 changes: 1 addition & 1 deletion .github/CONTRIBUTING.md
View file
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
@@ -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
6 changes: 3 additions & 3 deletions docs/src/components/CarbonAd/CarbonAdNative.js
View file
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,14 @@ 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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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

0 comments on commit 5f73234

Please sign in to comment.