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

ナビゲーションバーにariaCurrent追加 #406

Merged
merged 1 commit into from
Dec 28, 2024
Merged

Conversation

ogu-kazemiya
Copy link
Contributor

@ogu-kazemiya ogu-kazemiya commented Dec 27, 2024

User description

close #293


PR Type

Enhancement


Description

  • ナビゲーションバーのリンクにaria-current属性を追加し、現在のパスを示すリンクにアクセシビリティ対応を実施。
  • isActiveがtrueの場合、aria-current'page'に設定されるように変更。
  • アクセシビリティ向上のための変更。

Changes walkthrough 📝

Relevant files
Enhancement
NavigationLinksItem.vue
ナビゲーションリンクに`aria-current`属性を追加                                                     

src/components/NavigationBar/NavigationLinksItem.vue

  • aria-current属性を追加し、現在のパスを表すリンクに適用。
  • isActiveがtrueの場合にaria-current'page'に設定。
  • +1/-0     

    💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information

    Copy link
    Contributor

    PR Reviewer Guide 🔍

    Here are some key observations to aid the review process:

    🎫 Ticket compliance analysis ✅

    293 - Fully compliant

    Fully compliant requirements:

    • Add aria-current attribute to navigation bar links.
    • Set aria-current to 'page' when the link represents the current path.
    • Improve accessibility (a11y) for navigation links.

    Not compliant requirements:

    ⏱️ Estimated effort to review: 1 🔵⚪⚪⚪⚪
    🧪 No relevant tests
    🔒 No security concerns identified
    ⚡ Recommended focus areas for review

    Possible Issue

    Ensure that aria-current is correctly set to 'page' only when isActive is true, and verify that it does not introduce unexpected behavior in navigation.

    :aria-current="isActive ? 'page' : null"

    Copy link
    Contributor

    PR Code Suggestions ✨

    Explore these optional code suggestions:

    CategorySuggestion                                                                                                                                    Score
    General
    aria-current属性にnullではなくundefinedを使用してブラウザ間の互換性を向上させます。

    aria-current属性にnullを設定する場合、ブラウザによっては意図しない挙動を引き起こす可能性があるため、undefinedを使用する方が安全です。

    src/components/NavigationBar/NavigationLinksItem.vue [37]

    -:aria-current="isActive ? 'page' : null"
    +:aria-current="isActive ? 'page' : undefined"
    Suggestion importance[1-10]: 8

    Why: The suggestion improves browser compatibility by replacing null with undefined for the aria-current attribute, which can prevent unintended behavior in some browsers. This change is relevant and enhances the robustness of the code.

    8

    @Pugma Pugma requested a review from Futadaruma December 27, 2024 04:39
    Copy link
    Contributor

    @Futadaruma Futadaruma left a comment

    Choose a reason for hiding this comment

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

    MacのVoiceOverで確認しました
    良さそうです!

    @ogu-kazemiya ogu-kazemiya merged commit bf5f343 into main Dec 28, 2024
    11 checks passed
    @ogu-kazemiya ogu-kazemiya deleted the feat/ariaCurrent branch December 28, 2024 02:07
    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
    Projects
    None yet
    Development

    Successfully merging this pull request may close these issues.

    ナビゲーションバーで、現在のパスを表すリンクにaria-currentをつける
    2 participants