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

Added onClick handler to refocus when newLink is clicked #704

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Added onClick handler to refocus when newLink is clicked #704

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
518441b
Added onClick handler to refocus when newLink is clicked
ehuatai Jun 12, 2024
3505e7a
Auto focus on nextLink to top of case
ehuatai Jun 17, 2024
5a415c5
Removed unnecessary tabIndex on Sidebar component
ehuatai Jun 17, 2024
6dd0af7
Focus should work as intended on all browsers, with invisible focus r…
ehuatai Jun 20, 2024
f9faa4e
Moved the .main styling to the proper .sass file. Works as intended i…
ehuatai Jun 23, 2024
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
3 changes: 3 additions & 0 deletions app/assets/stylesheets/structure.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@ body

.main
flex: 0 1 90rem
&:focus
&:not(.focus-visible)
outline: none

.header
background-color: $umichBlue
Expand Down
65 changes: 35 additions & 30 deletions app/javascript/elements/CaseElement.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ class CaseElement extends React.Component<{
constructor (props) {
super(props)
this._scrollToTop = () => window.scrollTo(0, 0)
this.topRef = React.createRef()
}

componentDidMount () {
Expand All @@ -87,7 +88,6 @@ class CaseElement extends React.Component<{
this._scrollToTop()
}
}

render () {
const {
kicker,
Expand All @@ -110,6 +110,38 @@ class CaseElement extends React.Component<{

const models = { Page, Podcast }
const Child = models[model]
const NextLink = ({ next }: { next: NextProps }) =>
next ? (
<Link className="nextLink" onClick={focusTop} tabIndex={0} to={`/${next.position}`}>
<FormattedMessage id="cases.show.next" />
{next.title}
</Link>
) : (
<footer>
<h2>
<FormattedMessage id="cases.show.end" />
</h2>
</footer>
)

const ConditionalNextLink = connect(
(state: State, ownProps: { next: NextProps }) => {
const postTestNext = state.quiz.needsPosttest
? {
title: 'Check your understanding',
position: 'quiz',
}
: null
return {
next: ownProps.next || postTestNext,
}
},
() => ({})
)(NextLink)

const focusTop = () => {
this.topRef.current && this.topRef.current.focus()
}
const deleteElement = () => {
this.props
.deleteElement(url, position)
Expand All @@ -126,7 +158,7 @@ class CaseElement extends React.Component<{
})}
>
<Sidebar editing={editing} />
<main id="top" className={`main s-CaseElement__${model}`}>
<main id="top" ref={this.topRef} tabIndex={-1} className={`main s-CaseElement__${model}`}>
<DocumentTitle title={`${kicker} — ${title} — Gala`}>
{Child ? (
<Child id={id} deleteElement={deleteElement} />
Expand Down Expand Up @@ -164,31 +196,4 @@ export default connect(

type NextProps = ?{ title: string, position: string }

const NextLink = ({ next }: { next: NextProps }) =>
next ? (
<Link className="nextLink" to={`/${next.position}`}>
<FormattedMessage id="cases.show.next" />
{next.title}
</Link>
) : (
<footer>
<h2>
<FormattedMessage id="cases.show.end" />
</h2>
</footer>
)

const ConditionalNextLink = connect(
(state: State, ownProps: { next: NextProps }) => {
const postTestNext = state.quiz.needsPosttest
? {
title: 'Check your understanding',
position: 'quiz',
}
: null
return {
next: ownProps.next || postTestNext,
}
},
() => ({})
)(NextLink)