Skip to content
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

fix: MessageStrip Accessibility + useUniqueId hook #1156

Merged
merged 11 commits into from
Aug 11, 2020

Conversation

prsdthkr
Copy link
Member

@prsdthkr prsdthkr commented Aug 8, 2020

Description

In this change, we

  • remove the hard-coded aria-controls value for the MessageStrip close button
  • add stories for MessageStrip states with custom children and link
    image
  • create and use the useUniqueId hook to generate IDs in functional components

fixes #1153

Before

image

After

image

Know Issues

https://github.com/SAP/fundamental-react/issues/1155

@prsdthkr prsdthkr self-assigned this Aug 8, 2020
@prsdthkr prsdthkr added the A11y Accessiblity label Aug 8, 2020
@prsdthkr prsdthkr requested a review from a team August 8, 2020 00:10
@netlify
Copy link

netlify bot commented Aug 8, 2020

Deploy preview for fundamental-react ready!

Built with commit e0d923d

https://deploy-preview-1156--fundamental-react.netlify.app

@@ -47,17 +48,20 @@ const MessageStrip = (props) => {
className
);

const alertId = otherProps?.id || shortId.generate();
Copy link
Contributor

Choose a reason for hiding this comment

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

Can we create a useUniqueId() hook like in widgets -

import shortid from './shortId';
import { useState } from 'react';

export default () => {
    const [uniqueId, setUniqueId] = useState();
    if (uniqueId) return uniqueId;
    const id = shortid.generate();
    setUniqueId(id);
    return id;
};

@@ -48,10 +48,10 @@ const MessageStrip = (props) => {
className
);

const alertId = otherProps?.id || shortId.generate();
const alertId = otherProps?.id || useUniqueId();
Copy link
Contributor

Choose a reason for hiding this comment

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

We can't conditionally call hooks like this, or with ternary expressions like others.

We can split it onto separate lines though,

    const generatedId = useUniqueId();
    const alertId = otherProps?.id || generatedId;

Copy link
Contributor

@jbadan jbadan left a comment

Choose a reason for hiding this comment

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

LGTM 🚢

@prsdthkr prsdthkr requested a review from skvale August 10, 2020 22:20
@prsdthkr prsdthkr changed the title fix: MessageStrip Acccessibility fix: MessageStrip Accessibility + useUniqueId hook Aug 10, 2020
@prsdthkr prsdthkr merged commit 267e0bd into master Aug 11, 2020
@prsdthkr prsdthkr deleted the fix/message-strip-acccessibility branch August 11, 2020 17:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A11y Accessiblity
Projects
None yet
Development

Successfully merging this pull request may close these issues.

aria-controls value is hard coded in MessageStrip
3 participants