[High]: Chrome+JAWS : Screen reader: Role and label are not defined for "expand" control.

[SumitDiyora]

Action Performed:

1. Using Chrome+JAWS, open URL: staging.new.expensify.com
2. Login with the credentials.
3. Navigate to the text field
4. Type 1 and press Shift+ Enter button, Type 2 and press Shift+ Enter button.
5. A "expand" (2 arrows indicating expand feature) control button will appear which is located on the left side of text-field using the screen reader..
6. Navigate to the "expand" button (2 arrows indicating expand feature) control.
7. Observe the screen reader announcement.

Expected Result:

When a role is defined appropriately for the interactive element, the screen reader user will interact with the element effectively.

Actual Result:

Role is not defined for the "expand". interactive element. This made it difficult for screen reader users to access the functionality associated with it. Additionally, the label is not defined for the mentioned interactive element in the source code of the page.

HTML:
<div tabindex="0" class="css-1dbjc4n r-1loqt21 r-1otgn73 r-1i6wzkk r-lrvibr" style="align-items: center; align-self: flex-end; height: 26px; justify-content: center; margin-bottom: 6px; margin-top: 6px; width: 39px; -webkit-box-align: center; -webkit-box-pack: center; transition-duration: 0.25s;"><svg id="expand_svg__Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 20 20" xml:space="preserve" width="20" height="20" fill="#C6C9CA"><style>.expand_svg__st0{fill-rule:evenodd;clip-rule:evenodd}</style><path class="expand_svg__st0" d="M15.8 5.7l-4.1 4.1c-.2.2-.5.2-.7 0l-.9-.8c-.2-.2-.2-.5 0-.7l4.1-4.1h-3.4c-.3 0-.5-.2-.5-.5V2.5c0-.3.2-.5.5-.5h6.6c.4 0 .6.2.6.5v6.6c0 .3-.2.5-.5.5h-1.2c-.3 0-.5-.2-.5-.5V5.7zM4.2 14.3l4.1-4.1c.2-.2.5-.2.7-.1l.9.9c.2.2.2.5 0 .7l-4.1 4.1h3.4c.3 0 .5.2.5.5v1.2c0 .3-.2.5-.5.5H2.5c-.3 0-.5-.2-.5-.5v-6.6c0-.3.2-.5.5-.5h1.2c.3 0 .5.2.5.5v3.4z"></path></svg></div>

Workaround:

Yes

Area issue was found in:

All pages of the Expensify application were a "expand" (2 arrows indicating expand) icon button is appearing.

Failed WCAG checkpoints

4.1.2, 1.3.1

User impact:

Screen reader users will not be aware that these elements are buttons. Also as the label is not given they would not be able to understand and access this feature.

Suggested resolution:

Ensure that all the page functionality is available for all users irrespective of the device being used.
Apply the following changes:

• Specify role="button" for the 'div' element containing the "expand"(2 arrows indicating expand) control.
• Provide aria-label value such as "expand" for the 'div' element containing the "expand"(2 arrows indicating expand) control.

<div tabindex="0" role="button" aria-label="expand"class="css-1dbjc4n r-1loqt21 r-1otgn73 r-1i6wzkk r-lrvibr" style="align-items: center; align-self: flex-end; height: 26px; justify-content: center; margin-bottom: 6px; margin-top: 6px; width: 39px; -webkit-box-align: center; -webkit-box-pack: center; transition-duration: 0.25s;"><svg id="expand_svg__Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 20 20" xml:space="preserve" width="20" height="20" fill="#C6C9CA"><style>.expand_svg__st0{fill-rule:evenodd;clip-rule:evenodd}</style><path class="expand_svg__st0" d="M15.8 5.7l-4.1 4.1c-.2.2-.5.2-.7 0l-.9-.8c-.2-.2-.2-.5 0-.7l4.1-4.1h-3.4c-.3 0-.5-.2-.5-.5V2.5c0-.3.2-.5.5-.5h6.6c.4 0 .6.2.6.5v6.6c0 .3-.2.5-.5.5h-1.2c-.3 0-.5-.2-.5-.5V5.7zM4.2 14.3l4.1-4.1c.2-.2.5-.2.7-.1l.9.9c.2.2.2.5 0 .7l-4.1 4.1h3.4c.3 0 .5.2.5.5v1.2c0 .3-.2.5-.5.5H2.5c-.3 0-.5-.2-.5-.5v-6.6c0-.3.2-.5.5-.5h1.2c.3 0 .5.2.5.5v3.4z"></path></svg></div>

Refer to:
https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html

https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

Platform:

• Web
• iOS
• Android
• Desktop App
• Mobile Web

**Version Number:v1.1.78-0
**Reproducible in staging?:Yes
**Reproducible in production?:Yes
**Issue reported by:Sumit

role.and.label.not.given.mp4

[melvin-bot]

@SumitDiyora, this Monthly task hasn't been acted upon in 6 weeks; closing.

If you disagree, feel encouraged to reopen it -- but pick your least important issue to close instead.