Fix accessibility issues by using visually-hidden on hide and unsetting title element on remove

Created on 6 March 2023, over 1 year ago
Updated 9 February 2024, 5 months ago

Problem/Motivation

- This module was putting on the "hidden" class and I wanted it to show "visually-hidden" so that it still renders for screen readers.
- This module should not simply suppress the text from the h1 tag, it should remove the tag altogether. An empty header tag is an accessibility issue that triggers analysis tools like SiteImprove.

Steps to reproduce

1. Configure a content type and create a node of that type to use Exclude Node Title.
2. Configure its title to be hidden and view the node.
3. Configure its title to be removed and view the node.

Step 2, the title is hidden with `hidden` which is a display:none. This will not be picked up by screen readers.
Step 3, the title is emptied. This will be picked up by screen readers as an empty header.

Proposed resolution

- Apply the visually-hidden class to the title element when set to hide. This is for when we want to not show the title but have the screen reader pick up the text.
- Remove the title element entirely when set to remove. This is for when we really want to remove the title from the HTML.

Remaining tasks

- Review

User interface changes

- Removing the title should now remove its empty element. This may affect implementations that unknowingly relied on that empty element for spacing purposes, or worked around it to visually remove any spacing that empty element introduced.

API changes

None

Data model changes

None

πŸ› Bug report
Status

Needs review

Version

1.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States dasginganinja Bethlehem, PA

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.69.0 2024