fix: fix spaces in status aria-labels (#1111)

fixes #1108
This commit is contained in:
Nolan Lawson 2019-03-21 14:38:37 -07:00 committed by GitHub
parent f69c5c683e
commit c896836ce8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 29 additions and 21 deletions

View file

@ -129,7 +129,6 @@
import { getAccountAccessibleName } from '../../_a11y/getAccountAccessibleName'
import { getAccessibleLabelForStatus } from '../../_a11y/getAccessibleLabelForStatus'
import { formatTimeagoDate } from '../../_intl/formatTimeagoDate'
import { htmlToPlainText } from '../../_utils/htmlToPlainText'
import { measureText } from '../../_utils/measureText'
import { LONG_POST_LENGTH, LONG_POST_TEXT } from '../../_static/statuses'
import { absoluteDateFormatter } from '../../_utils/formatters'
@ -137,6 +136,7 @@
import { applyFocusStylesToParent } from '../../_utils/events'
import noop from 'lodash-es/noop'
import { createStatusOrNotificationUuid } from '../../_utils/createStatusOrNotificationUuid'
import { statusHtmlToPlainText } from '../../_utils/statusHtmlToPlainText'
const INPUT_TAGS = new Set(['a', 'button', 'input', 'textarea'])
const isUserInputElement = node => INPUT_TAGS.has(node.localName)
@ -231,7 +231,8 @@
originalAccountId: ({ originalAccount }) => originalAccount.id,
accountForShortcut: ({ originalAccount, notification }) => notification ? notification.account : originalAccount,
visibility: ({ originalStatus }) => originalStatus.visibility,
plainTextContent: ({ content }) => htmlToPlainText(content),
mentions: ({ originalStatus }) => originalStatus.mentions || [],
plainTextContent: ({ content, mentions }) => statusHtmlToPlainText(content, mentions),
plainTextContentLength: ({ plainTextContent }) => measureText(plainTextContent),
plainTextContentOverLength: ({ plainTextContentLength }) => plainTextContentLength > LONG_POST_LENGTH,
spoilerText: ({ originalStatus, plainTextContentOverLength }) => (

View file

@ -1,13 +0,0 @@
import { mark, stop } from './marks'
let domParser = process.browser && new DOMParser()
export function htmlToPlainText (html) {
if (!html) {
return ''
}
mark('htmlToPlainText')
let res = domParser.parseFromString(html, 'text/html').documentElement.textContent
stop('htmlToPlainText')
return res
}

View file

@ -18,14 +18,18 @@ function massageMentions (doc, mentions) {
// paragraphs should be separated by double newlines
// single <br/>s should become single newlines
function innerTextRetainingNewlines (doc) {
let res = ''
let paragraphs = doc.querySelectorAll('p')
return Array.from(paragraphs).map(paragraph => {
for (let i = 0; i < paragraphs.length; i++) {
let paragraph = paragraphs[i]
let brs = paragraph.querySelectorAll('br')
Array.from(brs).forEach(br => {
for (let j = 0; j < brs.length; j++) {
let br = brs[j]
br.parentNode.replaceChild(doc.createTextNode('\n'), br)
})
return paragraph.textContent
}).join('\n\n')
}
res += (i > 0 ? '\n\n' : '') + paragraph.textContent
}
return res
}
export function statusHtmlToPlainText (html, mentions) {

View file

@ -1,6 +1,6 @@
import { loginAsFoobar } from '../roles'
import { getNthStatus } from '../utils'
import { postEmptyStatusWithMediaAs } from '../serverActions'
import { postAs, postEmptyStatusWithMediaAs } from '../serverActions'
fixture`120-status-aria-label.js`
.page`http://localhost:4002`
@ -14,3 +14,19 @@ test('aria-labels for statuses with no content text', async t => {
/foobar, (.+ ago|just now), @foobar, Public/i
)
})
test('aria-labels with links', async t => {
let content = 'Text here\n\nMore text\n\n' +
'https://example.com/long/url/here/very/long/yes/so/long\n\n' +
'#woot #yolo'
let expected = 'admin, Text here More text ' +
'https://example.com/long/url/here/very/long/yes/so/long #woot #yolo,'
await postAs('admin', content)
await loginAsFoobar(t)
await t
.hover(getNthStatus(1))
.expect(getNthStatus(1).getAttribute('aria-label')).contains(expected)
})