Make custom DNS section accessible

2 files changed, 69 insertions, 21 deletions

diff --git a/gui/src/renderer/components/AdvancedSettings.tsx b/gui/src/renderer/components/AdvancedSettings.tsx
index 78a556901b..6633e35746 100644
--- a/gui/src/renderer/components/AdvancedSettings.tsx
+++ b/gui/src/renderer/components/AdvancedSettings.tsx
@@ -440,14 +440,20 @@ export default class AdvancedSettings extends React.Component<IProps, IState> {
                 </StyledButtonCellGroup>
 
                 <StyledCustomDnsSwitchContainer>
-                  <Cell.InputLabel>
-                    {messages.pgettext('advanced-settings-view', 'Use custom DNS server')}
-                  </Cell.InputLabel>
-                  <Cell.Switch
-                    ref={this.customDnsSwitchRef}
-                    isOn={this.props.dns.custom}
-                    onChange={this.setCustomDnsEnabled}
-                  />
+                  <AriaInputGroup>
+                    <AriaLabel>
+                      <Cell.InputLabel>
+                        {messages.pgettext('advanced-settings-view', 'Use custom DNS server')}
+                      </Cell.InputLabel>
+                    </AriaLabel>
+                    <AriaInput>
+                      <Cell.Switch
+                        ref={this.customDnsSwitchRef}
+                        isOn={this.props.dns.custom}
+                        onChange={this.setCustomDnsEnabled}
+                      />
+                    </AriaInput>
+                  </AriaInputGroup>
                 </StyledCustomDnsSwitchContainer>
                 <Accordion expanded={this.props.dns.custom}>
                   <CellList items={this.customDnsItems()} onRemove={this.removeDnsAddress} />
diff --git a/gui/src/renderer/components/cell/List.tsx b/gui/src/renderer/components/cell/List.tsx
index 5e901c9d99..cd99a052cb 100644
--- a/gui/src/renderer/components/cell/List.tsx
+++ b/gui/src/renderer/components/cell/List.tsx
@@ -1,6 +1,8 @@
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
 import { colors } from '../../../config.json';
+import { messages } from '../../../shared/gettext';
+import { AriaDescribed, AriaDescription, AriaDescriptionGroup } from '../AriaGroup';
 import ImageView from '../ImageView';
 import * as Cell from '.';
 
@@ -40,6 +42,22 @@ export default function CellList<T>(props: ICellListProps<T>) {
   );
 }
 
+const StyledContainer = styled(Cell.Container)({
+  display: 'flex',
+  marginBottom: '1px',
+  backgroundColor: colors.blue40,
+});
+
+const StyledButton = styled.button({
+  display: 'flex',
+  alignItems: 'center',
+  flex: 1,
+  border: 'none',
+  background: 'transparent',
+  padding: 0,
+  margin: 0,
+});
+
 const StyledLabel = styled(Cell.Label)({}, (props: { paddingLeft: number }) => ({
   fontFamily: 'Open Sans',
   fontWeight: 'normal',
@@ -51,6 +69,18 @@ const StyledLabel = styled(Cell.Label)({}, (props: { paddingLeft: number }) => (
   marginRight: '25px',
 }));
 
+const StyledRemoveButton = styled.button({
+  background: 'transparent',
+  border: 'none',
+  padding: 0,
+});
+
+const StyledRemoveIcon = styled(ImageView)({
+  [StyledRemoveButton + ':hover &']: {
+    backgroundColor: colors.white80,
+  },
+});
+
 interface ICellListItemProps<T> {
   value: T;
   onSelect?: (application: T) => void;
@@ -64,18 +94,30 @@ function CellListItem<T>(props: ICellListItemProps<T>) {
   const onRemove = useCallback(() => props.onRemove?.(props.value), [props.onRemove, props.value]);
 
   return (
-    <Cell.CellButton onClick={props.onSelect ? onSelect : undefined}>
-      <StyledLabel paddingLeft={props.paddingLeft}>{props.children}</StyledLabel>
-      {props.onRemove && (
-        <ImageView
-          source="icon-close"
-          width={22}
-          height={22}
-          onClick={onRemove}
-          tintColor={colors.white60}
-          tintHoverColor={colors.white80}
-        />
-      )}
-    </Cell.CellButton>
+    <AriaDescriptionGroup>
+      <StyledContainer>
+        <StyledButton
+          onClick={props.onSelect ? onSelect : undefined}
+          as={props.onSelect ? 'button' : 'span'}>
+          <AriaDescription>
+            <StyledLabel paddingLeft={props.paddingLeft}>{props.children}</StyledLabel>
+          </AriaDescription>
+        </StyledButton>
+        {props.onRemove && (
+          <AriaDescribed>
+            <StyledRemoveButton
+              onClick={onRemove}
+              aria-label={messages.pgettext('accessibility', 'Remove item')}>
+              <StyledRemoveIcon
+                source="icon-close"
+                width={22}
+                height={22}
+                tintColor={colors.white60}
+              />
+            </StyledRemoveButton>
+          </AriaDescribed>
+        )}
+      </StyledContainer>
+    </AriaDescriptionGroup>
   );
 }