refactor: misc a11y improvements (#899)

* refactor: add missing input IDs to make labels work

* refactor: fix heading orders

* refactor: add missing environment switch label

* refactor: make scrollable area focusable

* refactor: use <li>s inside the events <ul>

* refactor: remove duplicate ID attribute

frontend/src/component/common/select.tsx

@@ -49,9 +49,7 @@ const SelectMenu: React.FC<ISelectMenuProps> = ({
 
     return (
         <FormControl variant="outlined" size="small" classes={classes}>
-            <InputLabel htmlFor={id} id={id}>
+            <InputLabel htmlFor={id}>{label}</InputLabel>
-                {label}
-            </InputLabel>
             <Select
                 name={name}
                 disabled={disabled}

frontend/src/component/feature/FeatureForm/FeatureForm.tsx

@@ -79,6 +79,7 @@ const FeatureForm: React.FC<IFeatureToggleForm> = ({
                     disabled={mode === 'Edit'}
                     className={styles.input}
                     label="Name"
+                    id="feature-toggle-name"
                     error={Boolean(errors.name)}
                     errorText={errors.name}
                     onFocus={() => clearErrors()}
@@ -141,6 +142,7 @@ const FeatureForm: React.FC<IFeatureToggleForm> = ({
                         variant="subtitle1"
                         className={styles.roleSubtitle}
                         data-loading
+                        component="h2"
                     >
                         Impression Data
                     </Typography>

frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx

@@ -132,6 +132,7 @@ const FeatureToggleListNewItem = ({
                                     environmentId={env.name}
                                     projectId={projectId}
                                     permission={UPDATE_FEATURE_ENVIRONMENT}
+                                    inputProps={{ 'aria-label': env.name }}
                                     ref={ref}
                                     onClick={() => {
                                         handleToggle(env);

frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx

@@ -85,6 +85,7 @@ const FlexibleStrategy = ({
                         display: 'flex',
                         alignItems: 'center',
                     }}
+                    component="h2"
                 >
                     Stickiness
                     <Tooltip title="Stickiness defines what parameter should be used to ensure that your users get consistency in features. By default unleash will use the first value present in the context in the order of userId, sessionId and random.">
@@ -119,6 +120,7 @@ const FlexibleStrategy = ({
                         display: 'flex',
                         alignItems: 'center',
                     }}
+                    component="h2"
                 >
                     GroupId
                     <Tooltip title="GroupId is used to ensure that different toggles will hash differently for the same user. The groupId defaults to feature toggle name, but you can override it to correlate rollout of multiple feature toggles.">
@@ -133,6 +135,7 @@ const FlexibleStrategy = ({
                 </Typography>
                 <Input
                     label="groupId"
+                    id="groupId-input"
                     value={groupId || ''}
                     disabled={!editable}
                     onChange={e => onUpdate('groupId')(e, e.target.value)}

frontend/src/component/feature/StrategyTypes/RolloutSlider/RolloutSlider.tsx

@@ -90,6 +90,7 @@ const RolloutSlider = ({
                 id="discrete-slider-always"
                 variant="subtitle2"
                 gutterBottom
+                component="h2"
             >
                 {name}
             </Typography>

frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx

@@ -67,7 +67,9 @@ const StrategyInputList = ({
 
     return (
         <div>
-            <Typography variant="subtitle2">List of {name}</Typography>
+            <Typography variant="subtitle2" component="h2">
+                List of {name}
+            </Typography>
             <div
                 style={{
                     display: 'flex',
@@ -93,6 +95,7 @@ const StrategyInputList = ({
                             name={`input_field`}
                             variant="outlined"
                             label="Add items"
+                            id="input-add-items"
                             value={input}
                             size="small"
                             placeholder=""

frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.jsx

@@ -94,7 +94,7 @@ const EventDiff = ({ entry }) => {
     }
 
     return (
-        <pre style={{ overflowX: 'auto', overflowY: 'hidden' }}>
+        <pre style={{ overflowX: 'auto', overflowY: 'hidden' }} tabIndex={0}>
             <code className="smalltext man">
                 {changes.length === 0 ? '(no changes)' : changes}
             </code>

frontend/src/component/history/EventLog/EventJson/EventJson.jsx

@@ -13,11 +13,11 @@ const EventJson = ({ entry }) => {
     const prettyPrinted = JSON.stringify(localEventData, null, 2);
 
     return (
-        <div className={styles.historyItem}>
+        <li className={styles.historyItem}>
             <div>
                 <code className="JSON smalltext man">{prettyPrinted}</code>
             </div>
-        </div>
+        </li>
     );
 };
 

frontend/src/component/history/EventLog/EventLog.jsx

@@ -30,12 +30,12 @@ const EventLog = ({
     let entries;
 
     const renderListItemCards = entry => (
-        <div key={entry.id} className={styles.eventEntry}>
+        <li key={entry.id} className={styles.eventEntry}>
             <EventCard
                 entry={entry}
                 timeFormatted={formatFulldateTime(entry.createdAt)}
             />
-        </div>
+        </li>
     );
 
     if (eventSettings.showData) {