Skip to content

Commit 88011b0

Browse files
mitch-torchboxmitch-torchbox
committed
Update from samaritans.org 95a83d3f
1 parent e028ecd commit 88011b0

File tree

24 files changed

+67
-55
lines changed

24 files changed

+67
-55
lines changed

‎.eslintrc.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,12 @@ module.exports = {
33
extends: 'torchbox/typescript',
44
rules: {
55
'react/prop-types': 'off',
6+
'jsx-a11y/label-has-associated-control': [
7+
2,
8+
{
9+
controlComponents: ['Toggle'],
10+
depth: 3,
11+
},
12+
],
613
},
714
};

‎project_styleguide/templates/patterns/pages/website/webchat/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{% load static %}
22
<!DOCTYPE html>
3-
<html lang="en">
3+
<html lang="en-GB">
44
<head>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

‎static_src/typescript/components/BannerDropdown/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const BannerDropdown = ({ title, children }) => {
1010
<BannerButton
1111
isVisible={isVisible}
1212
onClick={() => setVisibility(!isVisible)}
13+
aria-expanded={isVisible}
1314
>
1415
{title}
1516
</BannerButton>

‎static_src/typescript/components/BannerNotifications/index.tsx

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -53,12 +53,11 @@ const BannerNotifications = () => {
5353
<b>{notifications ? 'enabled' : 'disabled'}</b>
5454
</Heading>
5555
<ToggleContainer>
56-
<p>Please use the toggle to change this:</p>
5756
<label>
57+
<p>Send me a push notification</p>
5858
<Toggle
5959
onChange={handlePermission}
6060
checked={notifications}
61-
aria-label="Send me a push notification"
6261
/>
6362
</label>
6463
</ToggleContainer>
@@ -72,13 +71,9 @@ const BannerNotifications = () => {
7271
<b>{audio ? 'enabled' : 'disabled'}</b>
7372
</Heading>
7473
<ToggleContainer>
75-
<p>Please use the toggle to change this:</p>
7674
<label>
77-
<Toggle
78-
onChange={handleAudio}
79-
checked={audio}
80-
aria-label="Play an audio alert"
81-
/>
75+
<p>Play an audio alert</p>
76+
<Toggle onChange={handleAudio} checked={audio} />
8277
</label>
8378
</ToggleContainer>
8479
</Block>

‎static_src/typescript/components/BannerNotifications/styled.ts

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,22 @@ import styled from 'styled-components';
22
import device from 'styles/device';
33

44
const ToggleContainer = styled.div`
5-
display: flex;
6-
align-items: center;
7-
justify-content: center;
8-
9-
> P {
5+
p {
106
margin-bottom: 0;
117
margin-right: 1rem;
128
}
9+
10+
> label {
11+
display: flex;
12+
align-items: center;
13+
justify-content: space-between;
14+
}
15+
16+
@media ${device.tabletLandscape} {
17+
> label {
18+
justify-content: center;
19+
}
20+
}
1321
`;
1422

1523
export const Heading = styled.h2`

‎static_src/typescript/components/Checkbox/index.tsx

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,32 +9,36 @@ type Props = {
99
children?: ReactNode;
1010
id: string;
1111
ariaLabel: string;
12-
} & typeof defaultProps;
13-
14-
const defaultProps = {
15-
labelComponent: 'label' as
12+
ariaRequired?: boolean;
13+
labelComponent?:
1614
| string
1715
| ComponentClass<{
1816
'checked': boolean;
1917
'htmlFor': string;
2018
'aria-label': string;
21-
}>,
19+
}>;
2220
};
2321

2422
const Checkbox = ({
2523
checked,
2624
onChange,
2725
children,
28-
labelComponent,
2926
id,
3027
ariaLabel,
28+
ariaRequired = false,
29+
labelComponent = 'label',
3130
}: Props) =>
3231
React.createElement(
3332
labelComponent,
3433
{ checked, 'htmlFor': id, 'aria-label': ariaLabel },
3534
<>
3635
<CheckboxContainer>
37-
<HiddenCheckbox checked={checked} onChange={onChange} id={id} />
36+
<HiddenCheckbox
37+
checked={checked}
38+
onChange={onChange}
39+
id={id}
40+
aria-required={ariaRequired}
41+
/>
3842
<StyledCheckbox checked={checked} onChange={onChange}>
3943
<TickIcon aria-hidden="true" />
4044
</StyledCheckbox>
@@ -43,6 +47,4 @@ const Checkbox = ({
4347
</>,
4448
);
4549

46-
Checkbox.defaultProps = defaultProps;
47-
4850
export default Checkbox;

‎static_src/typescript/components/FeedbackRoom/index.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import { useDispatch, useSelector } from 'react-redux';
3+
import useTitle from 'react-use/lib/useTitle';
34

45
import TertiaryButton from 'components/TertiaryButton';
56
import Tiler, { Tile } from 'components/Tiler';
@@ -21,6 +22,8 @@ import {
2122
import { endSession } from '../../slices/webchatSlice';
2223

2324
const FeedbackRoom = () => {
25+
useTitle('Your conversation has ended | Webchat');
26+
2427
const dispatch = useDispatch<AppDispatch>();
2528
const amazonConnectContactId = useSelector(
2629
(state: RootState) => state.webchat.amazonConnectContactId,

‎static_src/typescript/components/HorizontalWaitTimePanel/index.tsx

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,6 @@ const HorizontalWaitTimePanel = () => {
1818
<Panel>
1919
<ClockIcon paused={false} large />
2020
<Content>
21-
<span
22-
aria-live="polite"
23-
aria-label={`There is currently a ${time} wait time.`}
24-
/>
2521
<p>Estimated time remaining</p>
2622
<WaitTime>{time}</WaitTime>
2723
</Content>

‎static_src/typescript/components/InQueue/index.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,15 @@ import BannerNotifications from 'components/BannerNotifications';
1414
import HorizontalWaitTimePanel from 'components/HorizontalWaitTimePanel';
1515
import ClockIcon from 'components/ClockIcon';
1616
import { useNotifications } from 'utils/hooks';
17+
import useTitle from 'react-use/lib/useTitle';
1718

1819
export type Props = {
1920
goToChat: () => void;
2021
};
2122

2223
export const InQueue = ({ goToChat }: Props) => {
24+
useTitle("You're waiting for a Samaritan | Webchat");
25+
2326
const browserPermission = Push.Permission.get();
2427

2528
const [isPushNotificationEnabled, updateNotifications] = useNotifications();

‎static_src/typescript/components/JoiningQueue/index.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,18 @@ import React, { useCallback, useEffect, useState } from 'react';
22

33
import Spinner from 'components/Spinner';
44

5+
import useTitle from 'react-use/lib/useTitle';
56
import StyledJoiningQueue from './styled';
67

78
const JoiningQueue = () => {
9+
useTitle('Entering the waiting room... | Webchat');
10+
811
// Wait for 10 seconds before showing more information
912
const [seconds, setSeconds] = useState(10);
1013

1114
const tick = useCallback(() => {
1215
if (seconds > 0) {
13-
setSeconds((seconds) => seconds - 1);
16+
setSeconds((s) => s - 1);
1417
}
1518
}, [seconds]);
1619

‎static_src/typescript/components/ReadyScreen/index.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useEffect, useCallback } from 'react';
22
import { useSpring, animated } from 'react-spring';
3+
import useTitle from 'react-use/lib/useTitle';
34

45
import Button from 'components/Button';
56

@@ -13,6 +14,8 @@ export type Props = {
1314
};
1415

1516
const ReadyScreen = ({ joinAction }: Props) => {
17+
useTitle('A Samaritan is ready to listen | Webchat');
18+
1619
const [isPushNotificationEnabled, , isAudioNotificationEnabled] =
1720
useNotifications();
1821

‎static_src/typescript/components/WaitTimePanel/index.tsx

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,6 @@ const WaitTimePanel = ({ waitTime, children, paused, beforeTime }: Props) => (
1919
<>
2020
<ClockIcon paused={paused} large />
2121
<div>
22-
<span
23-
aria-live="polite"
24-
aria-label={`There is currently a ${timeDisplay(
25-
waitTime,
26-
)} wait time.`}
27-
/>
2822
{beforeTime && <Copy>{beforeTime}</Copy>}
2923
<StyledWaitTime>{timeDisplay(waitTime)}</StyledWaitTime>
3024
{children}

‎static_src/typescript/screens/ChatScreen.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import useTitle from 'react-use/lib/useTitle';
23

34
import Banner from 'components/Banner';
45
import ExitModal from 'components/ExitModal';
@@ -15,6 +16,8 @@ const confirmLiveChatEnd = () => {
1516
};
1617

1718
const ChatScreen = () => {
19+
useTitle('Chat | Webchat');
20+
1821
const dispatch = useDispatch();
1922
const { isConfirmExitVisible } = useSelector(
2023
(state: RootState) => state.webchat,

‎static_src/typescript/screens/LandingScreen.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,9 +98,12 @@ const LandingScreen = () => {
9898
labelComponent={Label}
9999
id="fingerprinting-consent"
100100
ariaLabel="I agree to the use of Browser Fingerprinting"
101+
ariaRequired
101102
>
102103
I agree to the use of Browser Fingerprinting
103-
<span className="asterisk">*</span>
104+
<span className="asterisk" aria-hidden="true">
105+
*
106+
</span>
104107
</Checkbox>
105108
{joinClicked && !fpConsent && (
106109
<Small error>

‎static_src/typescript/webchat-assets/svgs/bell.svg

Lines changed: 1 addition & 2 deletions
Loading

‎static_src/typescript/webchat-assets/svgs/burger-menu.svg

Lines changed: 1 addition & 1 deletion
Loading

‎static_src/typescript/webchat-assets/svgs/person.svg

Lines changed: 2 additions & 3 deletions
Loading

‎static_src/typescript/webchat-assets/svgs/tick.svg

Lines changed: 1 addition & 2 deletions
Loading

‎static_src/typescript/webchat-assets/svgs/user-avatar-failed.svg

Lines changed: 1 addition & 2 deletions
Loading

‎static_src/typescript/webchat-assets/svgs/user-avatar.svg

Lines changed: 1 addition & 2 deletions
Loading

‎static_src/typescript/webchat-assets/svgs/volunteer-avatar-alt.svg

Lines changed: 1 addition & 2 deletions
Loading

‎static_src/typescript/webchat-assets/svgs/volunteer-avatar.svg

Lines changed: 1 addition & 2 deletions
Loading

‎static_src/typescript/webchat-assets/svgs/volunteer-ready.svg

Lines changed: 1 addition & 2 deletions
Loading

‎static_src/typescript/webchat-assets/svgs/warning.svg

Lines changed: 1 addition & 2 deletions
Loading

0 commit comments

Comments
 (0)