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

✨ add accessibility settings

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

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

@ -38,10 +38,10 @@ const SectionHeader = styled.h2`
const MobilePreferences = (props) => {
const {
setTheme, setAutosave, setLinewrap, setTextOutput, setGridOutput, setSoundOutput
setTheme, setAutosave, setLinewrap, setTextOutput, setGridOutput, setSoundOutput, lineNumbers, lintWarning
} = props;
const {
theme, autosave, linewrap, textOutput, gridOutput, soundOutput
theme, autosave, linewrap, textOutput, gridOutput, soundOutput, setLineNumbers, setLintWarning
} = props;
const generalSettings = [
@ -91,7 +91,7 @@ const MobilePreferences = (props) => {
}
];
const accessibilitySettings = [
const outputSettings = [
{
title: 'Plain-text',
value: textOutput,
@ -133,6 +133,35 @@ const MobilePreferences = (props) => {
},
];
const accessibilitySettings = [
{
title: 'Line Numbers',
value: lineNumbers,
options: [
{
value: true, label: 'On', ariaLabel: 'line numbers on', name: 'line numbers', id: 'line-numbers-on'
},
{
value: false, label: 'Off', ariaLabel: 'line numbers off', name: 'line numbers', id: 'line-numbers-off'
},
],
onSelect: x => setLineNumbers(x)
},
{
title: 'Lint Warning Sound',
value: lintWarning,
options: [
{
value: true, label: 'On', ariaLabel: 'lint warning on', name: 'lint warning', id: 'lint-warning-on'
},
{
value: false, label: 'Off', ariaLabel: 'lint warning off', name: 'lint warning', id: 'lint-warning-off'
},
],
onSelect: x => setLintWarning(x)
},
];
// useEffect(() => { });
return (
@ -156,12 +185,17 @@ const MobilePreferences = (props) => {
<SectionHeader>Accessibility</SectionHeader>
{ accessibilitySettings.map(option => <Selector key={`${option.title}wrapper`} {...option} />) }
<SectionHeader>Accessible Output</SectionHeader>
<h3>Used with screen reader</h3>
{ outputSettings.map(option => <Selector key={`${option.title}wrapper`} {...option} />) }
</Content>
</section>
</section>
</Screen>);
};
MobilePreferences.propTypes = {
fontSize: PropTypes.number.isRequired,
lineNumbers: PropTypes.bool.isRequired,