[Select]: WCAG and other issues

[ivarkallejarv]

Problem

TEDI Version 11.3.3
All problems use TEDI-REDI select, unless specified otherwise

Functional

1. Select loses focus, cannot navigate via keyboard, etc. (also described in https://github.com/TEHIK-EE/tedi-design-system/issues/743)

2. ^ Related. Currently the select doesn't close upon clicking anywhere else as well, but probably related to focus loss

Visual + Accessibility

3. No options help message has text color of rgb(153, 153, 153) in CSS, which only has a contrast of 2.85:1 with background of #fff

4. [Community Select] - Border color on hover has a contrast of 2.09:1
   

5. Width 1280px, zoom 400% - if you have more space on the top than on the bottom when opening select, it'll open in the upwards direction. And in such a case where the select has a lot of content, the content will be hidden behind the top border of the browser. Select content doesn't adjust to take available space into account
   

6. Add content to renderMessageListFooter. Try to navigate to the footer content using tab navigation. Currently the Select closes and the content is not accessible
   

7. Add content to renderMessageListFooter that is focusable. Focus the select input. Press tab. Focus disappears (probably trying to focus the buttons inside footer) and the select options closes, thus giving the illusion that the user's focus disappears entirely.
   

8. Navigate inside the select, using JAWS. Options inside are not read out as clickable elements to the user
   

9. Add noOptionsMessage to Select. Navigate to Select using JAWS. JAWS doesn't read out the no options message to the user
   

Examples and information

<Select
      value={value}
      onChange={(value) => onChange(value as ISelectOption<PersonSearchSelectCustomData> | null)}
      noOptionsMessage={() => t(`${isInputShort ? 'input-short' : 'no-result'}`)}
      loadingMessage={() => t('loading')}
      label={"Select label"}
      id="person-search"
      name={inputName}
      async={true}
      menuIsOpen={isMenuOpen}
      onMenuClose={() => setIsMenuOpen(false)}
      onMenuOpen={() => setIsMenuOpen(true)}
      onInputChange={handleInputChange}
      loadOptions={loadOptions}
      helper={helper}
      renderOption={(props) => (
        <Row gutterX={2}>
          {props.data.customData?.label && (
            <Col width="auto">
              <StatusBadge color={props.data.customData?.label === 'L' ? 'warning' : 'danger'}>
                {props.data.customData?.value}
              </StatusBadge>
            </Col>
          )}
          <Col>
            <Text color="brand">Some label</Text>
          </Col>
        </Row>
      )}
      renderMessageListFooter={() => (
        <VerticalSpacing size={0.75}>
          <Row justifyContent="center" gutterX={2}>
            <Col width="auto">
              <Button
                size="small"
                visualType="secondary"
                onTouchStart={() => doThis?.()}
                onClick={() => doThis?.()}
              >
                Do X
              </Button>
            </Col>
            <Col width="auto">
              <Button
                size="small"
                visualType="secondary"
                onTouchStart={() => doThat?.()}
                onClick={() => doThat?.()}
              >
                Do Y
              </Button>
            </Col>
          </Row>
          <Text modifiers={['small', 'center']} color="secondary">
            Info text here
          </Text>
        </VerticalSpacing>
      )}
      ref={innerRef}
    />

[tobre6]

1. Confirmed in TEDI-READY
2. Cannot reproduce
3. Confirmed in TEDI-READY
4. Problem in Community select. OK in TEDI-READY
5. Confirmed in TEDI-READY. Problem is 320x256px with 100% as well
6. Confirmed in TEDI-READY
7. Looks like problem is not with component, instead application should define focus order.
8. Confirmed, but not yet sure, where the problem is.
9. Confirmed in TEDI-READY

[tobre6]

Development done