feat(GlBroadcastMessage): Add hardcoded sr-only heading
What does this MR do?
All the context in #1736 (comment 1360407689)
This MR add's a hardcoded screen ready only h2
to the broadcast message component. Having a heading will increase discoverability for assistive technologies like screen readers.
Although not yet used in GitLab, this makes the component ready for a future migration.
Follow up issues will implement this component in GitLab, and produce design specs for a user generated heading with optional visibility.
Type = broadcast
Before | After |
---|---|
Visual: |
Visual: |
VoiceOver: No headings in VoiceOver rotor. |
VoiceOver: |
Type = notification
Before |
After |
---|---|
VoiceOver: No headings in VoiceOver rotor. |
Steps to test
- Go to base > broadcast message > default http://localhost:9001/?path=/story/base-broadcast-message--default
- View the page using a screenreader. Example instructions shown for VoiceOver, for more details see the VoiceOver user guide.
- Turn on VoiceOver.
- Ensure the component iframe has focus.
- See the list of headings using the VoiceOver rotor.
ctrl
+alt
+u
- Check the Admin message
h2
is visible.
- Repeat for the notification and stacked stories.
Does this MR meet the acceptance criteria?
Conformity
-
Code review guidelines. -
GitLab UI's contributing guidlines. -
If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer. -
If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer. -
If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the@gitlab/ui
package can be upgraded quickly after the changes are released:-
GitLab: mr_url -
CustomersDot: mr_url -
Status Page: mr_url
-
-
Added the ~"component:*"
label(s) if applicable.
Security
If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:
-
Label as security and @ mention@gitlab-com/gl-security/appsec
-
Security reports checked/validated by a reviewer from the AppSec team
Accessibility
If this MR adds or modifies a component, take a few moments to review the following:
-
All actions and functionality can be done with a keyboard. -
Links, buttons, and controls have a visible focus state. -
All content is presented in text or with a text equivalent. For example, alt text for SVG, or aria-label
for icons that have meaning or perform actions. -
Changes in a component’s state are announced by a screen reader. For example, changing aria-expanded="false"
toaria-expanded="true"
when an accordion is expanded. -
Color combinations have sufficient contrast.
Closes #1736 (closed)