We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
At: https://github.com/civictheme/uikit/blob/main/components/01-atoms/button/button.twig#L77
an aria label of aria-label="Opens in a new tab" is set, which a screen reader would read out instead of the content within the button.
aria-label="Opens in a new tab"
If removing this, the screen reader will still alert the user that the link opens in a new window, as..
<span class="ct-visually-hidden">(Opens in a new tab/window)</span>
...is included in the button if allow_html is disabled and is_new_window is enabled. This is because text-icon.twig will include it.
allow_html
is_new_window
text-icon.twig
Use a screen reader on:
https://uikit.civictheme.io/?path=/story/atoms-form-controls-button--button&knob-Allow%20HTML%20in%20text_General=true&knob-Is%20external_General=true&knob-Kind_General=button&knob-Size_General=regular&knob-Text_General=Button%20text&knob-Theme_General=light&knob-Type_General=primary
With the following settings:
Screen reader will read out "Opens in a new tab" rather than "Will this text read out?"
Screen reader should read out "Will this text read out? Opens in a new tab"
The text was updated successfully, but these errors were encountered:
[#389] Removed aria-label from button with 'is_new_window'.
61b84df
The aria-label in this case would override whatever text was present within the button, meaning buttons lose context if used with a screen reader.
[#389] Updated snapshots.
15b2d31
[#389] Removed aria-label from button with 'is_new_window'. (#390)
7315692
Test Env: DEV Test Status: PASS Test Result:
Sorry, something went wrong.
richardgaunt
No branches or pull requests
Summary
At: https://github.com/civictheme/uikit/blob/main/components/01-atoms/button/button.twig#L77
an aria label of
aria-label="Opens in a new tab"
is set, which a screen reader would read out instead of the content within the button.If removing this, the screen reader will still alert the user that the link opens in a new window, as..
...is included in the button if
allow_html
is disabled andis_new_window
is enabled. This is becausetext-icon.twig
will include it.Steps to reproduce
Use a screen reader on:
https://uikit.civictheme.io/?path=/story/atoms-form-controls-button--button&knob-Allow%20HTML%20in%20text_General=true&knob-Is%20external_General=true&knob-Kind_General=button&knob-Size_General=regular&knob-Text_General=Button%20text&knob-Theme_General=light&knob-Type_General=primary
With the following settings:
Observed outcome
Screen reader will read out "Opens in a new tab" rather than "Will this text read out?"
Expected outcome
Screen reader should read out "Will this text read out? Opens in a new tab"
The text was updated successfully, but these errors were encountered: