0

Next.js and Typescript beginner here. I'm rebuilding an app using Next.js but ran into trouble splitting pages and components with the error Select element must have an accessible name: Element has no title attributeMicrosoft Edge Toolsaxe/forms.

I'm basically trying to map out a list into a bunch of <options></options> in a React Component but <></> and <React.Fragment></React.Fragment> does not work. I looked into the documentation and found out I also need the <select></select> outside the mapped options. However the select is tied to a useState in the original page. Code below

Part of the page 

<div>
    <label
        htmlFor="section"
        className={styles.sectionLabel}
    >
        Section:
    </label>
    <select
        id="section"
        required
        disabled={
            grade && strand ? false : true
        }
        onChange={(
            e: React.ChangeEvent<HTMLSelectElement>
        ) => {
            setSection(
                e.currentTarget.value
            );
        }}
        value={section}
    >
        <Map list={sectionList} />
    </select>
</div>

Map component 

// errors on this line

interface ListProps {
    list: string[] | void;
}
const Map: React.FC<ListProps> = ({ list }) => {
    return (
        <>
            <option value="">Select Section</option>
            {list?.map((item: string, index: number) => {
                return (
                    <option key={index} value={item}>
                        {item}
                    </option>
                );
            })}
        </>
    );
};

export default Map;
Nugget
  • 81
  • 1
  • 6
  • 23
  • Your code looks fine to me. The `Section:` label should properly be applied as the ` – juliomalves May 15 '22 at 11:11
  • @juliomalves Hey dude. Thanks for the confirmation. Unfortunately, adding `name="section"` still gives the error – Nugget May 16 '22 at 05:45
  • Does this answer help you: https://stackoverflow.com/questions/69772814/how-to-make-a-select-element-accessible-if-it-has-no-label – Mircea Matei May 16 '22 at 09:35
  • @MirceaMatei unfortunately, it also doesn't work. Its rather I put the whole select in the component (will not error but prob requires context API because a useState is in select) or just map the options (gives an error line but runs) – Nugget May 16 '22 at 17:12

1 Answers1

1

Adding the title attribute to the <select> element fixed it for me:

<select
    title="foo"
    id="section"
    required
    disabled={grade && strand ? false : true}
    onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
        setSection(e.currentTarget.value);
    }}
    value={section}
>
tdy
  • 36,675
  • 19
  • 86
  • 83
Yassine Safraoui
  • 55
  • 8