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 10 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
112 changes: 89 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,90 @@
/* 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 LS2Request from '@enact/webos/LS2Request';
import {Fragment, useEffect, useState} from 'react';

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

const ScrollerView = () => {
const [native, setNative] = useState(true);
const [audioGuidance, setAudioGuidance] = useState(false);
const [audioGuidanceDisabled, setAudioGuidanceDisabled] = useState(true);
const [customAriaLabel, setCustomAriaLabel] = useState(false);
const [native, setNative] = useState(true);
const scrollMode = native ? 'native' : 'translate';

useEffect( () => {
if (window.WebOSServiceBridge ?? window.PalmServiceBridge) {
new LS2Request().send({
service: 'luna://com.webos.settingsservice/',
method: 'getSystemSettings',
parameters: {
category: 'option',
keys: ['audioGuidance']
},
onSuccess: () => {
setAudioGuidanceDisabled(false);
}
});
}
}, []);

const handleChangeJSNativeButton = () => setNative(!native);
const handleChangeAriaLabelButton = () => setCustomAriaLabel(!customAriaLabel);
const handleChangeAudioGuidance = () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This function breaks my previous qa-a11y test cases.

  1. Turn on audio guidance from the settings app
  2. run qa-a11y app
  3. select Scroller menu
  4. Test the focused scrollbar
  5. switch on the Audio Guidance
  6. Test the new Scroller you added (non-focusable scrollbar)
  7. switch off the Audio Guidance
  8. How can I check the original test number 5?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed audio guidance call from the sample code.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The updated code looks OK.

if (window.WebOSServiceBridge ?? window.PalmServiceBridge) {
setAudioGuidance(!audioGuidance);
new LS2Request().send({
service: 'luna://com.webos.settingsservice/',
method: 'setSystemSettings',
parameters: {
category: 'option',
settings: {
audioGuidance: !audioGuidance ? 'on' : 'off'
}
}
});
}
};

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 +101,28 @@ const ScrollerView = () => {
>
Native
</ToggleButton>
<ToggleButton
onClick={handleChangeAudioGuidance}
disabled={audioGuidanceDisabled}
selected={audioGuidance}
>
Audio Guidance (Scroller with Spottable)
</ToggleButton>
</Cell>
<Cell
component={Scroller}
focusableScrollbar="byEnter"
focusableScrollbar={audioGuidance ? 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={audioGuidance ? null : {width: ri.scaleToRem(6000)}}>
{audioGuidance ?
<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;
});
}