r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

✨ add accessible output settings

Browse source
This commit is contained in:
ghalestrilo 2020-06-23 17:15:59 -03:00
parent a9c17b5267
commit 1f69786aaa
1 changed files with 50 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
client/modules/Mobile/MobilePreferences.jsx
View file

@ -37,8 +37,12 @@ const SectionHeader = styled.h2`
const MobilePreferences = (props) => {
const { setTheme, setAutosave, setLinewrap } = props;
const { theme, autosave, linewrap } = props;
const {
setTheme, setAutosave, setLinewrap, setTextOutput, setGridOutput, setSoundOutput
} = props;
const {
theme, autosave, linewrap, textOutput, gridOutput, soundOutput
} = props;
const generalSettings = [
{
@ -87,6 +91,48 @@ const MobilePreferences = (props) => {
}
];
const accessibilitySettings = [
{
title: 'Plain-text',
value: textOutput,
options: [
{
value: true, label: 'On', ariaLabel: 'text output on', name: 'text output', id: 'text-output-on'
},
{
value: false, label: 'Off', ariaLabel: 'text output off', name: 'text output', id: 'text-output-off'
},
],
onSelect: x => setTextOutput(x)
},
{
title: 'Table-text',
value: gridOutput,
options: [
{
value: true, label: 'On', ariaLabel: 'table output on', name: 'table output', id: 'table-output-on'
},
{
value: false, label: 'Off', ariaLabel: 'table output off', name: 'table output', id: 'table-output-off'
},
],
onSelect: x => setGridOutput(x)
},
{
title: 'Sound',
value: soundOutput,
options: [
{
value: true, label: 'On', ariaLabel: 'sound output on', name: 'sound output', id: 'sound-output-on'
},
{
value: false, label: 'Off', ariaLabel: 'sound output off', name: 'sound output', id: 'sound-output-off'
},
],
onSelect: x => setSoundOutput(x)
},
];
// useEffect(() => { });
return (
@ -108,13 +154,14 @@ const MobilePreferences = (props) => {
{ generalSettings.map(option => <Selector key={`${option.title}wrapper`} {...option} />) }
<SectionHeader>Accessibility</SectionHeader>
{ accessibilitySettings.map(option => <Selector key={`${option.title}wrapper`} {...option} />) }
</Content>
</section>
</section>
</Screen>);
};
MobilePreferences.propTypes = {
fontSize: PropTypes.number.isRequired,
lineNumbers: PropTypes.bool.isRequired,