Screen reader omits disabled attribute

Question

I have a stepper - material UI number field. It is disabled but the screen reader is able to change the number (increment and decrement). HTML is as follows:

<input aria-invalid="false" id="outlined-number" type="number" class="MuiInputBase-input MuiOutlinedInput-input" disabled="true" value="3">

Answer 1

The disabled attribute is being specified wrong. From https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes :

2.4.2 Boolean attributes

A number of attributes are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.

The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

Change the code to disabled="disabled" .