[MCL-22] Language selector Created: 11/Dec/23  Updated: 11/Dec/23

Status: Open
Project: Magnolia Component Library
Component/s: Page Structure
Affects Version/s: None
Fix Version/s: None

Type: Story Priority: Neutral
Reporter: Raymond Tran Assignee: Unassigned
Resolution: Unresolved Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Issue Links:
Cloners
clones MCL-21 Breadcrumb navigation Open
is cloned by MCL-23 Navigation Open
Template:
Acceptance criteria:
Acceptance Criteria
[ ]* Component is called "Language selector"
[ ]* Indicates the current page’s selected language in a dropdown menu
[ ]* All available languages should be listed in the dropdown menu
[ ]* The links should be rendered as an unordered list of <a> elements
[ ]* The dropdown menu is triggered when the button is clicked
[ ]* The active (current) language is shown as the label of the dropdown button
[ ]* Format of language label text is "Language (Country)" e.g. "English (United States)"
[ ]* When the user clicks or touches a language item in the expanded language dropdown menu, the page reloads in the desired language.
Documentation Acceptance Criteria
[ ]* Contains Title, Description and Examples
[ ]* Contains FTL and YAML code
Content Author Acceptance Criteria
[ ]* The component is hard-coded into the nav area template "btk/templates/areas/nav.ftl"
Accessibility Acceptance Criteria
[ ]* Logical tab order should be maintained, ensuring that keyboard users navigate through the elements in a coherent sequence.
[ ]* The navigation menu <nav> element contains aria-label="breadcrumb" to indicate the purpose of the navigation menu
[ ]* The menu can be selected using the tab key
[ ]* The state of the menu should be reflected in the aria-expanded="true" or aria-expanded="false" attribute
[ ]* Cursor keys and return key can be used to select the desired menu item

 Description   

User Story:

As a content author,
I want to create a language selection menu
So that my site visitors can change the language of the page currently being viewed.

Bootstrap documentation:

https://getbootstrap.com/docs/5.3/components/dropdowns/


Generated at Mon Feb 12 04:48:46 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.