Skip to content
This repository was archived by the owner on Jun 21, 2023. It is now read-only.

Commit e8bb164

Browse files
authored
Remove visibility: hidden from the image component (vercel#23278)
This PR removes the `visibility` style property change from next/image. It was previously added in vercel#18195 to fix a bug that when no `src` is set, and that bug is not valid anymore as all images will always have `src` (and a fallback too). It also fixes the problem that screen readers ignore elements with `visibility: hidden`. Fixes vercel#23201. ## Bug - [x] Related issues vercel#23201 - [ ] Integration tests added ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. ## Documentation / Examples - [ ] Make sure the linting passes
1 parent d81c510 commit e8bb164

File tree

3 files changed

+0
-112
lines changed

3 files changed

+0
-112
lines changed

packages/next/client/image.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -295,8 +295,6 @@ export default function Image({
295295
let sizerStyle: JSX.IntrinsicElements['div']['style'] | undefined
296296
let sizerSvg: string | undefined
297297
let imgStyle: ImgElementStyle | undefined = {
298-
visibility: isVisible ? 'inherit' : 'hidden',
299-
300298
position: 'absolute',
301299
top: 0,
302300
left: 0,

test/integration/image-component/base-path/test/index.test.js

Lines changed: 0 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -51,23 +51,6 @@ async function getComputed(browser, id, prop) {
5151
return null
5252
}
5353

54-
async function getComputedStyle(browser, id, prop) {
55-
const val = await browser.eval(
56-
`window.getComputedStyle(document.getElementById('${id}')).${prop}`
57-
)
58-
if (typeof val === 'number') {
59-
return val
60-
}
61-
if (typeof val === 'string') {
62-
const v = parseInt(val, 10)
63-
if (isNaN(v)) {
64-
return val
65-
}
66-
return v
67-
}
68-
return null
69-
}
70-
7154
async function getSrc(browser, id) {
7255
const src = await browser.elementById(id).getAttribute('src')
7356
if (src) {
@@ -442,44 +425,6 @@ function runTests(mode) {
442425
})
443426
}
444427

445-
it('should correctly inherit the visibilty of the parent component', async () => {
446-
let browser
447-
try {
448-
browser = await webdriver(appPort, '/docs/hidden-parent')
449-
450-
const id = 'hidden-image'
451-
452-
// Wait for image to load:
453-
await check(async () => {
454-
const result = await browser.eval(
455-
`document.getElementById(${JSON.stringify(id)}).naturalWidth`
456-
)
457-
458-
if (result < 1) {
459-
throw new Error('Image not ready')
460-
}
461-
462-
return 'result-correct'
463-
}, /result-correct/)
464-
465-
await waitFor(1000)
466-
467-
const desiredVisibilty = await getComputed(
468-
browser,
469-
id,
470-
'style.visibility'
471-
)
472-
expect(desiredVisibilty).toBe('inherit')
473-
474-
const actualVisibility = await getComputedStyle(browser, id, 'visibility')
475-
expect(actualVisibility).toBe('hidden')
476-
} finally {
477-
if (browser) {
478-
await browser.close()
479-
}
480-
}
481-
})
482-
483428
it('should correctly ignore prose styles', async () => {
484429
let browser
485430
try {

test/integration/image-component/default/test/index.test.js

Lines changed: 0 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -53,23 +53,6 @@ async function getComputed(browser, id, prop) {
5353
return null
5454
}
5555

56-
async function getComputedStyle(browser, id, prop) {
57-
const val = await browser.eval(
58-
`window.getComputedStyle(document.getElementById('${id}')).${prop}`
59-
)
60-
if (typeof val === 'number') {
61-
return val
62-
}
63-
if (typeof val === 'string') {
64-
const v = parseInt(val, 10)
65-
if (isNaN(v)) {
66-
return val
67-
}
68-
return v
69-
}
70-
return null
71-
}
72-
7356
async function getSrc(browser, id) {
7457
const src = await browser.elementById(id).getAttribute('src')
7558
if (src) {
@@ -505,44 +488,6 @@ function runTests(mode) {
505488
})
506489
}
507490

508-
it('should correctly inherit the visibilty of the parent component', async () => {
509-
let browser
510-
try {
511-
browser = await webdriver(appPort, '/hidden-parent')
512-
513-
const id = 'hidden-image'
514-
515-
// Wait for image to load:
516-
await check(async () => {
517-
const result = await browser.eval(
518-
`document.getElementById(${JSON.stringify(id)}).naturalWidth`
519-
)
520-
521-
if (result < 1) {
522-
throw new Error('Image not ready')
523-
}
524-
525-
return 'result-correct'
526-
}, /result-correct/)
527-
528-
await waitFor(1000)
529-
530-
const desiredVisibilty = await getComputed(
531-
browser,
532-
id,
533-
'style.visibility'
534-
)
535-
expect(desiredVisibilty).toBe('inherit')
536-
537-
const actualVisibility = await getComputedStyle(browser, id, 'visibility')
538-
expect(actualVisibility).toBe('hidden')
539-
} finally {
540-
if (browser) {
541-
await browser.close()
542-
}
543-
}
544-
})
545-
546491
it('should correctly ignore prose styles', async () => {
547492
let browser
548493
try {

0 commit comments

Comments
 (0)