Skip to content

Conversation

@LaurenceRLewis
Copy link

Added or removed the following:

Added:
not:span.fa and i.fa to exclude Font Awesomeicons hooks on empty elements.

Added:
i.fa:not([aria-hidden="true"])::after, span.fa:not([aria-hidden="true"])::after {
content: 'Use aria-hidden="true on icons.' !important;
} to make sure aria-hidden is included on icons

Added: if div has class or ID of header but is not a native element include role.

div#header:not([role="banner"])::after, div.header:not([role="banner"])::after {
content: 'Use role="banner" on this header element or use native

.' !important;
}

Removed Section:
requires role=contentInfo and requires role=banner as these are already conveyed natively. W3C validator generates a warning if used.

Testing changes before committing for comment
.fa:not([aria-hidden="true"])::after {
    content: 'Use aria-hidden="true on icons.' !important;
}
:not(i.fa[aria-hidden="true"])::after, :not(span.fa[aria-hidden="true"])::after {
    content: 'Use aria-hidden="true on icons.' !important;
}
Added not:span.fa and i.fa to exclude icons hooks on empty elements.
Added i.fa:not([aria-hidden="true"])::after, span.fa:not([aria-hidden="true"])::after {
    content: 'Use aria-hidden="true on icons.' !important;
} to make sure aria-hidden is included on icons


/****
Removed as <footer> requires role=contentInfo and <header> requires role=banner as these are already conveyed natively. W3C validator generates a warning if used.
****/
/*
body > div#footer:not([role="contentinfo"])::after, body > div.footer:not([role="contentinfo"])::after {
	content: 'Use role="contentinfo" on this footer element or use native HTML5 <footer>.' !important;
}
body > div#header:not([role="banner"])::after, body > div.header:not([role="banner"])::after, body > div.banner:not([role="banner"])::after, body > div#banner:not([role="banner"])::after {
	content: 'Use role="banner" on this header element or use native <header>.' !important;
}
*/

/***
if div has class or ID of header but is not a native element include role. Considering if .banner #banner should be included
*/
div#header:not([role="banner"])::after, div.header:not([role="banner"])::after {
	content: 'Use role="banner" on this header element or use native <header>.' !important;
}

These are just personal observations.
:not.MathJax::after {
	content: 'This element is deprecated, non-standard or obsolete.' !important;
}
span.MathJax .math::after {
	content: 'This is a MathJax symbol.' !important;
}
:not(.MathJax)::after {
	content: 'This element is deprecated, non-standard or obsolete.' !important;
}
:not(span.MathJax .math)::after {
	content: 'This element is deprecated, non-standard or obsolete.' !important;
}
.sr-only:after{
   content: 'Off-screen text for screen reader users. Is this text necessary?' !important; 
}
Copy link

@coliff coliff left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Can this be merged?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants