Merge pull request #13763 from github/repo-sync

repo sync

Author: Octomerger

components/page-header/LanguagePicker.tsx

@@ -28,10 +28,11 @@ export const LanguagePicker = ({ variant }: Props) => {
             <Link href={router.asPath} locale={lang.code}>
               {lang.nativeName ? (
                 <>
-                  {lang.nativeName} ({lang.name})
+                  <span lang={lang.code}>{lang.nativeName}</span> (
+                  <span lang="en">{lang.name}</span>)
                 </>
               ) : (
-                lang.name
+                <span lang={lang.code}>{lang.name}</span>
               )}
             </Link>
           ),

components/ui/Picker/Picker.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react'
 import cx from 'classnames'
+import { useTranslation } from 'components/hooks/useTranslation'
 
 import { Details, useDetails, Text, Dropdown, Box } from '@primer/components'
 import { ChevronDownIcon } from '@primer/octicons-react'
@@ -52,6 +53,7 @@ function PickerOptionsWrapper({ variant, children }: PickerWrapperPropsT) {
 export function Picker({ variant, defaultText, options, ...restProps }: PickerPropsT) {
   const { getDetailsProps, setOpen } = useDetails({ closeOnOutsideClick: true })
   const selectedOption = options.find((option) => option.selected)
+  const { t } = useTranslation(['picker', 'toggle_picker_list'])
 
   return (
     <Details
@@ -65,7 +67,7 @@ export function Picker({ variant, defaultText, options, ...restProps }: PickerPr
       <summary
         className="d-block btn btn-invisible color-fg-default"
         aria-haspopup="true"
-        aria-label="Toggle picker list"
+        aria-label={t('toggle_picker_list')}
       >
         <PickerSummaryWrapper variant={variant}>
           <Text>{selectedOption?.text || defaultText}</Text>

data/ui.yml

@@ -23,6 +23,8 @@ header:
     ghes_release_notes_upgrade_patch_only: 📣 This is not the <a href="#{{ latestPatch }}">latest patch release</a> of Enterprise Server.
     ghes_release_notes_upgrade_release_only: 📣 This is not the <a href="/enterprise-server@{{ latestRelease }}/admin/release-notes">latest release</a> of Enterprise Server.
     ghes_release_notes_upgrade_patch_and_release: 📣 This is not the <a href="#{{ latestPatch }}">latest patch release</a> of this release series, and this is not the <a href="/enterprise-server@{{ latestRelease }}/admin/release-notes">latest release</a> of Enterprise Server.
+picker:
+  toggle_picker_list: Toggle picker list
 release_notes:
   banner_text: GitHub began rolling these changes out to enterprises on
 search: