Fix underlined links in Student Context Card
fixes: UIDEV-268 Test plan: - The heading link with the student's name should no longer be underlined unless the underline all links feature is ON, and the font-size should now inherit from our `large` Button variant: https://www.screencast.com/t/3gtqOp99 (Confirm that the link still produces ellipsis when the name is long) - The link that wraps each Progress component should no longer cause underlines unless the underline all links feature is ON. The Progress component should now show the focus ring when the link is focused: https://www.screencast.com/t/3WRZJdpR Change-Id: I85fdfd01b532a7441f35446750b960e57751540e Reviewed-on: https://gerrit.instructure.com/198053 Tested-by: Jenkins QA-Review: Daniel Sasaki <dsasaki@instructure.com> Reviewed-by: Pam Hiett <phiett@instructure.com> Product-Review: Pam Hiett <phiett@instructure.com>
This commit is contained in:
Chris Hart
parent
83b75aa805
commit
19dd620d90
|
|
@ -28,7 +28,6 @@ import SubmissionProgressBars from './SubmissionProgressBars'
|
|||
import MessageStudents from '../shared/MessageStudents'
|
||||
import Heading from '@instructure/ui-elements/lib/components/Heading'
|
||||
import Button from '@instructure/ui-buttons/lib/components/Button'
|
||||
import Link from '@instructure/ui-elements/lib/components/Link'
|
||||
import Text from '@instructure/ui-elements/lib/components/Text'
|
||||
import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent'
|
||||
import Spinner from '@instructure/ui-elements/lib/components/Spinner'
|
||||
|
|
@ -230,14 +229,15 @@ export default class StudentContextTray extends React.Component {
|
|||
{user.short_name ? (
|
||||
<div className="StudentContextTray-Header__Name">
|
||||
<Heading level="h3" as="h2">
|
||||
<span className="StudentContextTray-Header__NameLink">
|
||||
<Link
|
||||
href={`/courses/${this.props.courseId}/users/${this.props.studentId}`}
|
||||
aria-label={I18n.t('Go to %{name}\'s profile', {name: user.short_name})}
|
||||
>
|
||||
{user.short_name}
|
||||
</Link>
|
||||
</span>
|
||||
<Button
|
||||
variant="link"
|
||||
size="large"
|
||||
href={`/courses/${this.props.courseId}/users/${this.props.studentId}`}
|
||||
aria-label={I18n.t('Go to %{name}\'s profile', {name: user.short_name})}
|
||||
theme={{largePadding: '0', largeHeight: 'normal'}}
|
||||
>
|
||||
{user.short_name}
|
||||
</Button>
|
||||
</Heading>
|
||||
</div>
|
||||
) : null}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ import Link from '@instructure/ui-elements/lib/components/Link'
|
|||
function scoreInPoints(score, pointsPossible) {
|
||||
const formattedScore = I18n.n(score, {precision: 2, strip_insignificant_zeros: true})
|
||||
const formattedPointsPossible = I18n.n(pointsPossible, {precision: 2, strip_insignificant_zeros: true})
|
||||
return formattedScore + '/' + formattedPointsPossible
|
||||
return `${formattedScore }/${ formattedPointsPossible}`
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -98,7 +98,7 @@ function scoreInPoints(score, pointsPossible) {
|
|||
return (
|
||||
<div>
|
||||
<span className='screenreader-only'>
|
||||
{I18n.t("%{grade}", {grade: grade})}
|
||||
{I18n.t("%{grade}", {grade})}
|
||||
</span>
|
||||
<i className={iconClass}></i>
|
||||
</div>
|
||||
|
|
@ -119,23 +119,27 @@ function scoreInPoints(score, pointsPossible) {
|
|||
<div key={submission.id} className="StudentContextTray-Progress__Bar">
|
||||
<Tooltip
|
||||
tip={submission.assignment.name}
|
||||
as={Link}
|
||||
href={`${submission.assignment.html_url}/submissions/${submission.user._id}`}
|
||||
placement="top"
|
||||
>
|
||||
<Progress
|
||||
size="small"
|
||||
successColor={false}
|
||||
label={I18n.t('Grade')}
|
||||
valueMax={submission.assignment.points_possible}
|
||||
valueNow={submission.score || 0}
|
||||
formatValueText={() => SubmissionProgressBars.displayScreenreaderGrade(submission)}
|
||||
formatDisplayedValue={() => (
|
||||
<Text size="x-small" color="secondary">
|
||||
{SubmissionProgressBars.displayGrade(submission)}
|
||||
</Text>
|
||||
)}
|
||||
/>
|
||||
<Link
|
||||
href={`${submission.assignment.html_url}/submissions/${submission.user._id}`}
|
||||
theme={{textDecoration: 'none'}}
|
||||
display="block"
|
||||
>
|
||||
<Progress
|
||||
size="small"
|
||||
successColor={false}
|
||||
label={I18n.t('Grade')}
|
||||
valueMax={submission.assignment.points_possible}
|
||||
valueNow={submission.score || 0}
|
||||
formatValueText={() => SubmissionProgressBars.displayScreenreaderGrade(submission)}
|
||||
formatDisplayedValue={() => (
|
||||
<Text size="x-small" color="secondary">
|
||||
{SubmissionProgressBars.displayGrade(submission)}
|
||||
</Text>
|
||||
)}
|
||||
/>
|
||||
</Link>
|
||||
</Tooltip>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -61,17 +61,9 @@
|
|||
}
|
||||
|
||||
.StudentContextTray-Header__Name {
|
||||
margin-top: 0.125rem;
|
||||
margin-bottom: $ic-sp * 0.75;
|
||||
}
|
||||
|
||||
.StudentContextTray-Header__NameLink {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.StudentContextTray-Header__CourseName {
|
||||
margin-bottom: $ic-sp / 3;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -300,7 +300,7 @@ QUnit.module('StudentContextTray/Progress', (hooks) => {
|
|||
]
|
||||
|
||||
const tray = shallow(<SubmissionProgressBars submissions={submissions} />)
|
||||
ok(tray.find("Tooltip").getElement().props.href.match(/submissions\/99/));
|
||||
ok(tray.find("Link").getElement().props.href.match(/submissions\/99/));
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ module StudentContextTray
|
|||
end
|
||||
|
||||
def student_name_link
|
||||
f(".StudentContextTray-Header__NameLink a")
|
||||
f(".StudentContextTray-Header__Name a")
|
||||
end
|
||||
|
||||
def todo_tray_course_selector
|
||||
|
|
|
|||
Loading…
Reference in New Issue