Skip to content

Correct the HTML structure of the UI components to ensure validity#2894

Merged
anagstef merged 9 commits intomainfrom
stefanos/sdk-1419-check-fix-invalid-html-structure
Mar 5, 2024
Merged

Correct the HTML structure of the UI components to ensure validity#2894
anagstef merged 9 commits intomainfrom
stefanos/sdk-1419-check-fix-invalid-html-structure

Conversation

@anagstef
Copy link
Copy Markdown
Member

@anagstef anagstef commented Feb 29, 2024

Description

This PR alters some HTML elements to fix the validity of the HTML. This includes:

  • Turning some div and p elements into span, especially the ones that are descendants of a button
  • Include aria-controls and aria-describedby attributes only when there is a valid value
  • Remove height and width attributes from an img element. Use CSS instead.
  • Use correct roles and hierarchy for tablist, menu, menuitem.

Checklist

  • npm test runs as expected.
  • npm run build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Feb 29, 2024

🦋 Changeset detected

Latest commit: 5cf9a2a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
@clerk/clerk-js Patch
@clerk/chrome-extension Patch
@clerk/clerk-expo Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@anagstef anagstef self-assigned this Feb 29, 2024
@anagstef anagstef changed the title fix(clerk-js): Convert nested div to span inside button elements [WIP] fix(clerk-js): Convert nested div to span inside button elements Feb 29, 2024
@anagstef anagstef force-pushed the stefanos/sdk-1419-check-fix-invalid-html-structure branch from 2b7b533 to 6e566bf Compare March 1, 2024 17:59
@anagstef anagstef force-pushed the stefanos/sdk-1419-check-fix-invalid-html-structure branch from 5633faa to 47e56a5 Compare March 5, 2024 09:32
@anagstef anagstef changed the title [WIP] fix(clerk-js): Convert nested div to span inside button elements Correct the HTML structure of the UI components to ensure validity Mar 5, 2024
@anagstef anagstef marked this pull request as ready for review March 5, 2024 09:36
Copy link
Copy Markdown
Member

@nikosdouvlis nikosdouvlis left a comment

Choose a reason for hiding this comment

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

👏🏻

Comment thread packages/clerk-js/src/ui/components/UserButton/UserButton.tsx
Comment thread packages/clerk-js/src/ui/elements/OrganizationPreview.tsx
Comment thread packages/clerk-js/src/ui/primitives/Input.tsx
Copy link
Copy Markdown
Contributor

@panteliselef panteliselef left a comment

Choose a reason for hiding this comment

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

lgtm

@anagstef anagstef added this pull request to the merge queue Mar 5, 2024
Merged via the queue into main with commit 63373bf Mar 5, 2024
@anagstef anagstef deleted the stefanos/sdk-1419-check-fix-invalid-html-structure branch March 5, 2024 11:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants