chore(Alert): Allowed for non header elements to be set at the Alert title #8518
Conversation
|
Preview: https://patternfly-react-pr-8518.surge.sh A11y report: https://patternfly-react-pr-8518-a11y.surge.sh |
thatblindgeye
left a comment
thatblindgeye
left a comment
There was a problem hiding this comment.
There were also a few GH lint warnings (similar to my Accordion PR).
|
|
||
| * As demonstrated in the 5th and 6th variations below, use the `titleHeadingLevel` property to set the heading level of an alert title. Headings should be ordered by their level and heading levels should not be skipped. For example, a heading of an `h2` level should not be followed directly by an `h4`. | ||
| * As demonstrated in the 5th and 6th variations below, use the `component` property to set the element for an alert title. | ||
| * If there is no description below the alert title, then the `component` prop could be set to a non-heading element such as a `span` or `div`. |
There was a problem hiding this comment.
Nit, just to make it more of a recommendation:
| * If there is no description below the alert title, then the `component` prop could be set to a non-heading element such as a `span` or `div`. | |
| * If the `description` prop is not passed in, then the `component` prop should be set to a non-heading element such as a `span` or `div`. |
We should also open up a followup issue for org to update the a11y docs
There was a problem hiding this comment.
ah yeah - those are old, but I can take a look at seeing about cleaning it up |
| React.useEffect(() => { | ||
| dismissed && onTimeout(); | ||
| }, [dismissed]); | ||
| }, [dismissed, timeoutAnimation]); |
There was a problem hiding this comment.
Looks like this was added to the wrong useEffect. onTimeout could be added here to dismiss the GH warning and timeoutAnimation added to the useEffect above this one.
| const calculatedTimeout = timeout === true ? 8000 : Number(timeout); | ||
| if (calculatedTimeout > 0) { | ||
| const timer = setTimeout(() => setTimedOut(true), calculatedTimeout); | ||
| return () => clearTimeout(timer); | ||
| } | ||
| }, []); |
There was a problem hiding this comment.
GH is still warning about missing timeout in the dependency array here
|
Just needs a rebase and we can merge. |
nicolethoen
force-pushed
the
alert_custom_component
branch
from
942f8ec to
fa4ba73
Compare
|
Your changes have been released in:
Thanks for your contribution! 🎉 |
6 participants
What: Closes #8402
deprecates the
titleHeadingLeveladds a
componentpropupdates existing examples on the Alert page to avoid new console warnings and advise the use of the component prop.
Created new issue to track the removal of the deprecated titleHeadingLevel prop: #8519