Skip to content

WRQ-8004: Focus on Body Text partially in Scroller with audio guidance ON #1556

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

Draft
wants to merge 11 commits into
base: develop
Choose a base branch
from
Draft

WRQ-8004: Focus on Body Text partially in Scroller with audio guidance ON #1556

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
9d7c8b4
WRQ-8044: Focus Body Text partially in Scroller with audio guidance ON
vJIYEv Feb 6, 2024
63633ce
WRQ-8004: Focus Body Text partially in Scroller with audio guidance ON
vJIYEv Feb 6, 2024
4b4e306
Added empty line at the end of .less file
vJIYEv Feb 7, 2024
9b71134
Merge branch 'feature/WRQ-8004' of github.com:enactjs/sandstone into …
vJIYEv Feb 7, 2024
ea94c76
Created new sample for BodyText focus and separated it from Scroller …
vJIYEv Feb 8, 2024
919e6f5
Delete unused eslint-disable directive
vJIYEv Feb 13, 2024
b652e3e
Merge ScrollerWithBodyTextFocus into Scroller
vJIYEv Feb 15, 2024
007206d
Edited indentation
vJIYEv Feb 20, 2024
17f7921
Merge branch 'develop' into feature/WRQ-8004
vJIYEv Feb 20, 2024
301c06c
Merge branch 'develop' into feature/WRQ-8004
vJIYEv Feb 22, 2024
5f74380
Remove audioGuidance call
vJIYEv Feb 22, 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
79 changes: 56 additions & 23 deletions samples/qa-a11y/src/views/Scroller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,58 @@
/* eslint-disable react/jsx-no-bind */

import Scroller from '@enact/sandstone/Scroller';
import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
import Spottable from '@enact/spotlight/Spottable';
import ToggleButton from '@enact/sandstone/SwitchItem';
import Layout, {Cell} from '@enact/ui/Layout';
import ri from '@enact/ui/resolution';
import {useState} from 'react';
import {Fragment, useState} from 'react';

import css from './Scroller.module.less';

const ScrollerView = () => {
const [native, setNative] = useState(true);
const [spottable, setSpottable] = useState(false);
const [customAriaLabel, setCustomAriaLabel] = useState(false);
const [native, setNative] = useState(true);
const scrollMode = native ? 'native' : 'translate';

const handleChangeJSNativeButton = () => setNative(!native);
const handleChangeAriaLabelButton = () => setCustomAriaLabel(!customAriaLabel);
const handleChangeSpottableButton = () => setSpottable(!spottable);

const bodyText = [
<>Foo<br />Bar<br />Bar<br />Boom boom pow<br /></>,
<>Foo<br />Bar<br />Boom boom pow<br /></>,
<>Foo<br />Bar<br />Boom boom pow<br /></>,
<>Foo<br />Bar<br />Boom boom pow<br /></>,
<>Foo<br />Bar<br />Boom boom pow<br /></>,
<>Foo<br />Bar<br /></>,
<>Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. <br /></>,
<>Foo<br />Bar<br />Bar<br />Boom boom pow<br /></>,
<>Foo<br />Bar<br />Boom boom pow<br /></>,
<>Foo<br />Bar<br />Boom boom pow<br /></>,
<>Foo<br />Bar<br />Boom boom pow<br /></>,
<>Foo<br />Bar<br />Boom boom pow<br /></>,
<>Foo<br />Bar<br /></>,
<>Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. <br /></>,
<>Foo<br />Bar<br />Bar<br />Boom boom pow<br /></>,
<>Foo<br />Bar<br />Boom boom pow<br /></>,
<>Foo<br />Bar<br />Boom boom pow<br /></>,
<>Foo<br />Bar<br />Boom boom pow<br /></>,
<>Foo<br />Bar<br />Boom boom pow<br /></>,
<>Foo<br />Bar<br /></>,
<>Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. <br /></>,
<>Foo<br />Bar<br />Bar<br />Boom boom pow<br /></>,
<>Foo<br />Bar<br />Boom boom pow<br /></>,
<>Foo<br />Bar<br />Boom boom pow<br /></>,
<>Foo<br />Bar<br />Boom boom pow<br /></>,
<>Foo<br />Bar<br />Boom boom pow<br /></>,
<>Foo<br />Bar<br /></>,
<>Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. <br /></>
];

const Container = SpotlightContainerDecorator({enterTo: 'last-focused'}, 'div');
const SpottableDiv = Spottable('div');

return (
<Layout orientation="vertical">
Expand All @@ -29,34 +69,27 @@ const ScrollerView = () => {
>
Native
</ToggleButton>
<ToggleButton
onClick={handleChangeSpottableButton}
selected={spottable}
>
Scroller with Spottable
</ToggleButton>
</Cell>
<Cell
component={Scroller}
focusableScrollbar="byEnter"
focusableScrollbar={spottable ? false : "byEnter"}
scrollMode={scrollMode}
verticalScrollThumbAriaLabel={customAriaLabel ? 'This is vertical scroll thumb' : null}
horizontalScrollThumbAriaLabel={customAriaLabel ? 'This is horizontal scroll thumb' : null}
>
<div style={{width: ri.scaleToRem(6000)}}>
Foo<br />Bar<br />Bar<br />Boom boom pow<br />Foo<br />Bar<br />Boom boom pow<br />Foo<br />Bar<br />Boom boom pow<br />
Foo<br />Bar<br />Boom boom pow<br />Foo<br />Bar<br />Boom boom pow<br />Foo<br />Bar<br />Boom boom pow. Boom boom pow.
Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow.
Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow.
Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. <br />Foo<br />Bar<br />Bar<br />
Boom boom pow<br />Foo<br />Bar<br />Boom boom pow<br />Foo<br />Bar<br />Boom boom pow<br />Foo<br />Bar<br />Boom boom pow<br />
Foo<br />Bar<br />Boom boom pow<br />Foo<br />Bar<br />Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow.
Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow.
Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow.
Boom boom pow. Boom boom pow. Boom boom pow. <br />Foo<br />Bar<br />Bar<br />Boom boom pow<br />Foo<br />Bar<br />
Boom boom pow<br />Foo<br />Bar<br />Boom boom pow<br />Foo<br />Bar<br />Boom boom pow<br />Foo<br />Bar<br />Boom boom pow<br />
Foo<br />Bar<br />Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow.
Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow.
Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow.
Boom boom pow. <br />Foo<br />Bar<br />Bar<br />Boom boom pow<br />Foo<br />Bar<br />Boom boom pow<br />Foo<br />Bar<br />
Boom boom pow<br />Foo<br />Bar<br />Boom boom pow<br />Foo<br />Bar<br />Boom boom pow<br />Foo<br />Bar<br />Boom boom pow.
Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow.
Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow.
Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow.
<div style={spottable ? null : {width: ri.scaleToRem(6000)}}>
{spottable ?
<Container>
{bodyText.map((x, i) => <SpottableDiv className={css.focusableBodyText} key={i}>{x}</SpottableDiv>)}
</Container> :
bodyText.map((x, i) => <Fragment key={i}>{x}</Fragment>)
}
</div>
</Cell>
</Layout>
Expand Down
9 changes: 9 additions & 0 deletions samples/qa-a11y/src/views/Scroller.module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
@import "~@enact/sandstone/styles/colors.less";
@import "~@enact/sandstone/styles/mixins.less";

.focusableBodyText {
.focus({
background-color: @sand-scroll-focusablebody-focus-bg-color;
opacity: 1;
});
}