-
Notifications
You must be signed in to change notification settings - Fork 15
New issue
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
feat: add tag prop to gcds-sr-only component #484
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just one small thing
@@ -64,7 +64,7 @@ export class GcdsHeader { | |||
return <slot name="skip-to-nav"></slot>; | |||
} else if (this.skipToHref) { | |||
return ( | |||
<nav class="gcds-header__skip-to-nav"> | |||
<nav class="gcds-header__skip-to-nav" aria-label={i18n[this.lang].skip}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We originally had this nav
landmarked labelled this, but chose to remove the label when one of our a11y tests became confused on the repeated "Skip to main content" read out.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh, you are right, I forgot about that. Got too into the landmark label zone :D Good flag!
it('renders heading tag', async () => { | ||
const page = await newSpecPage({ | ||
components: [GcdsSrOnly], | ||
html: `<gcds-sr-only tag="h2">Hidden text</gcds-sr-only>`, | ||
}); | ||
expect(page.root).toEqualHtml(` | ||
<gcds-sr-only tag="h2"> | ||
<mock:shadow-root> | ||
<h2> | ||
<slot></slot> | ||
</h2> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would be nice if we have tests for the different tag types as well
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!
Summary | Résumé
Added
tag
prop togcds-sr-only
to allow users to hide heading content as well as regular text content.Integrated into the following, existing components:
Dev board ticket